/* ============================================================
   WWSU 106.9 FM — theme.css
   Computed CSS theme generated from tokens.json (W3C DTCG).
   Same tokens, namespaced --token-* for tooling parity.
   For application use, prefer colors_and_type.css which sets
   the human-readable token names (--wwsu-green, etc).
   ============================================================ */

:root {
  /* color */
  --token-color-wwsu-green:       #019645;
  --token-color-wwsu-green-glow:  #2BD174;
  --token-color-wwsu-green-deep:  #016B32;
  --token-color-wsu-green:        #026937;
  --token-color-wsu-gold:         #CEA052;
  --token-color-wsu-gold-deep:    #9A7A36;
  --token-color-wsu-mclin-gold:   #FFE1A5;
  --token-color-wwsu-black:       #101820;
  --token-color-wwsu-cream:       #F2F1F0;
  --token-color-wwsu-cream-2:     #E5E4E2;
  --token-color-wwsu-paper:       #FAFAF8;
  --token-color-signal-red:       #C8362B;
  --token-color-signal-amber:     #E0A82E;
  --token-color-fg-default:       #101820;
  --token-color-fg-muted:         #4A5260;
  --token-color-fg-subtle:        #6B7280;
  --token-color-fg-on-dark:       #F2F1F0;
  --token-color-fg-on-dark-muted: #B5BCC6;
  --token-color-rule:             #1F2733;
  --token-color-rule-soft:        #C9CCD0;
  --token-color-rule-on-dark:     #3A4250;

  /* font */
  --token-font-display: futura-pt, Futura, "Futura PT", "Century Gothic", system-ui, sans-serif;
  --token-font-serif:   "ITC Souvenir Std", "ITC Souvenir", Recoleta, Cooper, Georgia, serif;
  --token-font-body:    futura-pt, Futura, system-ui, sans-serif;
  --token-font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* size */
  --token-size-fs-12: 0.75rem;
  --token-size-fs-14: 0.875rem;
  --token-size-fs-16: 1rem;
  --token-size-fs-18: 1.125rem;
  --token-size-fs-21: 1.3125rem;
  --token-size-fs-24: 1.5rem;
  --token-size-fs-30: 1.875rem;
  --token-size-fs-38: 2.375rem;
  --token-size-fs-48: 3rem;
  --token-size-fs-64: 4rem;
  --token-size-fs-88: 5.5rem;
  --token-size-fs-120: 7.5rem;

  /* tracking */
  --token-track-marquee:  0.08em;
  --token-track-loose:    0.04em;
  --token-track-normal:   0;
  --token-track-tight:    -0.01em;
  --token-track-souvenir: -0.005em;

  /* leading */
  --token-leading-tight: 1.04;
  --token-leading-snug:  1.18;
  --token-leading-body:  1.5;
  --token-leading-loose: 1.65;

  /* space (4-based) */
  --token-space-1:  4px;
  --token-space-2:  8px;
  --token-space-3:  12px;
  --token-space-4:  16px;
  --token-space-5:  20px;
  --token-space-6:  24px;
  --token-space-8:  32px;
  --token-space-10: 40px;
  --token-space-12: 48px;
  --token-space-16: 64px;
  --token-space-20: 80px;
  --token-space-24: 96px;

  /* radius */
  --token-radius-0: 0px;
  --token-radius-1: 2px;
  --token-radius-2: 4px;
  --token-radius-3: 8px;
  --token-radius-pill: 999px;

  /* rule width */
  --token-rule-w-1: 1px;
  --token-rule-w-2: 2px;
  --token-rule-w-3: 3px;
  --token-rule-w-4: 4px;
  --token-rule-w-6: 6px;

  /* shadow */
  --token-shadow-card: 0 1px 0 0 #1F2733, 0 0 0 2px #101820;
  --token-shadow-soft: 0 6px 20px -10px rgba(10,13,17,0.35);

  /* motion */
  --token-motion-ease-broadcast: cubic-bezier(0.2, 0.8, 0.2, 1);
  --token-motion-ease-cut:       cubic-bezier(0.7, 0, 0.84, 0);
  --token-motion-dur-1:  90ms;
  --token-motion-dur-2: 160ms;
  --token-motion-dur-3: 240ms;
  --token-motion-dur-4: 400ms;

  /* semantic aliases */
  --token-semantic-bg:           var(--token-color-wwsu-cream);
  --token-semantic-bg-elevated:  var(--token-color-wwsu-paper);
  --token-semantic-bg-inverse:   var(--token-color-wwsu-black);
  --token-semantic-fg:           var(--token-color-fg-default);
  --token-semantic-fg-muted:     var(--token-color-fg-muted);
  --token-semantic-accent:       var(--token-color-wwsu-green);
  --token-semantic-accent-hover: var(--token-color-wwsu-green-glow);
  --token-semantic-accent-press: var(--token-color-wwsu-green-deep);
}