/* ============================================================
   MERINGO LISTEN DESIGN SYSTEM — Colors & Typography
   "Deep Velvet" aesthetic, shared with Meringo Music.
   Listen's signature variation: a Moonlight violet secondary
   for the spoken-word / evening register, alongside the shared
   Candlelight Gold. Rune Teal is kept only where the app shows
   it (the bit-exact route badge / hi-res chips).
   ============================================================ */

/* ────────────────────────────────────────────────
   SELF-HOSTED FONTS
   Cormorant Garamond + Outfit + JetBrains Mono.
   Variable fonts: single woff2 per style/subset covers
   the full weight range we declare.
   ──────────────────────────────────────────────── */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/cormorant-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('assets/fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('assets/fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ────────────────────────────────────────────────
   PRIMITIVE COLOR TOKENS
   Source: MeringoColors.kt (shared with Meringo Music)
   ──────────────────────────────────────────────── */
:root {
  /* ── Core backgrounds ── */
  --color-midnight-velvet:  #1A0E2E;  /* MidnightVelvet — primary bg; deep purple soul */
  --color-velvet-surface:   #261840;  /* VelvetSurface — cards, sheets */
  --color-velvet-elevated:  #32204F;  /* VelvetElevated — dialogs, bottom sheets */
  --color-velvet-highest:   #3E2860;  /* surfaceContainerHighest */

  /* Semantic aliases */
  --color-void:         #1A0E2E;
  --color-bg-base:      #1A0E2E;
  --color-bg-surface:   #261840;
  --color-bg-elevated:  #32204F;
  --color-bg-overlay:   #3E2860;

  /* ── Borders ── */
  --color-border-dim:     #3D2D5A;   /* outlineVariant */
  --color-border-default: #7A6A52;   /* outline = ParchmentFaint */
  --color-border-bright:  #9E7A3E;   /* CandlelightDim */
  --color-border-gold:    rgba(232, 181, 96, 0.4);

  /* ── Candlelight Gold — shared primary accent ── */
  --color-gold:         #E8B560;   /* CandlelightGold */
  --color-gold-dim:     #9E7A3E;   /* CandlelightDim */
  --color-gold-bright:  #F4D080;   /* lightened hover */
  --color-gold-subtle:  rgba(232, 181, 96, 0.12);
  --color-gold-glow:    rgba(232, 181, 96, 0.35);

  /* ── Moonlight Violet — Listen's signature secondary ──
     The spoken-word / evening register. Pulled from the
     shared VelvetGlow family so it still reads as one brand. */
  --color-violet:        #9b7fd4;   /* Moonlight */
  --color-violet-dim:    #6B4FA0;   /* VelvetGlow dim */
  --color-violet-bright: #B89FE4;
  --color-violet-subtle: rgba(155, 127, 212, 0.14);
  --color-violet-glow:   rgba(155, 127, 212, 0.35);

  /* ── Rune Teal — kept ONLY for route-badge / hi-res references ── */
  --color-teal:         #3D8B8B;   /* RuneTeal */
  --color-teal-dim:     #245454;   /* RuneTealDim */
  --color-teal-subtle:  rgba(61, 139, 139, 0.15);
  --color-teal-glow:    rgba(61, 139, 139, 0.3);

  /* ── Parchment text scale ── */
  --color-text-0:       #F4E8D0;   /* Parchment — primary */
  --color-text-1:       #B8A88A;   /* ParchmentDim — secondary */
  --color-text-2:       #7A6A52;   /* ParchmentFaint — muted */
  --color-text-3:       #3D2D5A;   /* outlineVariant — disabled */

  /* ── Glassmorphism ── */
  --color-glass-scrim:    rgba(26, 14, 46, 0.80);
  --color-glass-surface:  rgba(26, 14, 46, 0.60);

  /* ── Semantic states ── */
  --color-success:      #4CAF82;
  --color-success-dim:  rgba(76, 175, 130, 0.15);
  --color-warning:      #FFB74D;
  --color-error:        #CD5D54;   /* EmberRed — AA-tuned to clear 4.5:1 on surface */
  --color-error-dim:    rgba(205, 93, 84, 0.15);
  --color-playing:      var(--color-gold);
}

/* ────────────────────────────────────────────────
   SEMANTIC COLOR TOKENS
   ──────────────────────────────────────────────── */
:root {
  --bg:            var(--color-bg-base);
  --bg-card:       var(--color-bg-surface);
  --bg-elevated:   var(--color-bg-elevated);
  --bg-overlay:    var(--color-bg-overlay);

  --fg:            var(--color-text-0);
  --fg-secondary:  var(--color-text-1);
  --fg-muted:      var(--color-text-2);
  --fg-disabled:   var(--color-text-3);

  --accent:        var(--color-gold);
  --accent-hover:  var(--color-gold-bright);
  --accent-subtle: var(--color-gold-subtle);
  --accent-2:      var(--color-violet);   /* Listen's secondary */

  --border:        var(--color-border-default);
  --border-focus:  var(--color-border-gold);
}

/* ────────────────────────────────────────────────
   TYPOGRAPHY TOKENS
   ──────────────────────────────────────────────── */
:root {
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-ui:      'Outfit', 'system-ui', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  52px;
  --text-5xl:  68px;
  --text-hero: 88px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
}

/* ────────────────────────────────────────────────
   SEMANTIC TYPE STYLES (as classes)
   ──────────────────────────────────────────────── */
.type-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-0);
}
.type-display-xl { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: var(--weight-light); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-0); }
.type-display-lg { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-regular); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-0); }
.type-display-md { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-regular); line-height: var(--leading-snug); color: var(--color-text-0); }
.type-display-sm { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-medium); line-height: var(--leading-snug); color: var(--color-text-0); }

.type-title-lg { font-family: var(--font-ui); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--color-text-0); }
.type-title-md { font-family: var(--font-ui); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--color-text-0); }
.type-title-sm { font-family: var(--font-ui); font-size: var(--text-md); font-weight: var(--weight-medium); line-height: var(--leading-snug); color: var(--color-text-0); }

.type-body-lg  { font-family: var(--font-ui); font-size: var(--text-md); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--color-text-1); }
.type-body-md  { font-family: var(--font-ui); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--color-text-1); }
.type-body-sm  { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--color-text-1); }

.type-label-lg { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); color: var(--color-text-2); }
.type-label-sm { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-2); }

.type-mono-md { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-regular); letter-spacing: 0.01em; color: var(--color-text-1); }
.type-mono-sm { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-regular); letter-spacing: 0.01em; color: var(--color-text-2); }

/* ────────────────────────────────────────────────
   SPACING / RADIUS / SHADOW / ANIMATION TOKENS
   ──────────────────────────────────────────────── */
:root {
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --radius-pill: 999px;

  --shadow-card:     inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-elevated: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.5);
  --shadow-modal:    0 8px 48px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);

  --glow-gold-sm:  0 0 8px rgba(201,165,90,0.25);
  --glow-gold-md:  0 0 20px rgba(201,165,90,0.3), 0 0 4px rgba(201,165,90,0.5);
  --glow-gold-lg:  0 0 40px rgba(201,165,90,0.25), 0 0 80px rgba(201,165,90,0.1);

  --glow-violet-sm: 0 0 12px rgba(107,79,160,0.3);
  --glow-violet-md: 0 0 24px rgba(107,79,160,0.35), 0 0 6px rgba(155,127,212,0.2);

  --ring-focus: 0 0 0 2px var(--color-bg-base), 0 0 0 4px var(--color-gold);

  --ease-velvet: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   350ms;
  --duration-reveal: 500ms;
}

/* ────────────────────────────────────────────────
   BASE RESET
   ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
  background: var(--color-bg-base);
  color: var(--color-text-0);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}