/*
  Design tokens for PodcastPortal.

  Every colour in the app resolves through these custom properties so the light and
  dark themes stay in sync and no component hardcodes a value. The palette is built
  around one metaphor: an episode you have started is burning down. Amber marks live
  progress, the spent tone marks what is already behind you.

  The three text tones all clear WCAG AA for small text (4.5:1) against both surfaces —
  measured, not estimated. `text-mute` carries the metadata rows (position, age, counts)
  at 11-12px, so it is information a listener reads while scanning, not decoration; the
  hierarchy between the three is carried by size and weight as much as by tone.
*/

:root,
[data-theme="dark"] {
  --color-surface:          #0D1E23;
  --color-surface-raised:   #142C33;
  --color-surface-hover:    #1A3841;
  --color-line:             #21424B;

  --color-text:             #F4EFE6;
  --color-text-dim:         #B4C6CB;
  --color-text-mute:        #8AA3AB;
  --color-text-on-ember:    #16262B;

  --color-ember:            #F0913F;
  --color-ember-soft:       #F0913F26;
  --color-spent:            #6B4A33;
  --color-sage:             #7FA08F;
  --color-danger:           #E06B5A;

  --shadow-raised:          0 6px 24px #0D1E2366;

  color-scheme: dark;
}

[data-theme="light"] {
  --color-surface:          #F4EFE6;
  --color-surface-raised:   #FFFFFF;
  --color-surface-hover:    #EDE6D9;
  --color-line:             #DCD2C2;

  --color-text:             #14262B;
  --color-text-dim:         #3E545F;
  --color-text-mute:        #566D77;
  --color-text-on-ember:    #FFFFFF;

  --color-ember:            #B85A12;
  --color-ember-soft:       #B85A121A;
  --color-spent:            #C0A48E;
  --color-sage:             #4A7361;
  --color-danger:           #B23A2A;

  --shadow-raised:          0 6px 24px #14262B1F;

  color-scheme: light;
}

:root {
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Public Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --shell-max: 1120px;
  --tap-target: 44px;
}