/* ============================================================
   PROPHACITE — DESIGN SYSTEM TOKENS
   Authority: CLAUDE.md §1 + PROPHACITE_DESIGN_README.md §1
   ============================================================ */

:root {
  /* ── Light section backgrounds ── */
  --bg-white: #FFFFFF;
  --bg-light: #F8F9FA;
  --bg-warm: #F4F2EE;

  /* ── Dark section core (radial gradient stops) ── */
  --bg-navy-core: #0B1D36;
  --bg-navy: #0C2844;
  --bg-navy-mid: #0C2844;
  --bg-navy-teal: #0D3555;
  --bg-navy-light: #0D3555;
  --bg-dark-teal: #0A4D5E;
  --bg-teal-deep: #0A4D5E;
  --bg-teal-edge: #088F8A;
  --bg-teal: #088F8A;

  /* Aliases used across pages */
  --navy: #0B1D36;
  --navy-mid: #0C2844;
  --navy-teal: #0D3555;
  --dark-teal: #0A4D5E;
  --teal-edge: #088F8A;

  /* ── Primary accents ── */
  --teal: #00C2B2;
  --teal-dark: #009E91;

  /* ── Gold variants (CLAUDE.md §1) ── */
  --gold: #D4AF37;           /* on dark backgrounds */
  --gold-warm: #DEB841;      /* on light/warm backgrounds */
  --gold-btn: #C9A84C;       /* default gold (nav wordmark, some buttons) */
  --gold-antique: #B8962E;   /* muted gold */
  --gold-bg: rgba(212, 175, 55, 0.12);
  --gold-border: rgba(212, 175, 55, 0.30);

  /* ── Text ── */
  --text-white: #FFFFFF;
  --text-white-muted: rgba(255, 255, 255, 0.45);
  --text-dark: #111827;
  --text-gray: #6B7280;
  --text-gray-light: #9BA3AE;

  /* ── Product card backgrounds (CLAUDE.md §1) ── */
  --card-prediligence: #2A1F3D;
  --card-das: #1B3D2F;
  --card-risk: #33201A;

  /* ── Product accent colors ── */
  --accent-prediligence: #A78BFA;
  --accent-das: #22C55E;
  --accent-risk: #EF4444;

  /* ── Signal / status colors (PROPHACITE_DESIGN_README.md §1) ── */
  --signal-critical: #EF4444;
  --signal-warning: #F97316;
  --signal-caution: #EAB308;
  --signal-moderate: #3B82F6;
  --signal-verified: #22C55E;

  /* ── Indicator icon colors (CLAUDE.md §1) ── */
  --indicator-check-bg: #2C6F38;
  --indicator-check-fg: #FFFFFF;
  --indicator-question-bg: #E6A323;
  --indicator-question-fg: #0E0200;
  --indicator-alert-bg: #B91B23;
  --indicator-alert-fg: #FFFFFF;

  /* ── Nav product dot colors ── */
  --dot-green: #2ECC71;
  --dot-purple: #A78BFA;
  --dot-red: #EF6B6B;

  /* ── Typography ── */
  --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Spacing (PROPHACITE_DESIGN_README.md §1) ── */
  --space-xs:  0.25rem;   /* 4px  */
  --space-sm:  0.5rem;    /* 8px  */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px */
  --space-5xl: 8rem;      /* 128px */

  /* ── Layout ── */
  --container-max:     1200px;
  --container-wide:    1360px;
  --container-narrow:  800px;
  --container-padding: 2rem;

  /* ── Border radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   14px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:        0 6px 20px rgba(0, 0, 0, 0.15);
  --shadow-xl:        0 12px 40px rgba(0, 0, 0, 0.2);
  --shadow-card-dark: 0 10px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-card-light: 0 4px 24px rgba(0, 0, 0, 0.12);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ================================================================
     ALIASES — shorthand names used across HTML files, mapped to
     canonical tokens above so every page resolves correctly.
     ================================================================ */

  /* Background aliases (no-prefix variants) */
  --navy-core:  #0B1D36;   /* = --bg-navy-core */
  --bg-lt:      #F8F9FA;   /* = --bg-light */
  --teal-deep:  #0A4D5E;   /* = --bg-teal-deep */

  /* Color shorthand */
  --white:      #FFFFFF;
  --dark:       #111827;   /* = --text-dark */
  --gray:       #6B7280;   /* = --text-gray */
  --gray-lt:    #9BA3AE;   /* = --text-gray-light */
  --green:      #22C55E;   /* = --accent-das */
  --red:        #EF4444;   /* = --accent-risk */
  --purple:     #A78BFA;   /* = --accent-prediligence */

  /* Extended gold */
  --gold-bdr:   rgba(212, 175, 55, 0.30);  /* = --gold-border */
  --gold-muted: #A08940;

  /* Product aliases */
  --purple-accent: #A78BFA;   /* = --accent-prediligence */
  --das-green:     #1B3D2F;   /* = --card-das (background, not accent) */
  --pd-plum:       #2A1F3D;   /* = --card-prediligence */
  --risk-umber:    #33201A;   /* = --card-risk */
  --card-bg:       #1B3D2F;   /* target-intelligence page card bg */
  --card-ft:       #152f24;   /* target-intelligence footer card bg */

  /* Flag / signal aliases */
  --flag-green:  #22C55E;   /* = --signal-verified */
  --flag-red:    #DC2626;   /* darker red used in flag cards */
  --flag-yellow: #EAB308;   /* = --signal-caution */

  /* Text aliases */
  --text-light:       rgba(255, 255, 255, 0.85);
  --text-muted:       #555555;
  --text-white-faint: rgba(255, 255, 255, 0.40);
  --text-dark-muted:  #555555;
  --text-dark-faint:  #888888;

  /* Font aliases */
  --fh:         'DM Sans', -apple-system, sans-serif;   /* = --font-heading */
  --fb:         'Open Sans', -apple-system, sans-serif; /* = --font-body */
  --font-mono:  'IBM Plex Mono', 'Courier New', monospace;

  /* Radius aliases */
  --r-sm:   4px;     /* = --radius-sm */
  --r-md:   8px;     /* = --radius-md */
  --r-lg:   12px;    /* = --radius-lg */
  --r-full: 9999px;  /* = --radius-full */

  /* White-opacity utilities (used as text/border colors on dark backgrounds) */
  --w20: rgba(255, 255, 255, 0.20);
  --w30: rgba(255, 255, 255, 0.30);
  --w35: rgba(255, 255, 255, 0.35);
  --w45: rgba(255, 255, 255, 0.45);
  --w50: rgba(255, 255, 255, 0.50);
  --w70: rgba(255, 255, 255, 0.70);
  --w85: rgba(255, 255, 255, 0.85);
}