/* ==========================================================================
   Ethos Advocacy Institute — Design Tokens
   ========================================================================== */

:root {
  /* ---- Brand Color Palette (exact hex per BRAND_NOTES.md) ---- */
  --color-navy: #0a1d3d;
  --color-navy-light: #16305c;
  --color-navy-deep: #061428;
  --color-gold: #c9971a;
  --color-gold-hover: #b3830f;
  --color-gold-light: #e3bf63;
  --color-cream: #f9f6ef;
  --color-cream-dim: #f1ecdf;
  --color-stone: #6b6b6b;
  --color-stone-light: #9b9b9b;
  --color-white: #ffffff;

  /* ---- Semantic Roles ---- */
  --color-bg: var(--color-cream);
  --color-surface: var(--color-white);
  --color-surface-offset: var(--color-cream-dim);
  --color-border: oklch(from var(--color-navy) l c h / 0.14);
  --color-border-strong: oklch(from var(--color-navy) l c h / 0.24);
  --color-divider: oklch(from var(--color-gold) l c h / 0.45);

  --color-text: var(--color-navy);
  --color-text-muted: var(--color-stone);
  --color-text-faint: var(--color-stone-light);
  --color-text-inverse: var(--color-cream);

  --color-accent: var(--color-gold);
  --color-accent-hover: var(--color-gold-hover);

  --color-error: #8a2f2f;

  /* ---- Type Scale (fluid clamp) ---- */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);
  --text-hero: clamp(2.75rem, 1.4rem + 5vw, 6rem);

  /* ---- Spacing (4px system) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Radius ---- */
  --radius-sm: 0.1875rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.5rem;
  --radius-full: 9999px;

  /* ---- Shadows (navy-tinted) ---- */
  --shadow-sm: 0 1px 2px oklch(0.1 0.03 255 / 0.08);
  --shadow-md: 0 6px 20px oklch(0.1 0.03 255 / 0.1);
  --shadow-lg: 0 16px 40px oklch(0.1 0.03 255 / 0.14);

  /* ---- Content Widths ---- */
  --content-narrow: 640px;
  --content-prose: 720px;
  --content-default: 1080px;
  --content-wide: 1240px;
  --content-full: 100%;

  /* ---- Fonts ---- */
  --font-display: 'Cinzel', 'Times New Roman', serif;
  --font-serif-italic: 'EB Garamond', Georgia, serif;
  --font-body: 'EB Garamond', Georgia, serif;
  --font-ui: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* ---- Transitions ---- */
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Header height ---- */
  --header-height: 84px;
}