/* ═══════════════════════════════════════════════════════════════
   PRAS Field — Design Tokens
   ───────────────────────────────────────────────────────────────
   Single source of truth for colors, typography, spacing, and
   touch-target sizes. Every other CSS file imports this first.
   Every hex value in the app should live here — a grep for
   "#[0-9a-fA-F]" against non-token CSS/JS should return zero.
   See: plan Part 4 "UI/UX Audit + Recommendations"
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ══════════ Color ══════════════════════════════════════════ */

  /* Brand */
  --color-gold:        #C9A84C;
  --color-gold-light:  #E8C97A;
  --color-gold-hover:  #D4B657;
  --color-gold-dark:   #A68A3E;
  --color-gold-bg:     #FBF6EA;  /* tint for callouts */
  --color-teal:        #1A8A7A;  /* FGR accent / secondary actions */
  --color-teal-dark:   #14716A;
  --color-navy:        #0D0D0A;  /* darkest surface — email header / navbar */

  /* Neutral scale (9 steps, warm-neutral to match gold brand) */
  --color-0:    #FFFFFF;   /* pure white — inputs, cards on tinted bg */
  --color-50:   #F9F7F2;   /* page background (lightest) */
  --color-100:  #F5F3EE;   /* surface — cards, nav-light */
  --color-200:  #E5E2DA;   /* borders, dividers */
  --color-300:  #CCCBC8;   /* heavier borders, disabled bg */
  --color-400:  #9F9A90;   /* placeholder text, icons */
  --color-500:  #6B6966;   /* legacy muted — below AA on light bg; use 600 instead */
  --color-600:  #57544F;   /* muted text (WCAG AA: 4.6:1 on color-50) */
  --color-700:  #2E2C27;   /* body text on light bg */
  --color-900:  #0D0D0A;   /* strongest text, dark surface */

  /* Semantic (tuned to gold theme — NOT bootstrap palette) */
  --color-success:      #1D9E75;
  --color-success-bg:   #E8F0E3;
  --color-success-fg:   #3B5228;
  --color-warning:      #D4A82C;
  --color-warning-bg:   #FBF1D6;
  --color-warning-fg:   #7A5410;
  --color-danger:       #E25555;
  --color-danger-bg:    #F4DCD9;
  --color-danger-fg:    #8B2A20;
  --color-info:         #2A7F8B;
  --color-info-bg:      #E0EBED;
  --color-info-fg:      #1F4C56;

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

  --font-display: 'Cinzel', 'Times New Roman', serif;              /* reserved — proposal + marketing H1 */
  --font-header:  'Barlow Condensed', system-ui, sans-serif;       /* app headings, buttons, section titles */
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif; /* default body */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;       /* proposal numbers, codes */

  /* Type scale — 7 sizes, no exceptions */
  --text-xs:    0.75rem;    /* 12px — metadata, timestamps, badges */
  --text-sm:    0.875rem;   /* 14px — small body, form hints */
  --text-base:  1rem;       /* 16px — default body, inputs */
  --text-lg:    1.125rem;   /* 18px — lead paragraph, large body */
  --text-xl:    1.375rem;   /* 22px — h3 / card titles */
  --text-2xl:   1.75rem;    /* 28px — h2 / section headings */
  --text-3xl:   2.25rem;    /* 36px — h1 / page titles */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.2;
  --line-height-snug:    1.35;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;

  /* ══════════ Spacing (4px base) ═════════════════════════════ */

  --space-0:  0;
  --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 */
  --space-16: 4rem;       /* 64px */

  /* ══════════ Touch targets (field-use, glove-friendly) ═════ */

  --touch-min:  44px;     /* Apple HIG minimum */
  --touch-pref: 48px;     /* Android Material + glove-friendly — use this as default */
  --touch-lg:   56px;     /* primary CTAs, wizard "Next" buttons */

  /* ══════════ Layout ═════════════════════════════════════════ */

  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 9999px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-focus: 0 0 0 3px rgba(201, 168, 76, 0.3);

  --border-width: 1px;
  --border-color: var(--color-200);
  --border-color-strong: var(--color-300);

  /* ══════════ Motion ═════════════════════════════════════════ */

  --transition-fast: 120ms ease-out;
  --transition:      200ms ease-out;
  --transition-slow: 320ms ease-out;

  /* ══════════ Z-index scale ══════════════════════════════════ */

  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  900;
  --z-modal:   1000;
  --z-toast:   1100;

  /* ══════════ App shell dimensions ═══════════════════════════ */

  --header-height:     60px;
  --sidebar-width:    260px;
  --sidebar-width-collapsed: 72px;
  --bottom-nav-height: 64px;

  /* ══════════ Legacy aliases ═════════════════════════════════
     Keep the original variable names working while we migrate —
     every old selector continues to render. Remove these once
     every usage is mapped to the new token scale. */

  --black:     var(--color-900);
  --gold:      var(--color-gold);
  --gold-light:var(--color-gold-light);
  --gold-bg:   var(--color-gold-bg);
  --teal:      var(--color-teal);
  --green:     var(--color-success);
  --red:       var(--color-danger);
  --surface:   var(--color-100);
  --border:    var(--color-300);
  --muted:     var(--color-600);      /* UPGRADED from #6B6966 to meet WCAG AA */
  --body-text: var(--color-700);
  --page-bg:   var(--color-50);
  --white:     var(--color-0);
}

/* ═══════════════════════════════════════════════════════════════
   Breakpoints (for reference — CSS custom props don't work inside
   @media queries, so keep breakpoints documented here and used as
   literal values):

   480px  — small phone (iPhone SE)
   640px  — large phone / phablet
   768px  — tablet portrait
   1024px — tablet landscape / small desktop
   1280px — desktop
   ═══════════════════════════════════════════════════════════════ */