/* tokens.css — the ONE source of truth for the design system.
   Brand pulled from the live marketing site https://staging.takeieltstest.com/
   (crimson #C41230 + slate navy #0f172a + Poppins). Every page loads this via app.css.

   Three groups below:
     1. Canonical staging tokens (--brand, --ink, --navy, radius/shadow scale).
     2. Remaps of the names test.html already used (--burgundy, --rose, --line...) to brand
        values, so the extracted flagship CSS flips to the brand without rewriting every ref.
     3. Aliases for the legacy app/css names (--brand-blue, --r-md, --text-primary...) so the
        five shared pages flip to the brand the moment they link app.css. */

:root {
  /* ---- 1. Canonical (staging) ---- */
  --brand:        #C41230;   /* crimson — primary action + accent */
  --brand-deep:   #A50E28;   /* hover / pressed */
  --brand-bright: #E40014;   /* destructive / emphasis */
  --brand-tint:   #FEF2F4;   /* faint crimson wash (icon chips, soft fills) */
  --brand-soft:   #FBE3E7;   /* light crimson surface */

  --navy:         #0F172A;   /* dark sections (the former maroon panel) + headings */
  --navy-soft:    #1E293B;

  --ink:          #0F172A;   /* primary text / headings */
  --ink-soft:     #334155;
  --muted:        #64748B;   /* secondary text */

  --surface:        #FFFFFF;
  --surface-muted:  #F8FAFC;
  --surface-sunken: #F1F5F9;
  --paper:          #FFFFFF;
  --border:         #E2E8F0;
  --border-strong:  #CBD5E1;
  --line:           #E2E8F0;

  --amber:#C98A1B; --amber-ink:#9a6a12; --amber-soft:#fff8ec;
  --success: #177A50;
  --warning: #D4A843;
  --danger:  #C41230;

  --font-ui:      "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Poppins", system-ui, -apple-system, sans-serif;
  --ui:      var(--font-ui);      /* test.html spelling */
  --display: var(--font-display); /* test.html spelling (was Fraunces serif) */

  --radius-sm:   8px;
  --radius:      12px;   /* buttons */
  --radius-lg:   16px;   /* cards / inputs */
  --radius-xl:   22px;
  --radius-pill: 999px;

  --ring: 0 0 0 3px rgba(196, 18, 48, .28);

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow:    0 8px 30px rgba(15, 23, 42, .08);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, .16);

  /* ---- 2. test.html names -> brand values ---- */
  --burgundy:      var(--brand);
  --burgundy-deep: var(--brand-deep);
  --rose:          #E0A3AD;   /* mid rose-crimson: waveform bars, timeline dots */
  --rose-soft:     var(--brand-soft);
  --rose-mist:     var(--brand-tint);
  --go:            var(--success);
  /* --ink / --line / --muted / --paper already brand values above */

  /* ---- 3. legacy app/css names -> brand values ---- */
  --brand-blue:   var(--brand);
  --brand-blue-2: var(--brand-deep);
  --brand-blue-3: var(--brand-bright);
  --brand-navy:   var(--navy);
  --brand-gold:   #D4A843;   /* kept: minor decorative accent on legacy pages */
  --brand-gold-2: #F4C969;

  --bg:            var(--surface);
  --bg-card:       var(--surface);
  --bg-glass:      rgba(255, 255, 255, .7);
  --bg-glass-deep: rgba(255, 255, 255, .85);
  --bg-tint:       var(--brand-tint);

  --text-primary:   var(--ink);
  --text-heading:   var(--navy);
  --text-secondary: var(--ink-soft);
  --text-muted:     var(--muted);
  --text-on-brand:  #FFFFFF;

  --success-light: #DCFCE7;
  --warning-light: #FEF3C7;
  --danger-light:  var(--brand-tint);

  --r-sm: var(--radius-sm);
  --r-md: var(--radius);
  --r-lg: var(--radius-lg);
  --r-xl: var(--radius-xl);
}