/*
 * Mandate Design Tokens
 * Single source of truth for colors, spacing, typography, radii, and shadows.
 */

:root {
  /* ─── Body palette (warm white — the default) ─── */
  --color-body:                #F9F9F7;
  --color-surface-light:       #FFFFFF;
  --color-text-on-light:       #111111;
  --color-text-muted-on-light: #5A5A5A;
  --color-border-light:        #E8E6E3;

  /* ─── Legacy light surface aliases (kept for FAQ, callouts) ─── */
  --color-bg:              #F9F9F7;
  --color-surface:         #FFFFFF;
  --color-text:            #111111;
  --color-text-muted:      #5A5A5A;
  --color-text-subtle:     #6B6B6B;
  --color-border:          #E8E6E3;
  --color-border-strong:   #D4D0CB;

  /* ─── Primary accent: Navy (structural — labels, nav, dark buttons) ─── */
  --color-accent:          #2E3A59;
  --color-accent-hover:    #3D4F7A;
  --color-accent-subtle:   #E8EBF3;
  --color-accent-on:       #FFFFFF;

  /* ─── Emerald: bright accent for dark surfaces & primary CTAs ─── */
  --color-emerald:         #10B981;
  --color-emerald-hover:   #059669;
  --color-emerald-on:      #FFFFFF;
  --color-emerald-subtle:  rgba(16, 185, 129, 0.12);

  /* ─── Secondary: Muted Indigo ─── */
  --color-secondary:       #3730A3;
  --color-secondary-hover: #4338CA;
  --color-secondary-subtle:#EEF2FF;
  --color-secondary-on:    #FFFFFF;

  /* ─── Dark section palette — navy, used for exactly two intentional dark sections per page ─── */
  --color-dark-bg:         #2E3A59;
  --color-dark-bg-alt:     #1E2A42;
  --color-dark-surface:    #1E2A42;
  --color-dark-card:       rgba(255, 255, 255, 0.06);
  --color-dark-card-hover: rgba(255, 255, 255, 0.10);
  --color-dark-border:     rgba(255, 255, 255, 0.12);
  --color-dark-border-strong: rgba(255, 255, 255, 0.22);
  --color-dark-text:       #F1F5F9;
  --color-dark-text-muted: #94A3B8;
  --color-dark-text-subtle:#64748B;

  /* ─── Functional: policy decision outcomes ─── */
  --color-allowed:         rgba(16, 185, 129, 0.12);
  --color-allowed-text:    #34D399;
  --color-warned:          rgba(245, 158, 11, 0.12);
  --color-warned-text:     #FCD34D;
  --color-blocked:         rgba(239, 68, 68, 0.12);
  --color-blocked-text:    #F87171;
  --color-redacted:        rgba(148, 163, 184, 0.12);
  --color-redacted-text:   #94A3B8;

  /* ─── Typography ─── */
  --font-display: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  clamp(2.5rem, 4vw + 1rem, 4rem);
  --text-hero: clamp(2.75rem, 5vw + 1rem, 4.5rem);

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.03em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ─── Spacing (8px base grid) ─── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ─── Layout ─── */
  --width-prose:   42rem;
  --width-content: 64rem;
  --width-wide:    80rem;

  /* ─── Radii ─── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ─── Shadows ─── */
  --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.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:   0 20px 25px rgba(0,0,0,0.1),  0 10px 10px rgba(0,0,0,0.04);
  --shadow-dark: 0 4px 24px rgba(0,0,0,0.4);

  /* ─── Transitions ─── */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
}