/* ==========================================================================
   Pediment Mindworks — Design Tokens
   Navy / Blue / Gold brand palette (Section 2 of PMW_SITE_SPEC.md)
   ========================================================================== */

:root {
  /* ---- Brand core ---- */
  --navy: #0D183D;
  --void-navy: #050A16;
  --void-navy-raised: #0A1226;
  --medium-blue: #2A5C9E;
  --steel-blue: #5C7FAE;
  --pale-blue: #AFC6E6;
  --light-gray: #E6EBF2;
  --bone: #FCFBF8;
  --bone-warm: #FBF7F0;
  --gold: #F59E0B;

  /* ---- Category accents (7 solution lines) ---- */
  --accent-leadership: #2A5C9E;   /* Medium Blue */
  --accent-strategy: #00BC8C;     /* Teal */
  --accent-content: #22C55E;      /* Emerald */
  --accent-performance: #F59E0B;  /* Gold */
  --accent-delivery: #8B5CF6;     /* Purple */
  --accent-evaluation: #4F46E5;   /* Indigo */
  --accent-change: #F97316;       /* Orange */

  /* ---- Semantic surface roles ---- */
  --color-bg: var(--bone);
  --color-surface: #FFFFFF;
  --color-surface-tint: var(--light-gray);
  --color-surface-warm: color-mix(in oklab, var(--bone-warm) 94%, var(--gold) 6%);
  --color-surface-pale: var(--pale-blue);
  --color-surface-dark: var(--navy);
  --color-surface-void: var(--void-navy);
  --color-border: color-mix(in oklab, var(--pale-blue) 55%, white);
  --color-border-on-dark: color-mix(in oklab, var(--steel-blue) 55%, transparent);
  --color-border-on-void: color-mix(in oklab, var(--medium-blue) 45%, transparent);

  /* ---- Text roles ---- */
  --color-text: var(--navy);
  --color-text-muted: #4A5875;
  --color-text-faint: var(--steel-blue);
  --color-text-inverse: var(--bone);
  --color-text-inverse-muted: var(--pale-blue);

  /* ---- Interactive ---- */
  --color-link: var(--medium-blue);
  --color-link-hover: var(--navy);
  --color-cta-bg: var(--navy);
  --color-cta-text: var(--bone);
  --color-cta-hover: #162a5c;
  --color-highlight: var(--gold);

  /* ---- Radius ---- */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;

  /* ---- Type scale (fluid clamp) — pushed for sculptural, confident display sizes ---- */
  --text-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --text-2xl: clamp(2.1rem, 1.5rem + 2.6vw, 3.75rem);
  --text-3xl: clamp(2.75rem, 1.3rem + 5vw, 5.25rem);
  --text-hero: clamp(2.35rem, 1.05rem + 3.6vw, 4.1rem);
  --text-hero-long: clamp(2rem, 0.95rem + 2.6vw, 3.35rem);
  --text-weight-thin: 300;

  /* ---- Spacing (4px base) ---- */
  --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;

  /* ---- Content widths ---- */
  --content-narrow: 42rem;
  --content-default: 64rem;
  --content-wide: 78rem;

  /* ---- Fonts ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* ---- Motion ---- */
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-reveal: 720ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-drift: 22s cubic-bezier(0.37, 0, 0.63, 1);

  /* ---- Shadows: intentionally minimal — hairline borders over shadows ---- */
  --shadow-sm: 0 1px 2px rgba(13, 24, 61, 0.04);
  --shadow-md: 0 2px 8px rgba(13, 24, 61, 0.05);
  --shadow-void: 0 24px 64px rgba(0, 0, 0, 0.45);
}