/* ============================================================
   HidPid Design Tokens
   Theme: Purple-first dark/light hybrid — lavender cream light, near-black dark
   ============================================================ */

:root {
  /* --- Surface stack (light sections) --- */
  --bg-page:            #faf9fc;   /* warm lavender cream page background */
  --bg-section:         #f5f3f8;   /* slightly tinted section alternates */
  --bg-card:            #ffffff;   /* white card */
  --bg-card-elevated:   #f5f3f8;   /* slightly off-white elevated */
  --bg-input:           #ffffff;
  --bg-nav:             rgba(15,12,20,0.88); /* dark frosted nav */

  /* --- Dark surfaces (hero, footer, CTA sections) --- */
  --bg-dark:            #0f0c14;   /* near-black with purple undertone */
  --bg-dark-section:    #18141e;   /* dark section alternates */
  --bg-dark-card:       rgba(255,255,255,0.05); /* subtle card on dark */

  /* --- Borders --- */
  --border:             #ebe7f0;   /* warm lavender border */
  --border-hover:       #d9d3e0;   /* hovered border */
  --border-focus:       #9333ea;   /* brand purple */
  --border-subtle:      rgba(235,231,240,0.7);
  --border-dark:        rgba(255,255,255,0.08); /* borders on dark sections */

  /* --- Text (light sections) --- */
  --fg-heading:         #18141e;   /* near-black headings */
  --fg-body:            #4a4358;   /* warm dark body copy */
  --fg-secondary:       #8a8196;   /* secondary / meta text */
  --fg-muted:           #b0a8bc;   /* muted / placeholder */
  --fg-inverse:         #faf9fc;   /* for text on dark/purple backgrounds */

  /* --- Text (dark sections) --- */
  --fg-dark-heading:    #f5f0ff;
  --fg-dark-body:       #c4b8d4;
  --fg-dark-muted:      #8a7da0;

  /* --- Brand (primary purple) --- */
  --trust:              #9333ea;   /* brand-600 */
  --trust-hover:        #7e22ce;   /* brand-700 */
  --trust-deep:         #6b21a8;   /* brand-800 */
  --trust-muted:        rgba(147,51,234,0.08);
  --trust-glow:         rgba(147,51,234,0.15);

  /* --- Peach accent (upgrade CTAs) --- */
  --peach:              #ffa472;   /* peach-400 */
  --peach-hover:        #ff8b4d;   /* peach-500 */

  /* --- Status / integrity bands --- */
  --status-clean:       #16a34a;   /* green-600 */
  --status-clean-bg:    rgba(22,163,74,0.08);
  --status-moderate:    #d97706;   /* amber-600 */
  --status-moderate-bg: rgba(217,119,6,0.08);
  --status-high:        #dc2626;   /* red-600 */
  --status-high-bg:     rgba(220,38,38,0.08);
  --status-critical:    #dc2626;
  --status-critical-bg: rgba(220,38,38,0.12);

  /* --- Gradients --- */
  --gradient-hero:      radial-gradient(ellipse at 50% 0%, rgba(147,51,234,0.18) 0%, transparent 60%);
  --gradient-trust:     linear-gradient(135deg, #7e22ce 0%, #9333ea 100%);
  --gradient-section:   none;
  --gradient-card-top:  none;

  /* --- Border radius --- */
  --radius-xs:  3px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;

  /* --- Shadows --- */
  --shadow-card:        0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-card-hover:  0 2px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06), 0 0 0 1px rgba(147,51,234,0.08);
  --shadow-btn:         0 1px 2px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.15);

  /* --- Typography --- */
  --font-sans:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
  --font-display: 'Plus Jakarta Sans', sans-serif;

  /* --- Spacing scale (8px grid) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Nav height --- */
  --nav-height: 64px;
}