/* ══════════════════════════════════════════════════════════════════════════
   Metapher design tokens — shared with Magpiie.

   One source of truth for colour across the site. Before this file, the same
   concepts were declared independently in seven stylesheets and had drifted:
   --grad existed in three different forms, --rose was both #C46F6E and
   #DB6F6E, and --hi was #ffffff in some files and #E8E3F0 in others. Page
   stylesheets should read these variables rather than redeclaring them.

   Loaded first in inc/head.blade.php so every later sheet inherits it.

   ── One deliberate deviation from the Magpiie spec ──
   textMuted ships as #5C5669 in Magpiie. On these surfaces that measures
   2.51–2.82:1, below the 4.5:1 WCAG AA floor for body text, and it was the
   main cause of paragraph copy reading as washed out. It is lightened here
   to #9990A8 (5.5–6.5:1). Every other token is exactly as specified.
   ══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Brand purple ─────────────────────────────────────────────────────── */
  --primary:      #8B74C7;   /* dark-mode primary  */
  --primary-50:   #F1EFF7;
  --primary-100:  #F2F0F5;
  --primary-200:  #E5DFEF;
  --primary-300:  #5A4876;   /* dark-tuned */
  --primary-400:  #A695C2;
  --primary-500:  #7F6AA0;
  --primary-600:  #6750A4;   /* light-mode primary */
  --primary-700:  #594B71;
  --primary-800:  #3F3452;
  --primary-900:  #2D2040;

  /* ── Accents ──────────────────────────────────────────────────────────── */
  --coral:        #DB6F6E;
  --coral-600:    #C55B5A;
  --gold:         #FEB943;
  --blue:         #2A78EE;

  /* ── Semantic ─────────────────────────────────────────────────────────── */
  --error:        #F03F3F;
  --success:      #22C55E;
  --warning:      #FEB943;

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --background:   #0B0A11;   /* page ground; matches theme-color */
  --surface:      #121019;
  --surface-2:    #0F0D16;   /* main content area */
  --surface-3:    #0A0910;   /* sidebar / top bar */
  --surface-elev: #1A1724;   /* cards */

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text-primary:   #E8E3F0;
  --text-secondary: #8E879A;
  --text-muted:     #9990A8;  /* see note above: Magpiie ships #5C5669 */

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --border:        #262236;
  --border-strong: #30293F;

  /* ── Nav & misc ───────────────────────────────────────────────────────── */
  --nav-active-bg:   #3A2D5E;
  --nav-active-text: #E8E3F0;
  --nav-hover:       #1E1A2A;
  --draft-chip-bg:   #261F3A;
  --draft-chip-text: #B5A6D6;
  --scroll-thumb:    #3A3449;

  /* ── Gradients ────────────────────────────────────────────────────────── */
  --gradient-brand: linear-gradient(135deg, #DB6F6E 0%, #A66089 50%, #6750A4 100%);
  --gradient-play:  linear-gradient(rgb(215,111,112) 16%, rgb(127,106,160) 100%);
  --gradient-c:     linear-gradient(rgb(219,111,110) 0%, rgb(247,186,41) 100%);


  /* ══════════════════════════════════════════════════════════════════════
     Typography
     ══════════════════════════════════════════════════════════════════════ */

  --font-sans: 'Urbanist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale. Each step pairs a size with its line height; tracking and
     weight are applied by the .t-* helper classes at the end of this file. */
  --text-display:    48px;  --leading-display:    1.1;
  --text-h1:         32px;  --leading-h1:         40px;
  --text-h2:         24px;  --leading-h2:         32px;
  --text-h3:         18px;  --leading-h3:         26px;
  --text-h4:         14px;  --leading-h4:         20px;
  --text-body-lg:    16px;  --leading-body-lg:    24px;
  --text-body:       14px;  --leading-body:       20px;
  --text-body-sm:    13px;  --leading-body-sm:    18px;
  --text-caption:    11px;  --leading-caption:    14px;
  --text-overline:   12px;  --leading-overline:   16px;

  /* Plain ramp, for sizes that are not a semantic step. */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  40px;

  --tracking-display:  -0.03em;
  --tracking-h1:       -0.02em;
  --tracking-h2:       -0.015em;
  --tracking-h3:       -0.01em;
  --tracking-overline: 0.08em;


  /* ══════════════════════════════════════════════════════════════════════
     Radius, spacing, shadows
     ══════════════════════════════════════════════════════════════════════ */

  --radius-btn:   8px;
  --radius-input: 9px;
  --radius-card:  10px;
  --radius-panel: 12px;
  --radius-modal: 16px;
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-full:  9999px;

  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  --shadow-card:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-panel: 0 4px 20px rgba(127,106,160,0.12);  /* purple-tinted */
  --shadow-modal: -4px 0 24px rgba(0,0,0,0.10);
  --shadow-sm:    0 2px 6px rgba(0,0,0,0.1);
  --shadow-md:    0 8px 20px rgba(0,0,0,0.15);
  --shadow-lg:    0 15px 40px rgba(0,0,0,0.25);


  /* ══════════════════════════════════════════════════════════════════════
     Legacy aliases.

     The page stylesheets and Blade partials reference an older, shorter set
     of names. Rather than rewrite several thousand call sites, those names
     are kept here as aliases onto the tokens above — so the values are
     unified now, and individual sheets can migrate to the canonical names
     over time without a flag day.
     ══════════════════════════════════════════════════════════════════════ */

  /* surfaces */
  --bg:          var(--background);
  --bg-base:     var(--background);
  --surf:        var(--surface);
  --bg-surface:  var(--surface);
  --raised:      var(--surface-elev);
  --bg-raised:   var(--surface-elev);
  --card:        var(--surface-elev);
  --bg-card:     var(--surface-elev);

  /* text */
  --hi:       var(--text-primary);
  --text-hi:  var(--text-primary);
  --md:       var(--text-secondary);
  --text-md:  var(--text-secondary);
  --lo:       var(--text-muted);
  --text-lo:  var(--text-muted);

  /* borders */
  --bdr:      var(--border);
  --bdh:      var(--border-strong);
  --border-h: var(--border-strong);

  /* brand */
  --purple:   var(--primary);
  --rose:     var(--coral);
  --green:    var(--success);
  --grad:     var(--gradient-brand);
}

/* ══════════════════════════════════════════════════════════════════════════
   Type scale helpers.

   Opt-in classes, so existing type is untouched until a block is migrated.
   Each applies its step's size, line height, tracking and weight together —
   the four travel as a set, and applying size alone is what makes a scale
   drift back into ad-hoc values.
   ══════════════════════════════════════════════════════════════════════════ */
.t-display  { font-size: var(--text-display);  line-height: var(--leading-display);  letter-spacing: var(--tracking-display);  font-weight: 900; }
.t-h1       { font-size: var(--text-h1);       line-height: var(--leading-h1);       letter-spacing: var(--tracking-h1);       font-weight: 700; }
.t-h2       { font-size: var(--text-h2);       line-height: var(--leading-h2);       letter-spacing: var(--tracking-h2);       font-weight: 600; }
.t-h3       { font-size: var(--text-h3);       line-height: var(--leading-h3);       letter-spacing: var(--tracking-h3);       font-weight: 600; }
.t-h4       { font-size: var(--text-h4);       line-height: var(--leading-h4);       font-weight: 500; }
.t-body-lg  { font-size: var(--text-body-lg);  line-height: var(--leading-body-lg); }
.t-body     { font-size: var(--text-body);     line-height: var(--leading-body); }
.t-body-sm  { font-size: var(--text-body-sm);  line-height: var(--leading-body-sm); }
.t-caption  { font-size: var(--text-caption);  line-height: var(--leading-caption); }
.t-overline { font-size: var(--text-overline); line-height: var(--leading-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; }

/* Visible to screen readers only. Bootstrap ships an equivalent, but defining
   it here means the utility survives if bootstrap is ever dropped. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The brand gradient's signature sweep. Any element using --gradient-brand as
   a background can opt in with `animation: gradientSweep 6s ease-in-out infinite`
   plus a background-size larger than the element. */
@keyframes gradientSweep {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}