/**
 * ADF Design Tokens
 *
 * The single source of truth for the site's visual language.
 * Change a value here and it cascades to every page, every component.
 *
 * Organization:
 *   1. Color palette (brand colors, neutral tones)
 *   2. Typography (font stacks, sizes, weights, line heights)
 *   3. Spacing (a consistent rhythm)
 *   4. Layout (container widths, breakpoints, z-indexes)
 *   5. Motion (transitions, easings)
 *
 * Naming convention:
 *   --category-role-variant
 *   e.g., --color-brand-primary, --space-section-y, --font-heading-size-lg
 */

:root {

  /* ========================================
     COLOR PALETTE
     ======================================== */

  /* Brand — gold. The accent color. Action and emphasis. */
  --color-gold: #B8860B;
  --color-gold-light: #cf9a14;
  --color-gold-soft: #d4a84a;

  /* Brand — espresso. The dark. Headers, footers, hero backgrounds. */
  --color-espresso: #2A2420;
  --color-espresso-lift: #3a322c;

  /* Brand — cream. The warm light. Section backgrounds. */
  --color-cream: #f7f2e8;
  --color-cream-deep: #ede4d0;

  /* Technical accent — slate. Only for infographic annotations. */
  --color-slate: #4A5568;
  --color-slate-soft: #7d8797;

  /* Text */
  --color-text: #2a2a2a;
  --color-text-muted: #6b6b6b;
  --color-text-inverse: rgba(255, 255, 255, 0.92);
  --color-text-inverse-muted: rgba(255, 255, 255, 0.7);

  /* UI */
  --color-border: #e2dccf;
  --color-border-inverse: rgba(255, 255, 255, 0.08);

  /* ========================================
     TYPOGRAPHY
     ======================================== */

  /* Font stacks. Display uses Fraunces (loaded via link tag in head).
     Body uses system sans — fast, familiar, no font loading cost. */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Type scale — a consistent set of sizes across the site.
     Display sizes use clamp() for fluid scaling between mobile and desktop. */
  --font-size-xs: 0.72rem;
  --font-size-sm: 0.85rem;
  --font-size-base: 1rem;
  --font-size-md: 1.05rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.3rem;
  --font-size-2xl: clamp(1.6rem, 2.4vw, 2.1rem);
  --font-size-3xl: clamp(1.9rem, 3.2vw, 2.75rem);
  --font-size-hero: clamp(2.4rem, 4.6vw, 4rem);

  /* Line heights */
  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* Letter spacing */
  --letter-spacing-tight: -0.005em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.5px;
  --letter-spacing-wider: 1.5px;
  --letter-spacing-widest: 2.2px;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ========================================
     SPACING
     ======================================== */

  /* A consistent rhythm. Use these instead of arbitrary pixel values. */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-28: 7rem;     /* 112px */

  /* Section padding — the y-axis rhythm between major page sections */
  --space-section-y: var(--space-28);
  --space-section-x: var(--space-12);
  --space-section-y-mobile: var(--space-20);
  --space-section-x-mobile: var(--space-6);

  /* ========================================
     LAYOUT
     ======================================== */

  --layout-max-width: 1400px;
  --layout-content-width: 1200px;
  --layout-text-width: 720px;
  --layout-narrow-width: 860px;

  /* Breakpoints — used in @media rules (CSS vars can't be used in media queries directly,
     so these are here for documentation. Actual values repeated in rules below.)
     --breakpoint-mobile: 640px
     --breakpoint-tablet: 900px
     --breakpoint-desktop: 1024px
  */

  /* Z-index stack */
  --z-base: 1;
  --z-content: 10;
  --z-dropdown: 50;
  --z-mobile-menu: 99;
  --z-overlay: 100;
  --z-toast: 200;

  /* ========================================
     MOTION
     ======================================== */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Standard transitions */
  --transition-color: color var(--duration-fast) var(--ease-in-out);
  --transition-bg: background-color var(--duration-fast) var(--ease-in-out);
  --transition-all: all var(--duration-fast) var(--ease-in-out);

  /* ========================================
     SHADOWS
     ======================================== */

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.25);
  --shadow-inset-dark: inset 0 -1px 0 rgba(0, 0, 0, 0.2);

  /* ========================================
     RADIUS
     ======================================== */

  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;

}

/**
 * Reduced motion — respects user preference.
 * Any user with "prefers reduced motion" in their OS gets instant transitions.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-normal: 0.01ms;
    --duration-slow: 0.01ms;
  }
}