/* =============================================================
   Brookville Protocol™ Consulting — Course 1A
   design-tokens.css
   The single source of truth for color, type, spacing, and motion.
   No selectors here other than :root. Other CSS files consume these.
   ============================================================= */

:root {
  /* ---------- Brand colors ---------- */
  --bpc-color-navy: #0A0F2C;
  --bpc-color-navy-darker: #060A1E;
  --bpc-color-navy-soft: #11183A;

  --bpc-color-gold: #D4AF37;
  --bpc-color-gold-muted: rgba(212, 175, 55, 0.35);
  --bpc-color-gold-hairline: rgba(212, 175, 55, 0.55);

  --bpc-color-ivory: #F8F5EF;
  --bpc-color-ivory-surface: #FBF8F1;
  --bpc-color-beige: #F3EDE3;
  --bpc-color-beige-surface: #EFE6D8;

  --bpc-color-text: #3C3C3C;
  --bpc-color-text-muted: #6F6A63;

  /* Brand rule: no learner-facing text uses pure white. The light-text
     standard is Ivory (--bpc-color-ivory: #F8F5EF). For new styles
     prefer --bpc-color-ivory directly. The legacy --bpc-color-white
     token is kept ONLY because it is part of the public token surface
     and may be referenced by future or external code; it is repointed
     to ivory so any accidental use cannot break the brand rule. Pure
     white (#FFFFFF) must only appear inline in CSS for non-text
     technical purposes (e.g. transparent overlays, border highlights,
     or browser fallbacks) and never as text color. */
  --bpc-color-white: var(--bpc-color-ivory);

  --bpc-color-border-soft: rgba(10, 15, 44, 0.12);
  --bpc-color-border-on-navy: rgba(248, 245, 239, 0.18);

  /* ---------- States ---------- */
  --bpc-color-success: #2F6B4F;
  --bpc-color-warning: #B07C2C;
  --bpc-color-error: #8B2A2A;
  --bpc-color-focus: #D4AF37;

  /* ---------- Typography stacks ---------- */
  --bpc-font-heading: "Cinzel", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --bpc-font-display: "Cormorant Garamond", "Cinzel", Georgia, "Times New Roman", serif;
  --bpc-font-body: "Merriweather", Georgia, "Times New Roman", serif;
  --bpc-font-ui: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Type scale ---------- */
  --bpc-text-xs: 0.75rem;
  --bpc-text-sm: 0.875rem;
  --bpc-text-base: 1rem;
  --bpc-text-md: 1.125rem;
  --bpc-text-lg: 1.25rem;
  --bpc-text-xl: 1.5rem;
  --bpc-text-2xl: 2rem;
  --bpc-text-3xl: 2.5rem;
  --bpc-text-display: clamp(2.5rem, 5vw, 4.5rem);

  /* ---------- Line heights ---------- */
  --bpc-leading-tight: 1.1;
  --bpc-leading-heading: 1.2;
  --bpc-leading-body: 1.65;
  --bpc-leading-ui: 1.4;

  /* ---------- Letter spacing ---------- */
  --bpc-tracking-label: 0.12em;
  --bpc-tracking-heading: 0.02em;
  --bpc-tracking-normal: 0;

  /* ---------- Spacing scale ---------- */
  --bpc-space-1: 0.25rem;
  --bpc-space-2: 0.5rem;
  --bpc-space-3: 0.75rem;
  --bpc-space-4: 1rem;
  --bpc-space-5: 1.25rem;
  --bpc-space-6: 1.5rem;
  --bpc-space-8: 2rem;
  --bpc-space-10: 2.5rem;
  --bpc-space-12: 3rem;
  --bpc-space-16: 4rem;
  --bpc-space-20: 5rem;

  /* ---------- Layout widths ---------- */
  --bpc-container-width: 1180px;
  --bpc-reading-width: 760px;
  --bpc-narrow-width: 620px;
  --bpc-wide-width: 1320px;

  /* ---------- Radius (restrained) ---------- */
  --bpc-radius-sm: 4px;
  --bpc-radius-md: 8px;
  --bpc-radius-lg: 12px;

  /* ---------- Shadows (subtle only) ---------- */
  --bpc-shadow-soft: 0 16px 40px rgba(10, 15, 44, 0.08);
  --bpc-shadow-panel: 0 8px 24px rgba(10, 15, 44, 0.06);

  /* ---------- Motion ---------- */
  --bpc-transition-fast: 160ms ease;
  --bpc-transition-base: 240ms ease;
  --bpc-transition-slow: 360ms ease;

  /* ---------- Breakpoints (reference values) ---------- */
  --bpc-breakpoint-mobile: 480px;
  --bpc-breakpoint-tablet: 768px;
  --bpc-breakpoint-desktop: 1024px;
  --bpc-breakpoint-wide: 1320px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bpc-transition-fast: 0ms;
    --bpc-transition-base: 0ms;
    --bpc-transition-slow: 0ms;
  }
}