/* =================================================================
   PAES Practice · Palette tokens
   -------------------------------------------------------------------
   Per Production Bible Section 3.1. Every fill, stroke, text colour,
   and shadow uses tokens from this file. No raw hex codes elsewhere.
   The hex-audit CI gate enforces this on /content/scenes/*.json.

   Naming: --paes-<role>-<modifier>
   Roles : navy, cyan, gold, green, red, slate, paper
   Mods  : 50 / 100 / ... / 900 (Tailwind-style scale)
   ================================================================= */
:root {
  /* Brand navy — used for body backgrounds, dark UI surfaces */
  --paes-navy-50:   #f1f5fa;
  --paes-navy-100:  #d6e1ec;
  --paes-navy-200:  #aac0d8;
  --paes-navy-300:  #739bbe;
  --paes-navy-400:  #4577a0;
  --paes-navy-500:  #2a5680;
  --paes-navy-600:  #1d4068;
  --paes-navy-700:  #0a4d9b;     /* primary brand navy */
  --paes-navy-800:  #073876;
  --paes-navy-900:  #051f48;
  --paes-navy-950:  #051a2e;     /* deepest body bg */

  /* Cyan — interactive accent, focus states */
  --paes-cyan-50:   #e7f6fd;
  --paes-cyan-100:  #b6e3f8;
  --paes-cyan-300:  #5dbdf0;
  --paes-cyan-500:  #27a9e1;     /* primary cyan */
  --paes-cyan-600:  #1f8bb8;
  --paes-cyan-700:  #166f95;

  /* Gold — primary CTA + label outlines */
  --paes-gold-50:   #fff8e2;
  --paes-gold-100:  #ffe88a;
  --paes-gold-200:  #ffe08a;
  --paes-gold-300:  #ffd15c;     /* primary gold */
  --paes-gold-400:  #f5b73a;
  --paes-gold-500:  #d9a441;
  --paes-gold-700:  #a06818;
  --paes-gold-900:  #5a3018;

  /* Green — success, safe, complete */
  --paes-green-50:  #e9faf2;
  --paes-green-100: #b8eccd;
  --paes-green-300: #5dd8a0;     /* primary success */
  --paes-green-500: #1d8b5c;
  --paes-green-700: #0a5e3a;

  /* Red — error, hazard, stop */
  --paes-red-50:    #fdebec;
  --paes-red-100:   #f5b3b3;
  --paes-red-500:   #c83030;     /* primary danger */
  --paes-red-700:   #7a1818;

  /* Slate — neutrals, dividers */
  --paes-slate-50:  #f5f5f5;
  --paes-slate-100: #e8e8e8;
  --paes-slate-300: #aaaaaa;
  --paes-slate-500: #666666;
  --paes-slate-700: #3a3a3a;
  --paes-slate-900: #1a1a1a;

  /* Paper — warm white surfaces */
  --paes-paper:     #fff8ec;
  --paes-paper-2:   #f7f3ec;

  /* Semantic aliases */
  --paes-bg:           var(--paes-navy-950);
  --paes-bg-2:         var(--paes-navy-900);
  --paes-text:         #ffffff;
  --paes-text-muted:   rgba(255, 255, 255, 0.65);
  --paes-text-on-light: var(--paes-navy-900);
  --paes-line:         rgba(255, 255, 255, 0.08);
  --paes-cta:          var(--paes-gold-300);
  --paes-cta-hover:    var(--paes-gold-100);
  --paes-success:      var(--paes-green-300);
  --paes-danger:       var(--paes-red-500);
  --paes-info:         var(--paes-cyan-500);

  /* Per-tier accent — used by tier badges + flagship-only flourish */
  --paes-tier-1:       var(--paes-cyan-500);
  --paes-tier-2:       var(--paes-gold-300);
  --paes-tier-3:       var(--paes-green-300);

  /* Per-unit palettes — set on body via .unit-electrical etc. */
  --paes-unit-electrical: var(--paes-navy-800);
  --paes-unit-kitchen:    #5a3018;       /* warm oven brown */
  --paes-unit-foodservice: #6b4720;
  --paes-unit-housekeeping: var(--paes-cyan-700);
  --paes-unit-woodproject: var(--paes-gold-900);

  /* Label outline (universal) */
  --paes-label-stroke:   var(--paes-navy-950);
  --paes-label-fill:     var(--paes-gold-300);
  --paes-label-backplate: rgba(11, 17, 32, 0.85);

  /* Typography (Bible §3.2) */
  --paes-font-display: 'Work Sans', system-ui, sans-serif;
  --paes-font-body:    'Inter', system-ui, sans-serif;
  --paes-font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  --paes-fs-step:       30px;
  --paes-fs-prompt:     22px;
  --paes-fs-body:       15px;
  --paes-fs-meta:       12px;
  --paes-fs-eyebrow:    11px;

  /* Radii */
  --paes-r-sm:  6px;
  --paes-r-md:  12px;
  --paes-r-lg:  20px;

  /* Shadows */
  --paes-shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.20);
  --paes-shadow-md:  0 12px 28px rgba(0, 0, 0, 0.35);
  --paes-shadow-lg:  0 24px 60px rgba(0, 0, 0, 0.40);

  /* Animation */
  --paes-ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --paes-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* High-contrast override for IDD students. Bible §8.2 — colour is never
   the only signal; this preset doubles every token's contrast. */
html.paes-high-contrast {
  --paes-text-muted:   rgba(255, 255, 255, 0.92);
  --paes-line:         rgba(255, 255, 255, 0.32);
  --paes-label-backplate: rgba(0, 0, 0, 0.92);
}