/* ==========================================================================
   variables.css — design tokens
   Brand colours are fixed. Typography uses a system stack in Step 1;
   brand fonts can be added to assets/fonts/ and swapped in here in Step 2.
   ========================================================================== */

:root {
  /* Brand colours */
  --color-white: #FFFFFF;
  --color-charcoal: #2D2D2D;
  --color-orange: #F8B133;

  /* Neutrals derived from charcoal (used for text hierarchy and rules) */
  --color-ink: var(--color-charcoal);
  --color-ink-muted: #5E5E5E;
  --color-ink-soft: #707070;   /* ≥ 4.5:1 on white and on surface-alt (WCAG AA) */
  --color-rule: #E3E2DE;
  --color-surface: var(--color-white);
  --color-surface-alt: #F7F6F3;

  /* On-dark (closing slide) */
  --color-on-dark: var(--color-white);
  --color-on-dark-muted: #BDBDBD;
  --color-rule-dark: #4A4A4A;

  /* Placeholder component — deliberately neutral, distinct from imagery */
  --ph-bg: #ECEBE7;
  --ph-hatch: rgba(45, 45, 45, 0.05);
  --ph-border: #CFCDC6;
  --ph-text: #6B6B6B;
  --ph-text-strong: #3A3A3A;
  --ph-bg-dark: #383838;
  --ph-hatch-dark: rgba(255, 255, 255, 0.04);
  --ph-border-dark: #575757;
  --ph-text-dark: #A9A9A9;
  --ph-text-strong-dark: #E6E6E6;

  /* Typography */
  --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Fluid type — scales with both width and height so slides fit the screen */
  --fs-display: clamp(2.75rem, 3.2vw + 3.2vh + 0.5rem, 6.75rem);
  --fs-heading: clamp(1.6rem, 1.3vw + 1.7vh + 0.35rem, 3.25rem);
  --fs-subtitle: clamp(1rem, 0.45vw + 0.6vh + 0.6rem, 1.4rem);
  --fs-lead: clamp(0.98rem, 0.35vw + 0.5vh + 0.62rem, 1.25rem);
  --fs-body: clamp(0.875rem, 0.25vw + 0.45vh + 0.55rem, 1.075rem);
  --fs-small: clamp(0.78rem, 0.15vw + 0.3vh + 0.55rem, 0.9rem);
  --fs-eyebrow: clamp(0.7rem, 0.1vw + 0.2vh + 0.55rem, 0.8rem);

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.55;

  --tracking-eyebrow: 0.14em;
  --tracking-display: -0.02em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-fluid: clamp(0.75rem, 1.6vh + 0.5vw, 1.75rem);

  /* Deck chrome */
  --header-h: clamp(3.25rem, 7vh, 4.5rem);
  --footer-h: clamp(3.5rem, 8vh, 5rem);
  --gutter: clamp(1rem, 4.5vw, 5.5rem);
  --stage-pad-block: clamp(0.75rem, 3vh, 2.75rem);
  --column-gap: clamp(1.5rem, 4vw, 5rem);
  --media-gap: 4px;              /* seam between full-bleed images */
  --chrome-inset: var(--gutter);  /* header/footer align with the text margin */
  --chrome-bg: rgba(255, 255, 255, 0.94);
  --chrome-ink: var(--color-ink);

  /* Interaction */
  --touch-target: 3rem;
  --focus-ring: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-charcoal);
  --radius: 2px;

  /* Motion — restrained; disabled under prefers-reduced-motion */
  --duration-slide: 320ms;
  --ease-slide: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-slide: 0ms;
  }
}