/* ============================================================================
 * GENERATED FILE — DO NOT EDIT.
 * Source of truth: client/styles/tokens.css
 * Regenerate with: npm run sync:tokens   (runs automatically in prebuild:frontend)
 * Drift is caught by: npm run check:tokens  and  tests/tokens-sync.test.js
 * ============================================================================ */
/* canonical source: client/styles/tokens.css — copy this file to client/public/css/tokens.css when updating tokens.
   Run `npm run sync:tokens` (or `prebuild:frontend` already calls it) to keep public copy in sync. */
/**
 * Prime Self Design System — Unified Design Tokens
 * ==================================================
 * tokens.css — SINGLE SOURCE OF TRUTH for all CSS custom properties.
 *
 * Replaces design-tokens.css + design-tokens-premium.css (both now deprecated).
 * Load only this file: <link rel="stylesheet" href="css/tokens.css">
 *
 * Resolution precedence (higher = wins):
 *   1. tokens.css (this file) — final resolved values, no conflicts possible
 *   2. app.css / component files — may use var() references to tokens here
 *
 * WCAG AA: all text tokens pass ≥4.5:1 on the canonical dark background (#05091a / --bg).
 * ==================================================
 */

:root {

  /* ═══════════════════════════════════════════════════════════
     COLOR PALETTE — Foundation Colors
     ══════════════════════════════════════════════════════════ */

  /* — Neutrals: Dark Theme Scale — */
  --color-neutral-50:  #f8f7fa;
  --color-neutral-100: #e8e6f0;
  --color-neutral-200: #d0cde0;
  --color-neutral-300: #b8b4d0;
  --color-neutral-400: #a8a2c0;   /* WCAG AA on dark backgrounds */
  --color-neutral-500: #8882a0;
  --color-neutral-600: #6a6580;
  --color-neutral-700: #4a4560;
  --color-neutral-800: #1a2d4a;
  --color-neutral-850: #111d38;
  --color-neutral-900: #0b1226;
  --color-neutral-950: #05091a;

  /* — Premium Neutrals (Apple / Porsche palette) — DEPRECATED for surfaces.
     Do not introduce new background usage; the navy cosmos scale above is
     canonical (resonance plan B3). Kept for legacy consumers only. — */
  --color-black:      #000000;
  --color-near-black: #0a0a0a;
  --color-charcoal:   #1c1c1e;
  --color-graphite:   #2c2c2e;
  --color-snow:       #f2f2f7;
  --color-white:      #ffffff;

  /* — Depth & Dimension — */

  /* — Primary: Gold — */
  --color-gold-200: #fae6af;
  --color-gold-300: #f7d887;
  --color-gold-400: #f0ca65;
  --color-gold-500: #c9a84c;   /* THE gold — canonical interactive colour */
  --color-gold-600: #a88840;
  --color-gold-700: #7a6030;
  --color-gold-800: #5a4824;
  --color-gold-900: #3a3018;

  /* — Accent: Blue (trust) — */
  --color-blue-300: #a8c8fc;
  --color-blue-700: #2a5fc8;
  --color-blue-800: #1a4aaa;

  /* — Accent 2: Emerald (growth) — */
  --color-teal-300: #5ee8b4;
  --color-teal-400: #22c78e;
  --color-teal-800: #085c40;

  /* — Porsche Signature Red — */
  --color-porsche-red:       #d5001c;

  /* — Diary / Journal Pink — */
  --color-diary: #E056A0;   /* diary event dot colour in calendar (hot pink) */

  /* — Rose/Mauve Feminine Variants — */

  /* — Atmosphere Brand Variants — surface-tint text colors for shell theming
     ONLY; interactive accents MUST use --gold / --color-gold-500. The unused
     Atelier/Atmosphere gold/blue/pink/teal alternates were removed in the
     2026-07-11 CSS dead-rule diet (zero var() consumers repo-wide). */
  --color-text-warm-body: #fff0e3;     /* Atelier text: Body */
  --color-text-warm-soft: #f6e6d7;     /* Atelier text: Soft */

  /* Semantic Palette Colors — */
  --color-success-500: #50c878;
  --color-success: #30d158;        /* Apple green (premium alias) */

  --color-error-500: #e05050;
  --color-error: #ff453a;          /* Apple red (premium alias) */

  --color-warning-700: #a16207;
  --color-warning: #ff9f0a;        /* Apple orange (premium alias) */

  --color-info: #0a84ff;           /* Apple blue (premium alias) */


  /* — Forge Role Colors — */
  --color-forge-power: #f08080;     /* Light coral for power role badges */
  --color-forge-craft: #80e0a0;     /* Light green for craft role badges */
  --color-red-bright: #ff6b6b;       /* Bright red for borders */
  --color-teal-bright: #4ecdc4;     /* Bright teal for borders */

  /* — Composition Segment Colors — */
  --color-success-light: #60d888;    /* Light green for composition segments */
  --color-purple-composition: #6a4fc8; /* Purple for composition Guide */
  --color-teal-composition: #4fc8c8;  /* Teal for composition Mirror */
  --color-teal-light: #80e0e0;       /* Light cyan for mirrors role */

  /* — Living Shell ambient tokens — */
  --ps-transit-wash:     transparent;  /* Updated by living-shell.js per transit circuit */
  --ps-night-bg:         #030610;      /* Dreams porte — deepened background              */
  --ps-underlay-opacity: 0.03;         /* Dormant ambient underlay opacity                */

  /* — Diary / Streak / Mood semantic colors — */
  --color-streak-flame:  #ff7c3c;    /* Streak counter flame icon (orange-red) */
  --color-mood-great:    #8ed081;    /* Mood: great — soft green */
  --color-mood-neutral:  #8a7e99;    /* Mood: neutral — muted purple */
  --color-mood-challenging: #f0a87c; /* Mood: challenging — peach-orange */
  --color-mood-difficult:   #f28b82; /* Mood: difficult — soft red */

  /* — Additional Neutrals — */
  --color-canvas-base: #07070b;      /* Deep canvas — email-prefs standalone page background */

  /* — UI Element Colors — */
  --color-gray-text: #3c4043;        /* Google-style text color */
  --color-gray-border: #dadce0;      /* Light gray border */
  --color-dark-ink: #0b1225;         /* Deep dark ink for light-mode text */

  /* — Light-theme semantic surface/semantic text colors — */
  --color-bg-light:        #faf7f2;  /* Light theme warm cream background */
  --color-error-light-bg:  #d42426;  /* Light theme form error text */
  --color-danger-material: #f44336;  /* Material danger button background */
  --color-info-text:       #1565c0;  /* Light theme info alert text */
  --color-success-text:    #388e3c;  /* Light theme success alert text */
  --color-error-text:      #c62828;  /* Light theme error alert text */

  /* — Status chip / tone colors — */
  --color-status-active-text: #4ade80;  /* Active status chip text (emerald) */
  --color-status-error-text:  #f87171;  /* Lapsed/error status chip text */
  --color-tone-success:       #8ed081;  /* Assessment success tone text */
  --color-tone-error:         #f28b82;  /* Assessment error/warning tone text */

  /* — Social Media Brand Colors — */
  --color-social-facebook: #1877f2;
  --color-social-twitter:  #1da1f2;
  --color-social-linkedin: #0077b5;
  --color-social-whatsapp: #25d366;
  --color-social-reddit:   #ff4500;


  /* ═══════════════════════════════════════════════════════════
     SEMANTIC TOKENS — Backgrounds
     ══════════════════════════════════════════════════════════ */

  /* Canonical dark-mode backgrounds — ONE sky. The navy cosmos scale is
     canonical everywhere; the Apple/Porsche near-black scale is deprecated
     (gold reads as candlelight on blue-black, as fintech trim on graphite).
     Resonance plan PR-2/B3: --bg-primary must always equal --bg. */
  --bg-primary:   var(--color-neutral-950);  /* #05091a */
  --bg-secondary: var(--color-neutral-900);  /* #0b1226 */
  --bg-tertiary:  var(--color-neutral-850);  /* #111d38 */
  --bg-elevated:  rgba(17, 29, 56, 0.95);    /* neutral-850 @ .95 */
  --bg-glass:     rgba(11, 18, 38, 0.72);    /* neutral-900 @ .72 */
  --bg-overlay:   rgba(0, 0, 0, 0.8);


  /* ═══════════════════════════════════════════════════════════
     SEMANTIC TOKENS — Borders
     ══════════════════════════════════════════════════════════ */

  --border-subtle:   #3a3a3f;                /* increased lightness from --color-neutral-800 for form input visibility (GAP-003) */
  --border-default:  var(--color-neutral-800);
  --border-emphasis: var(--color-gold-700);
  --border-focus:    var(--color-gold-500);
  --border-secondary: rgba(255, 255, 255, 0.08);


  /* ═══════════════════════════════════════════════════════════
     SEMANTIC TOKENS — Text
     ══════════════════════════════════════════════════════════ */

  /* Canonical values — premium wins for primary/secondary/tertiary */
  --text-primary:   var(--color-white);               /* #ffffff */
  --text-secondary: rgba(255, 255, 255, 0.85);
  --text-tertiary:  rgba(255, 255, 255, 0.65); /* AA on elevated surfaces (was 0.55 — ~4.6:1 on card bg) */
  --text-inverse:   var(--color-neutral-950);
  --text-link:      var(--color-gold-400);
  --text-link-hover: var(--color-gold-300);


  /* ═══════════════════════════════════════════════════════════
     SEMANTIC TOKENS — Interactive
     ══════════════════════════════════════════════════════════ */

  --interactive-primary:        var(--color-gold-500);
  --interactive-primary-hover:  var(--color-gold-400);
  --interactive-primary-active: var(--color-gold-600);

  --interactive-secondary:        var(--color-neutral-850);
  --interactive-secondary-hover:  var(--color-neutral-800);
  --interactive-secondary-active: var(--color-neutral-700);


  /* ═══════════════════════════════════════════════════════════
     SEMANTIC TOKENS — Status
     ══════════════════════════════════════════════════════════ */

  --status-success: var(--color-success-500);
  --status-error:   var(--color-error-500);
  --status-warning: var(--color-gold-500);


  /* ═══════════════════════════════════════════════════════════
     SEMANTIC TOKENS — Alpha/Transparency Overlays
     NEW: Consolidates duplicate rgba() values from CSS files
     ══════════════════════════════════════════════════════════ */

  /* Background transparencies */
  --bg-cosmic:      #070a14;                    /* Deep cosmic base — premium nebula background */

  /* Error/Warning transparencies (semantic alerts) */
  --error-alpha-15: rgba(224, 80, 80, 0.15);    /* error backgrounds — used in login.css */

  /* Gold transparencies (accent overlays, borders, backgrounds) */
  --gold-alpha-06:  rgba(201, 168, 76, 0.06);
  --gold-alpha-08:  rgba(201, 168, 76, 0.08);
  --gold-alpha-10:  rgba(201, 168, 76, 0.10);
  --gold-alpha-12:  rgba(201, 168, 76, 0.12);
  --gold-alpha-15:  rgba(201, 168, 76, 0.15);
  --gold-alpha-22:  rgba(201, 168, 76, 0.22);
  --gold-alpha-25:  rgba(201, 168, 76, 0.25);
  --gold-alpha-30:  rgba(201, 168, 76, 0.30);
  --gold-alpha-35:  rgba(201, 168, 76, 0.35);
  --gold-alpha-50:  rgba(201, 168, 76, 0.50);
  --gold-alpha-55:  rgba(201, 168, 76, 0.55);

  /* Gold as light, not paint (resonance plan B4): display gold is a top-lit
     gradient (clip to text), and gold surfaces bloom instead of sitting flat. */
  --gold-luminous:   linear-gradient(135deg, var(--color-gold-200) 0%, var(--color-gold-400) 40%, var(--color-gold-500) 100%);
  --gold-bloom:      0 0 24px rgba(201, 168, 76, 0.35);
  --gold-bloom-soft: 0 0 14px rgba(201, 168, 76, 0.22);
  --gold-cta-fill:   linear-gradient(180deg, var(--color-gold-400) 0%, var(--color-gold-500) 100%);
  --gold-cta-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --text-cream:      #f6efdc;               /* warm cream for serif display text on cosmos */

  /* Neutral hover transparencies */
  --color-white-alpha-4:  rgba(255, 255, 255, 0.04); /* subtle input background */
  --color-white-alpha-6:  rgba(255, 255, 255, 0.06); /* dark theme neutral hover bg */
  --color-white-alpha-8:  rgba(255, 255, 255, 0.08); /* border-subtle */
  --color-white-alpha-10: rgba(255, 255, 255, 0.10); /* border */
  --color-black-alpha-6:  rgba(0, 0, 0, 0.06);       /* light theme neutral hover bg */
  --color-backdrop:       rgba(0, 0, 0, 0.60);        /* modal/overlay backdrop */
  --color-orange-alpha-12: rgba(255, 124, 60, 0.12); /* streak bar bg */
  --color-orange-alpha-15: rgba(255, 124, 60, 0.15); /* streak bar hover */


  /* ═══════════════════════════════════════════════════════════
     SHORTHAND ALIASES — App-wide single-letter tokens
     Used throughout app.css, components/, and inline styles.
     All map to tokens defined above.
     ══════════════════════════════════════════════════════════ */

  --bg:        var(--color-neutral-950);   /* #05091a */
  --bg2:       var(--color-neutral-900);   /* #0b1226 */
  --bg3:       var(--color-neutral-850);   /* #111d38 */
  --border:    #1d2f52;                    /* visible against bg3 */
  --gold:      var(--color-gold-500);      /* #c9a84c — THE gold */
  --gold-dim:  var(--color-gold-600);      /* #a88840 */
  --gold-text: var(--color-gold-500);      /* #c9a84c — accent text on dark surfaces; light theme overrides to a darker rose */
  --text:      #f0eff5;                    /* primary text (WCAG: >15:1 on --bg) — updated for GAP-003 */
  --text-strong: #f6efdc;                  /* strongest emphasis text (warm cream) on dark surfaces; light theme overrides to dark ink. Previously undefined → landing.css fell back to cream on the light theme (1.0:1, invisible). */
  --text-dim:  #d8d5e8;                    /* WCAG AA 6.8:1 on #05091a (was #c4c0d8 @ 5.5:1) — GAP-003 */
  --text-muted:#c0bbd4;                    /* WCAG AA ~6.2:1 on #05091a (raised from #b3aec8 @ 5.1:1) — GAP-003 */
  --text-dim-hc:      #e8e5f4;             /* prefers-contrast:more — >7:1 on #05091a */
  --text-muted-hc:    #ccc9e0;             /* prefers-contrast:more — ~5.5:1 on #05091a */
  --border-subtle-hc: #5a5a6f;             /* prefers-contrast:more — higher contrast border */
  --accent:    #5b8af0;                    /* trust-blue accent */
  --accent2:   var(--color-teal-400);      /* #22c78e */
  --red:       var(--color-error-500);     /* #e05050 */
  --green:     var(--color-success-500);   /* #50c878 */
  --radius:    var(--radius-xl);           /* 16px */
  --shadow:    0 4px 24px rgba(0,0,0,0.5);


  /* ═══════════════════════════════════════════════════════════
     COMPATIBILITY ALIASES — undefined-token rescue (GAP: theme-break)
     Many components reference token namespaces that were never defined
     (--color-surface, --color-bg-2, --color-text-1, --ps-color-*, …).
     With no definition they fell back to inline literals — most damaging,
     `var(--color-surface, #fff)` rendered OPAQUE WHITE in dark mode, so the
     onboarding dialog and checkout card showed cream text on near-white
     (the P1 "free-chart result unreadable" blocker).

     Every alias below points at a canonical token that ALREADY flips between
     dark `:root` and `html[data-theme="light"]`. Because var() resolves at the
     use-site, defining them once here makes them theme-correct in BOTH modes —
     no per-selector light overrides required.
     ══════════════════════════════════════════════════════════ */

  /* ── Surfaces (background) ─────────────────────────────────── */
  --surface:                 var(--bg2);
  --surface-1:               var(--bg2);
  --surface-2:               var(--bg3);
  --surface-3:               var(--bg3);
  --surface-primary:         var(--bg2);
  --surface-secondary:       var(--bg3);
  --surface-hover:           var(--bg3);
  --surface-overlay:         var(--bg-elevated);
  --color-surface:           var(--bg2);
  --color-surface-1:         var(--bg2);
  --color-surface-2:         var(--bg3);
  --color-surface-3:         var(--bg3);
  --color-surface-hover:     var(--bg3);
  --color-bg:                var(--bg);
  --color-bg-1:              var(--bg2);
  --color-bg-2:              var(--bg3);
  --bg4:                     var(--bg);
  --bg-raised:               var(--bg-elevated);
  --ps-color-surface:        var(--bg2);
  --ps-color-surface-raised: var(--bg-elevated);
  --ps-color-background:     var(--bg);
  --ps-bg2:                  var(--bg2);
  --ps-bg3:                  var(--bg3);

  /* ── Text ──────────────────────────────────────────────────── */
  --color-text:              var(--text);
  --color-text-1:            var(--text);
  --color-text-primary:      var(--text);
  --color-text-strong:       var(--text);
  --text-bright:             var(--text);
  --color-text-2:            var(--text-dim);
  --color-text-secondary:    var(--text-dim);
  --color-text-3:            var(--text-muted);
  --color-text-muted:        var(--text-muted);
  --color-text-tertiary:     var(--text-muted);
  --ps-color-text:           var(--text);
  --ps-color-text-primary:   var(--text);
  --ps-color-text-secondary: var(--text-dim);
  --ps-color-text-muted:     var(--text-muted);
  --ps-text-dim:             var(--text-dim);
  --ps-text-muted:           var(--text-muted);

  /* ── Borders ───────────────────────────────────────────────── */
  --color-border:            var(--border);
  --border-hover:            var(--border-emphasis);
  --ps-border:               var(--border);
  --ps-color-border:         var(--border);

  /* ── Accents / interactive ─────────────────────────────────── */
  --color-primary:           var(--gold);
  --gold-hover:              var(--gold-dim);
  --ps-gold:                 var(--gold);
  --ps-color-primary:        var(--gold);
  --color-accent:            var(--accent);
  --ps-accent:               var(--accent);
  --ps-accent2:              var(--accent2);
  --ps-color-accent:         var(--accent);
  --color-link:              var(--text-link);
  --color-focus:             var(--gold);
  --color-focus-ring:        var(--gold);

  /* ── Semantic status ───────────────────────────────────────── */
  --color-danger:            var(--status-error);
  --ps-color-danger:         var(--status-error);
  --ps-red:                  var(--status-error);
  --error:                   var(--status-error);
  --error-light:             var(--status-error);
  --color-red-400:           var(--status-error);
  --color-red-700:           var(--status-error);
  --color-red-900:           var(--status-error);
  --error-bg:                var(--error-alpha-15);
  --success:                 var(--status-success);
  --success-bg:              rgba(80, 200, 120, 0.15);
  --warning:                 var(--status-warning);
  --warning-bg:              var(--gold-alpha-15);
  --ps-color-warning:        var(--status-warning);
  --color-warning-100:       var(--status-warning);
  --color-error-400:         var(--status-error);
  --color-white-alpha-14:    rgba(255, 255, 255, 0.14);

  /* ── Geometry / type (ps- + alt scales) ────────────────────── */
  --ps-radius-sm:            var(--radius-sm);
  --ps-radius-lg:            var(--radius-lg);
  --radius-pill:             9999px;
  --ps-space-2:              var(--space-2);
  --ps-space-4:              var(--space-4);
  --ps-space-5:              var(--space-5);
  --ps-font-mono:            var(--font-mono);
  --type-xs:                 var(--text-xs);
  --type-sm:                 var(--text-sm);
  --z-banner:                var(--z-header);
  /* --z-toast is defined authoritatively in the Z-Index Stack block below. */


  /* ═══════════════════════════════════════════════════════════
     TYPOGRAPHY
     ══════════════════════════════════════════════════════════ */

  /* Font Families */
  --font-sans:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', 'Monaco', monospace;
  --font-serif:   'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-display: 'Instrument Serif', Georgia, 'Palatino Linotype', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
                  'Segoe UI', system-ui, sans-serif;

  /* Font Sizes — fluid clamp scale (responsive, WCAG-friendly) */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);  /* 12–13px */
  --text-sm:   clamp(0.8rem,  0.75rem + 0.25vw, 0.875rem);  /* 13–14px */
  --text-base: clamp(0.9rem,  0.85rem + 0.25vw, 1rem);      /* 14–16px */
  --text-md:   1.063rem;                                      /* 17px — Apple body */
  --text-lg:   clamp(1rem,    0.95rem + 0.25vw, 1.125rem);  /* 16–18px */
  --text-xl:   clamp(1.125rem, 1rem  + 0.5vw,  1.25rem);   /* 18–20px */
  --text-2xl:  clamp(1.125rem, 0.99rem + 0.675vw, 1.35rem);  /* 18–21.6px (–10% for data density) */
  --text-3xl:  clamp(1.35rem,  1.17rem + 0.9vw,  1.6875rem); /* 21.6–27px (–10%) */
  --text-4xl:  clamp(1.6875rem,1.35rem + 1.35vw, 2.025rem);  /* 27–32.4px (–10%) */

  /* Font Weights */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  /* Premium aliases */
  --weight-regular:  400;
  --weight-semibold: 600;

  /* Line Heights */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Letter Spacing */
  --tracking-tight:   0;
  --tracking-wide:    0.025em;
  --tracking-widest:  0.1em;


  /* ═══════════════════════════════════════════════════════════
     SPACING — 4px base unit
     ══════════════════════════════════════════════════════════ */

  --space-px:  1px;
  --space-0-5: 0.125rem;   /* 2px */
  --space-1:   0.25rem;    /* 4px */
  --space-2:   0.5rem;     /* 8px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */

  /* Semantic Spacing Aliases (easier to read in code) */
  --space-xs:   var(--space-1);     /* 4px — micro spacing */
  --space-sm:   var(--space-2);     /* 8px — small padding */
  --space-md:   var(--space-3);     /* 12px — medium */
  --space-lg:   var(--space-4);     /* 16px — large */
  --space-2xl:  var(--space-6);     /* 24px — 2x large */


  /* ═══════════════════════════════════════════════════════════
     BORDERS
     ══════════════════════════════════════════════════════════ */

  /* Border Width Scale */
  --border-width-thin:   1px;

  /* Border Radius — px values (premium precision) */
  /* Already defined below, but referenced here for organization */


  /* ═══════════════════════════════════════════════════════════
     LAYOUT
     ══════════════════════════════════════════════════════════ */

  --container-lg: 1024px;

  /* Layout primitive tokens (consumed by styles/layout.css — #948 item 5).
     Breakpoint ladder (media queries can't var(): documented constants):
       768px tablet rail · 1024px desktop multi-column · 1280px wide caps */
  --measure: 68ch;               /* prose measure — long-form reading width */
  --container-content: 880px;    /* single-column content pages */
  --container-page: 1100px;      /* multi-column page compositions */
  --container-wide: 1280px;      /* card grids / dashboards (.ps-page--wide) */
  --layout-gap: var(--space-6);  /* column gap between layout tracks */
  --layout-aside-w: 340px;       /* default aside track width */

  /* Responsive Breakpoints (only --bp-lg is consumed via var()) */
  --bp-lg: 768px;    /* tablet / sidebar threshold */

  /* Z-Index Stack */
  --z-sticky:          20;
  --z-header:          100;  /* sticky site header, above sidebar (95) */
  --z-dropdown:        140;  /* menus/popups descending from header/nav */
  --z-modal-backdrop:  200;
  --z-modal:           210;
  --z-tooltip:         300;
  --z-notification:    400;  /* fixed notification bell (top-right chrome) */
  --z-notification-panel: 410; /* dropdown panel from the bell, just above it */
  --z-toast:           420;  /* transient toasts: above the bell + its panel, below the onboarding tour */
  --z-onboarding:      500;  /* guided/first-run tour: above the bell so tour controls are never covered */


  /* ═══════════════════════════════════════════════════════════
     BORDERS & RADII
     ══════════════════════════════════════════════════════════ */

  /* Radii — px values (premium precision) */
  /* IMPROVEMENT: Increased for softer, more feminine curves */
  --radius-sm:   6px;      /* was 4px */
  --radius-md:   10px;     /* was 8px */
  --radius-lg:   14px;     /* was 12px */
  --radius-xl:   18px;     /* was 16px */
  --radius-full: 9999px;
  --radius-control: var(--radius-md);
  --radius-panel:   var(--radius-xl);
  --radius-pill:    var(--radius-full);
  --radius-orbit:   var(--radius-full);

  --border-width-thin:   1px;
  --border-width-medium: 2px;


  /* ═══════════════════════════════════════════════════════════
     SHADOWS & ELEVATION
     ══════════════════════════════════════════════════════════ */

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.2),
               0 1px 2px 0 rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.25),
               0 2px 4px -1px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
               0 4px 6px -2px rgba(0, 0, 0, 0.15);
  --shadow-overlay: 0 4px 20px rgba(0, 0, 0, 0.45); /* floating elements: toast, popover */
  --shadow-card:    0 4px 20px rgba(0, 0, 0, 0.15); /* light-theme card elevation */
  --shadow-tooltip: 0 2px 8px  rgba(0, 0, 0, 0.35);  /* tooltip, small floating UI */
  --shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.25); /* gate tooltip, popovers */

  --shadow-focus:       0 0 0 3px rgba(201, 168, 76, 0.3);
  --shadow-focus-error: 0 0 0 3px rgba(224, 80, 80, 0.3);

  /* Glow Effects */
  --glow-red:  0 0 20px rgba(213, 0, 28, 0.4);
  --glow-gold: 0 0 20px rgba(212, 175, 55, 0.3);


  /* ═══════════════════════════════════════════════════════════
     BLUR & EFFECTS
     ══════════════════════════════════════════════════════════ */

  /* --blur-sm/md/lg/xl were defined but never referenced; removed in the
     dead-code audit. --backdrop-blur-md remains (it is consumed). */
  --backdrop-blur-md: blur(12px) saturate(180%);


  /* ═══════════════════════════════════════════════════════════
     TRANSITIONS & ANIMATIONS
     ══════════════════════════════════════════════════════════ */

  --duration-fast:    200ms;    /* was 150ms — softer motion */
  --duration-normal:  280ms;    /* was 200ms — silkier feel */
  --duration-slow:    400ms;    /* was 300ms — more delicate */
  --duration-slower:  600ms;    /* was 500ms */

  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* IMPROVEMENT: Added silk easing for femininity */
  --ease-silk:   cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* smooth, flowing easing */

  /* ─── Semantic motion vocabulary (Track 7.1) ─────────────────
     Use these named tokens over ad-hoc durations. Each maps a
     motion INTENT (precise / calm / lift) to a specific curve.
     See docs/MOTION_LANGUAGE.md for when to use each. */
  --motion-precise: 180ms cubic-bezier(0.16, 1, 0.3, 1);  /* keyboard, hover, state changes — confident, snap */
  --motion-calm:    240ms cubic-bezier(0, 0, 0.2, 1);     /* navigation, reveals — smooth, unhurried */
  --motion-lift:    120ms cubic-bezier(0.4, 0, 0.2, 1);   /* buttons, chips — quick acknowledgement */
  /* Slice 5 motion pass: arrival/reveal + state-change live within a < 1s accent
     budget (ARTIFACT_THEATRE_SPEC). Reveal is the canonical card/panel entrance. */
  --motion-reveal:  400ms cubic-bezier(0.25, 0.46, 0.45, 0.94); /* content arrival — restrained, silk */
  --motion-state:   200ms cubic-bezier(0.16, 1, 0.3, 1);        /* a state badge flips (viewed/failed/consent) */

  --transition-colors:    color var(--duration-normal) var(--ease-in-out),
                          background-color var(--duration-normal) var(--ease-in-out),
                          border-color var(--duration-normal) var(--ease-in-out);
  --transition-all:       all var(--duration-normal) var(--ease-in-out);


  /* ═══════════════════════════════════════════════════════════
     GRADIENTS
     ══════════════════════════════════════════════════════════ */

  --gradient-mesh:
    radial-gradient(at 0% 0%,   rgba(213, 0, 28, 0.1)  0%, transparent 50%),
    radial-gradient(at 100% 0%, rgba(212, 175, 55, 0.08) 0%, transparent 50%),
    radial-gradient(at 100% 100%, rgba(10, 132, 255, 0.06) 0%, transparent 50%);

  /* --gradient-accent-glow, --gradient-gold-glow and --gradient-surface were
     defined but never referenced; removed in the dead-code audit. */


  /* ═══════════════════════════════════════════════════════════
     REMAINING OPACITY VARIANTS
     ══════════════════════════════════════════════════════════ */

  /* High Contrast/Accessibility */

  /* Accent color scales (blue spectrum) */
  --accent-bright:      #78b8ff;  /* Bright sky blue — used as ps-shell-accent-2 fallback */


  /* ═══════════════════════════════════════════════════════════
     COMPONENT TOKENS
     ══════════════════════════════════════════════════════════ */

  /* Forms */
  --input-height-sm: 2rem;
  --input-height-md: 2.5rem;
  --input-height-lg: 3rem;
  --input-padding-x: var(--space-3);
  --input-padding-y: var(--space-2);

  /* Buttons */
  --button-height-sm: 2rem;
  --button-height-md: 2.5rem;
  --button-height-lg: 3rem;

  /* Touch Targets (WCAG AA minimum) */
  --touch-target-min: 44px;

  /* Header */

  /* Cards */
  --card-radius:  var(--radius-lg);

  /* Mobile Layout */
  --mobile-padding: var(--space-4);        /* 16px */
  --mobile-nav-height: 64px;

  /* Sidebar */
  --sidebar-collapsed-width: 64px;

  /* Modals — --modal-sm/md/lg were defined but never referenced; removed. */

  /* ── Atmosphere base tokens (single source of truth — moved from components.css) */
  --atm-accent:         var(--gold, var(--color-gold-500));
  --atm-text-body:      var(--color-text-warm-body);
  --atm-text-soft:      var(--color-text-warm-soft);
  --atm-panel:          rgba(16, 20, 48, 0.78);
  --atm-panel-elevated: rgba(21, 28, 62, 0.92);
}

/* ── Energy Type accent colours ────────────────────────────────────────────
   Each HD type has a distinct accent for type-badges, reveal ceremonies,
   and type-specific card gradients. Override in html[data-theme="light"].
   ────────────────────────────────────────────────────────────────────── */
:root {
  --type-builder:           #8bc34a;   /* Generator — green vitality      */
  --type-builder-initiator: #4caf93;   /* Mani Generator — teal momentum  */
  --type-guide:             #5b8af0;   /* Projector — trust blue          */
  --type-catalyst:          #e57474;   /* Manifestor — bold coral         */
  --type-mirror:            #9c7bd4;   /* Reflector — soft violet         */
}

/* The `--ps-shell-*` migration-alias block ("safe no-op until referenced")
   sat here unreferenced since introduction and was removed in the 2026-07-11
   CSS dead-rule diet, along with every other zero-consumer token. */


/* ═══════════════════════════════════════════════════════════
   LIGHT THEME — warm celestial parchment
   Activated by: data-theme="light" on <html> (JS toggle + localStorage)
   OR: system prefers-color-scheme: light (when no manual override)
   ══════════════════════════════════════════════════════════ */

html[data-theme="light"] {
  color-scheme: light;

  /* ── Backgrounds — warm parchment/celestial ─────────── */
  --bg-primary:   #faf7f2;   /* warm ivory */
  --bg-secondary: #f0ebe3;   /* parchment */
  --bg-tertiary:  #e6dfd5;   /* warm sand */
  --bg-elevated:  rgba(255, 255, 255, 0.95);
  --bg-glass:     rgba(250, 247, 242, 0.72);
  --bg-overlay:   rgba(0, 0, 0, 0.45);

  /* ── Borders ────────────────────────────────────────── */
  --border-subtle:    #ddd6ca;
  --border-default:   #c8bfb0;
  --border-emphasis:  var(--color-gold-600);
  --border-secondary: rgba(0, 0, 0, 0.06);

  /* ── Text ───────────────────────────────────────────── */
  --text-primary:    #1a1610;   /* warm near-black ink */
  --text-secondary:  rgba(26, 22, 16, 0.78);
  --text-tertiary:   rgba(26, 22, 16, 0.62);  /* AA on white (was 0.50 — ~3.5:1 fail) */
  --text-inverse:    var(--color-white);
  --text-link:       var(--color-gold-700);
  --text-link-hover: var(--color-gold-600);

  /* ── Interactive ────────────────────────────────────── */
  --interactive-primary:        var(--color-gold-600);
  --interactive-primary-hover:  var(--color-gold-700);
  --interactive-primary-active: var(--color-gold-800);
  --interactive-secondary:        #e6dfd5;
  --interactive-secondary-hover:  #ddd6ca;
  --interactive-secondary-active: #d2c9bb;

  /* ── Status (slightly deeper for light bg contrast) ── */
  --status-success: #15803d;
  --status-error:   #b91c1c;
  --status-warning: #a16207;

  /* ── Shorthand aliases ──────────────────────────────── */
  --bg:        #faf7f2;
  --bg2:       #f0ebe3;
  --bg3:       #e6dfd5;
  --border:    #c8bfb0;
  --gold:      var(--color-gold-600);
  --gold-dim:  var(--color-gold-700);
  --text:      #1a1610;
  --text-strong: #1a1610;   /* warm near-black ink — strongest emphasis on light surfaces */
  --text-dim:  #4a4035;
  --text-muted:#665d4f;     /* WCAG AA: was #7a7060 (3.7:1 on sand cards #e6dfd5 — fails). #665d4f = 4.9:1 on cards / 5.5:1 on parchment. */
  --accent:    #2a5fc8;
  --accent2:   #0d9060;
  --red:       #b91c1c;
  --green:     #15803d;
  --shadow:    0 4px 24px rgba(0, 0, 0, 0.08);

  /* ── Shadows — softer for light surfaces ────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 3px rgba(168, 136, 64, 0.25);

  /* ── Atmosphere / Shell overrides ───────────────────── */
  --atm-panel:         rgba(240, 235, 227, 0.85);
  --atm-panel-elevated:rgba(230, 223, 213, 0.92);
  --atm-text-body:     #2e2820;
  --atm-text-soft:     #5a5040;

  /* ── Sunrise: rose-gold accent replaces cosmic gold ─── */
  --gold:                   #c47a8a;   /* warm rose-gold — fills/borders/dark-text-on-gold */
  --gold-dim:               #a86073;
  /* --gold-text: AA-compliant rose for accent TEXT on light surfaces.
     #c47a8a is only ~2.7:1 on parchment (fails AA); this hits 4.7:1 on the
     darkest sand card (#e6dfd5) and 5.2–5.8:1 on parchment/ivory while
     keeping the rose-gold character. */
  --gold-text:              #934a5e;
  --gold-alpha-06:          rgba(196, 122, 138, 0.06);
  --gold-alpha-08:          rgba(196, 122, 138, 0.08);
  --gold-alpha-10:          rgba(196, 122, 138, 0.10);
  --gold-alpha-15:          rgba(196, 122, 138, 0.15);
  --gold-alpha-22:          rgba(196, 122, 138, 0.22);
  --gold-alpha-30:          rgba(196, 122, 138, 0.30);
  --gold-alpha-50:          rgba(196, 122, 138, 0.50);

  /* ── Sunrise type accent overrides ─────────────────── */
  --type-builder:           #5a9e2f;   /* deeper green for warm backgrounds */
  --type-builder-initiator: #2a8f72;
  --type-guide:             #3366cc;
  --type-catalyst:          #c0392b;
  --type-mirror:            #7b52b5;
}

/* System preference fallback — respects OS setting when user hasn't toggled */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
  }
}

/* NOTE: A third @media(prefers-color-scheme:light){:root{}} block that used
   color-white/color-snow values was removed here (P0-002). It had equal
   specificity to html[data-theme='light'] but loaded last, silently overriding
   the parchment theme with Apple white on system-light devices. The two blocks
   above (html[data-theme] + :root:not([data-theme])) cover all correct cases. */


/* ═══════════════════════════════════════════════════════════
   UTILITIES — Common Patterns
   ══════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.focus-visible-outline {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ═══════════════════════════════════════════════════════════
   SEMANTIC TYPOGRAPHY TOKENS — Track 7.2
   Maps the fluid type scale to semantic roles.
   Use these in components, not raw --text-* values.
   ══════════════════════════════════════════════════════════ */

:root {
  /* Semantic typography tokens — only the variants actually consumed remain.
     The display/title/heading/subheading/label/caption families plus every
     *-weight / *-leading sibling were defined here but never referenced via
     var() anywhere in client/** (CSS or JS); removed in the CSS dead-code
     audit. --type-body, --type-body-sm and --type-micro are kept because
     client/components/command-palette.css consumes them (with fallbacks). */

  /* Body copy */
  --type-body: var(--text-base);

  /* Secondary body (slightly smaller) */
  --type-body-sm: var(--text-sm);

  /* Micro / badge text */
  --type-micro: 0.6875rem;  /* 11px */

  /* Density-sensitive content spacing (standard values).
     Only --density-section-gap is consumed; the card-gap / inner-pad /
     list-gap / line-height siblings were unreferenced and removed. */
  --density-section-gap: var(--space-8);     /* 32px */

  /* DATA VISUALISATION TOKENS (Track 7.3) — the entire --viz-* family was
     defined but never referenced in client/**; removed in the dead-code audit. */
}

/* ──────────────────────────────────────────────────────────
   DENSITY OVERRIDES
   Applied by density-toggle.js via body[data-density].
   Only override the --density-* tokens; page code reads
   those tokens, not raw --space-* / --text-* values.
   ────────────────────────────────────────────────────────── */

/* Essential: tightest — scan-friendly, information-dense.
   Dead density siblings (card-gap/inner-pad/list-gap/line-height) and the
   --type-heading override (base var removed) were dropped in the dead-code audit. */
body[data-density='essential'] {
  --density-section-gap: var(--space-4);     /* 16px */

  --type-body:    var(--text-sm);            /* drop one size */
  --type-body-sm: var(--text-xs);
}

/* Standard (default) — no overrides; :root values apply */

/* Deep-dive: most spacious — reading / reflection mode.
   Dead density siblings and the --type-caption override (base var removed)
   were dropped in the dead-code audit. */
body[data-density='deep-dive'] {
  --density-section-gap: var(--space-12);    /* 48px */

  --type-body:    var(--text-md);            /* step up one */
  --type-body-sm: var(--text-base);
}

/* ── Navigation geometry ─────────────────────────────────────────────────────
 * --ps-nav-h is the intrinsic height of the bottom nav bar (excluding device
 * safe-area insets). All page padding-bottom calculations must use:
 *   calc(var(--ps-nav-h) + env(safe-area-inset-bottom, 0px) + <page-gap>)
 * so content is never hidden behind the nav on notched/gesture-bar devices.
 */
:root {
  --ps-nav-h: 56px;
}