/* Harv Agency — design tokens. See PRODUCT.md for the reasoning behind each role. */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-100_900.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Azeret Mono';
  src: url('../fonts/azeret-mono-300_700.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces. --canvas is a true neutral off-white, not cream: the warm
     near-white band is the saturated default and reads as generated. */
  --canvas: oklch(0.972 0 0);
  --canvas-sunk: oklch(0.941 0 0);
  --ink: oklch(0.205 0.018 250);
  --ink-raised: oklch(0.262 0.017 250);
  --ink-line: oklch(0.345 0.016 250);
  --carbon: oklch(0.145 0 0);

  /* Type on canvas */
  --on-canvas: oklch(0.205 0.018 250);
  --on-canvas-mute: oklch(0.468 0.012 250);

  /* Type on ink. Light type on dark needs a touch more air, handled in base.css */
  --on-ink: oklch(0.968 0.003 250);
  --on-ink-mute: oklch(0.742 0.011 250);

  /* Brand. One orange, no second accent: the amber is gone for good.
     Ink sits on flare, never white: white on this orange is 3.1:1. */
  --flare: oklch(0.645 0.196 39);
  --flare-lift: oklch(0.688 0.192 42);
  /* same orange, lifted just enough to clear AA as text on ink */
  --flare-on-ink: oklch(0.735 0.168 42);

  --focus: oklch(0.735 0.168 42);

  /* Type */
  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono: 'Azeret Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --step-2: clamp(1.75rem, 1.5rem + 1.2vw, 2.6rem);
  --step-3: clamp(2.4rem, 1.9rem + 2.4vw, 4rem);
  --step-4: clamp(3.2rem, 2rem + 5.4vw, 6rem);

  /* Space */
  --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 3rem);
  --section-y: clamp(5rem, 3.5rem + 7vw, 10rem);
  --wrap: 1360px;

  /* Motion */
  --out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 180ms;
  --mid: 420ms;
  --slow: 780ms;

  /* Depth */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-overlay: 60;
  --z-modal: 80;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fast: 1ms;
    --mid: 1ms;
    --slow: 1ms;
  }
}