/*
  Rümbl Design System — tokens (v2, "Fight for Love" redesign).
  Structure: primitive palette → semantic roles (surface/label/separator/tint)
  → legacy aliases (so existing component CSS didn't need rewriting).
  Theme resolution order: explicit [data-theme] choice, else OS
  prefers-color-scheme, else dark (the redesign's default).
*/

:root {
  /* ── Primitives — redesign palette (dark values; light overrides below) ── */
  --p-bg:      #161514; /* app background */
  --p-bg0:     #100f0e; /* tab bar / deepest */
  --p-bg2:     #1b1917; /* section band */
  --p-bg3:     #221f1d; /* inset card */
  --p-card:    #201e1d; /* cards, rows */
  --p-pill:    #1e1c1b; /* pills */
  --p-tint-a:  #152a2b; /* coach/teal gradient card, start */
  --p-tint-b:  #1a2422; /* coach/teal gradient card, end */

  --p-ink:     #f6f4ee; /* primary headings */
  --p-ink1:    #f1efe9; /* primary text */
  --p-ink2:    #e7e2d9; /* secondary text */
  --p-ink3:    #c8c2b8; /* tertiary text / labels */
  --p-muted:   #bdb6ac; /* muted text */
  --p-muted2:  #9c968d; /* body subtext */
  --p-muted3:  #8b857c; /* captions */
  --p-muted4:  #7f7a71; /* faint / placeholder */

  /* Brand accents — same hex in both themes */
  --p-teal:        #22b0bd; /* primary buttons, active states, links */
  --p-teal-onbtn:  #08292c; /* text on teal fills */
  --p-coral:       #ef5f6b; /* hearts, destructive, "unpleasant" */

  /* Brand accents — theme-dependent text/caption variants */
  --p-teal-text-dark:   #4fcdd8;
  --p-teal-text-light:  #1a8f9b;
  --p-teal-text2-dark:  #8fbfc4;
  --p-teal-text2-light: #2a8f99;
  --p-coral-text-dark:  #ef8189;
  --p-coral-text-light: #d9505d;

  /* ── Primitives — light theme overrides ── */
  --p-bg-light:     #f1f5f4;
  --p-card-light:   #ffffff;
  --p-bg0-light:    #e6efee;
  --p-bg2-light:    #f6faf9;
  --p-bg3-light:    #eef4f3;
  --p-tint-light:   #e4f1f1;
  --p-ink-light:    #173538; /* ink + ink1 collapse to one value in light */
  --p-ink2-light:   #2c3f41;
  --p-ink3-light:   #46524f;
  --p-muted-light:  #5d6a6b;
  --p-muted2-light: #6d7a7b;
  --p-muted3-light: #93a0a1; /* muted3 + muted4 collapse in light */

  /* Legacy neutrals still used for warning/success (redesign doesn't redefine these) */
  --p-amber-300: #F5C842;
  --p-amber-600: #C8900A;
  --p-amber-800: #7A5800;
  --p-green-300: #6FCF8A;
  --p-green-500: #5BAD77;
  --p-green-600: #2D8A50;
  --p-green-700: #1A5C30;
  --p-green-900: #0D2A14;

  /* ── Type — Apple HIG scale (size / line-height) — layout scale unchanged ── */
  --text-large-title: 600 34px/1.21 var(--font-sans);
  --text-title-1:      500 28px/1.21 var(--font-sans);
  --text-title-2:      500 22px/1.27 var(--font-sans);
  --text-title-3:      500 20px/1.25 var(--font-sans);
  --text-headline:     500 17px/1.29 var(--font-sans);
  --text-body:         400 17px/1.29 var(--font-sans);
  --text-callout:      400 16px/1.31 var(--font-sans);
  --text-subhead:      400 15px/1.33 var(--font-sans);
  --text-footnote:     400 13px/1.38 var(--font-sans);
  --text-caption-1:    400 12px/1.33 var(--font-sans);
  --text-caption-2:    400 11px/1.18 var(--font-sans);

  /* ── Spacing — 4pt base grid ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ── Radius — redesign uses slightly larger radii than the old HIG scale ── */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* ── Motion ── */
  --duration-fast: 0.15s;
  --duration-base: 0.2s;
  --easing-standard: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ── Minimum HIG hit target ── */
  --hit-target-min: 44px;

  /* ── Fonts — two-tier system per redesign: Fredoka is display-only now
     (screen titles, card questions, big numbers, warm statements); body/UI
     chrome and user-written text both move to Instrument Sans. ── */
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-voice: 'Instrument Sans', system-ui, sans-serif;

  /* ── Layout ── */
  --sidebar-w: 200px;
  --radius: var(--radius-sm); /* legacy alias used throughout rumbl.html */

  /* Text on a solid teal fill — same value both themes per redesign spec */
  --text-on-brand: var(--p-teal-onbtn);

  /* ══ Semantic roles — DARK (default) ══ */
  --bg-primary:   var(--p-bg);
  --bg-secondary: var(--p-bg2);
  --bg-elevated:  var(--p-card);

  --label-primary:   var(--p-ink1);
  --label-secondary: var(--p-ink2);
  --label-tertiary:  var(--p-ink3);

  --separator:        rgba(255,255,255,0.08);
  --separator-strong: rgba(255,255,255,0.14);

  --brand: var(--p-teal);
  --brand-light: rgba(34,176,189,0.16);
  --brand-mid: var(--p-teal-text-dark);
  --brand-dark: var(--p-teal-text2-dark);
  --blush: rgba(239,95,107,0.16);

  --teal: var(--brand);
  --teal-light: var(--brand-light);
  --teal-mid: var(--brand-mid);
  --teal-bright: var(--brand);
  --rumbl-teal: var(--brand-mid);

  --color-tint: var(--brand);
  --color-tint-strong: var(--brand-mid);

  --surface-0: var(--bg-primary);
  --surface-1: var(--bg-secondary);
  --surface-2: var(--bg-elevated);
  --text-primary: var(--label-primary);
  --text-secondary: var(--label-secondary);
  --text-muted: var(--label-tertiary);
  --border: var(--separator);
  --border-strong: var(--separator-strong);

  --warning-bg: #2A2000; --warning-border: var(--p-amber-800); --warning-text: var(--p-amber-300); --warning-icon: var(--p-amber-300);
  --success-bg: var(--p-green-900); --success-border: #2D6B3A; --success-text: var(--p-green-300); --success-icon: var(--p-green-300);
  --danger: var(--p-coral);

  --insight: var(--brand-mid); --insight-mid: var(--brand-dark); --insight-light: rgba(34,176,189,0.16); --insight-border: rgba(34,176,189,0.35);
  --entry-bg: rgba(34,176,189,0.14); --entry-sensitive-bg: rgba(200,144,10,0.16);

  --soft-pink: rgba(239,95,107,0.14); --light-teal: rgba(34,176,189,0.14);

  --focus-ring: 0 0 0 3px rgba(34,176,189,0.4);
  --shadow-card: 0 40px 90px -40px rgba(0,0,0,0.8);
}

/* ══ Semantic roles — LIGHT, via system preference (only when no explicit dark choice) ══ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-primary: var(--p-bg-light);
    --bg-secondary: var(--p-bg2-light);
    --bg-elevated: var(--p-card-light);
    --label-primary: var(--p-ink-light);
    --label-secondary: var(--p-ink2-light);
    --label-tertiary: var(--p-ink3-light);
    --separator: rgba(0,0,0,0.08);
    --separator-strong: rgba(0,0,0,0.14);

    --brand: var(--p-teal); --brand-light: var(--p-tint-light); --brand-mid: var(--p-teal-text-light); --brand-dark: var(--p-teal-text2-light);
    --blush: rgba(239,95,107,0.12);
    --teal: var(--brand); --teal-light: var(--brand-light); --teal-mid: var(--brand-mid); --teal-bright: var(--brand); --rumbl-teal: var(--brand-mid);
    --color-tint: var(--brand); --color-tint-strong: var(--brand-mid);

    --warning-bg: #FFF8E6; --warning-border: var(--p-amber-300); --warning-text: var(--p-amber-800); --warning-icon: var(--p-amber-600);
    --success-bg: #EAF6EE; --success-border: var(--p-green-500); --success-text: var(--p-green-700); --success-icon: var(--p-green-600);
    --insight: var(--brand-mid); --insight-mid: var(--brand-dark); --insight-light: rgba(34,176,189,0.1); --insight-border: rgba(34,176,189,0.3);
    --entry-bg: var(--p-tint-light); --entry-sensitive-bg: #FFF8E6;

    --soft-pink: rgba(239,95,107,0.1); --light-teal: var(--p-tint-light);

    --focus-ring: 0 0 0 3px rgba(34,176,189,0.35);
    --shadow-card: 0 20px 48px -24px rgba(15,45,45,0.18);
  }
}

/* ══ Semantic roles — LIGHT, explicit manual override ══ */
:root[data-theme="light"] {
  --bg-primary: var(--p-bg-light);
  --bg-secondary: var(--p-bg2-light);
  --bg-elevated: var(--p-card-light);
  --label-primary: var(--p-ink-light);
  --label-secondary: var(--p-ink2-light);
  --label-tertiary: var(--p-ink3-light);
  --separator: rgba(0,0,0,0.08);
  --separator-strong: rgba(0,0,0,0.14);

  --brand: var(--p-teal); --brand-light: var(--p-tint-light); --brand-mid: var(--p-teal-text-light); --brand-dark: var(--p-teal-text2-light);
  --blush: rgba(239,95,107,0.12);
  --teal: var(--brand); --teal-light: var(--brand-light); --teal-mid: var(--brand-mid); --teal-bright: var(--brand); --rumbl-teal: var(--brand-mid);
  --color-tint: var(--brand); --color-tint-strong: var(--brand-mid);

  --warning-bg: #FFF8E6; --warning-border: var(--p-amber-300); --warning-text: var(--p-amber-800); --warning-icon: var(--p-amber-600);
  --success-bg: #EAF6EE; --success-border: var(--p-green-500); --success-text: var(--p-green-700); --success-icon: var(--p-green-600);
  --insight: var(--brand-mid); --insight-mid: var(--brand-dark); --insight-light: rgba(34,176,189,0.1); --insight-border: rgba(34,176,189,0.3);
  --entry-bg: var(--p-tint-light); --entry-sensitive-bg: #FFF8E6;

  --soft-pink: rgba(239,95,107,0.1); --light-teal: var(--p-tint-light);

  --focus-ring: 0 0 0 3px rgba(34,176,189,0.35);
  --shadow-card: 0 20px 48px -24px rgba(15,45,45,0.18);
}

/* ══ Semantic roles — DARK, explicit manual override (identical to bare :root; wins over an OS light preference) ══ */
:root[data-theme="dark"] {
  --bg-primary: var(--p-bg);
  --bg-secondary: var(--p-bg2);
  --bg-elevated: var(--p-card);
  --label-primary: var(--p-ink1);
  --label-secondary: var(--p-ink2);
  --label-tertiary: var(--p-ink3);
  --separator: rgba(255,255,255,0.08);
  --separator-strong: rgba(255,255,255,0.14);

  --brand: var(--p-teal); --brand-light: rgba(34,176,189,0.16); --brand-mid: var(--p-teal-text-dark); --brand-dark: var(--p-teal-text2-dark);
  --blush: rgba(239,95,107,0.16);
  --teal: var(--brand); --teal-light: var(--brand-light); --teal-mid: var(--brand-mid); --teal-bright: var(--brand); --rumbl-teal: var(--brand-mid);
  --color-tint: var(--brand); --color-tint-strong: var(--brand-mid);

  --warning-bg: #2A2000; --warning-border: var(--p-amber-800); --warning-text: var(--p-amber-300); --warning-icon: var(--p-amber-300);
  --success-bg: var(--p-green-900); --success-border: #2D6B3A; --success-text: var(--p-green-300); --success-icon: var(--p-green-300);
  --insight: var(--brand-mid); --insight-mid: var(--brand-dark); --insight-light: rgba(34,176,189,0.16); --insight-border: rgba(34,176,189,0.35);
  --entry-bg: rgba(34,176,189,0.14); --entry-sensitive-bg: rgba(200,144,10,0.16);

  --soft-pink: rgba(239,95,107,0.14); --light-teal: rgba(34,176,189,0.14);

  --focus-ring: 0 0 0 3px rgba(34,176,189,0.4);
  --shadow-card: 0 40px 90px -40px rgba(0,0,0,0.8);
}

/* Re-derive legacy aliases whenever semantic roles change theme */
:root, :root[data-theme] {
  --surface-0: var(--bg-primary);
  --surface-1: var(--bg-secondary);
  --surface-2: var(--bg-elevated);
  --text-primary: var(--label-primary);
  --text-secondary: var(--label-secondary);
  --text-muted: var(--label-tertiary);
  --border: var(--separator);
  --border-strong: var(--separator-strong);
  --danger: var(--p-coral);
}

/* ── Global a11y: visible focus ring (redesign spec: solid outline, not a box-shadow halo) ── */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}