/* Websight Studios — design tokens
   Layer 1: primitives (raw values, taken from the logo files)
   Layer 2: semantic (what a value is for)
   Layer 3: component (only where a component needs its own knob) */

/* Self-hosted fonts (SIL Open Font Licence, licences in assets/fonts). Latin subset covers English and Afrikaans. */
@font-face { font-family: 'Archivo'; src: url('../assets/fonts/archivo-latin-var.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('../assets/fonts/instrument-sans-latin-var.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../assets/fonts/geist-mono-latin-var.woff2') format('woff2'); font-weight: 300 500; font-style: normal; font-display: swap; }

:root {
  /* ---------- 1. Primitives ---------- */
  --c-ink: #0b0b0b;
  --c-graphite: #1c1c1c;
  --c-graphite-2: #2a2a2a;
  --c-sclera: #f0f0f0;
  --c-white: #ffffff;
  --c-chrome: #8c8c8c;
  --c-silver: #d2cfcf;
  --c-iris: #2e8b87;
  --c-iris-deep: #1f6b67;
  --c-iris-glow: #5fe3d4;

  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-body: clamp(1.0625rem, 0.3vw + 1rem, 1.125rem);
  --fs-lg: clamp(1.25rem, 0.8vw + 1rem, 1.5rem);
  --fs-h3: clamp(1.5rem, 2.4vw + 0.8rem, 2.25rem);
  --fs-h2: clamp(2.5rem, 7vw, 5.5rem);
  --fs-h1: clamp(3rem, 12.5vw, 10.5rem);
  --fs-mega: clamp(4rem, 19vw, 17rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.55, 0, 0.8, 0.2);
  --d-fast: 160ms;
  --d-base: 260ms;
  --d-slow: 520ms;

  --r-pill: 999px;
  --r-card: 28px;

  --z-base: 0; --z-raised: 10; --z-nav: 100; --z-menu: 400; --z-cursor: 900; --z-loader: 1000;

  /* ---------- 2. Semantic ---------- */
  --bg-dark: var(--c-ink);
  --bg-light: var(--c-sclera);
  --surface-dark: var(--c-graphite);
  --text-on-dark: var(--c-sclera);
  --text-on-dark-muted: #a8a8a8;
  --text-on-light: var(--c-ink);
  --text-on-light-muted: #555555;
  --rule-on-dark: rgba(240, 240, 240, 0.14);
  --rule-on-light: rgba(11, 11, 11, 0.14);
  --accent: var(--c-iris);
  --accent-text-light: var(--c-iris-deep);
  --accent-on-dark: var(--c-iris-glow);
  --focus-ring: var(--c-iris-glow);

  --gutter: max(20px, 5vw);
  --section-y: clamp(120px, 22vh, 280px);

  /* ---------- 3. Component ---------- */
  --btn-h: 56px;
  --btn-pad-x: 28px;
  --nav-pill-h: 56px;
  --row-min-h: 88px;
}