/* Archi-Tek — design tokens (source: _Design/charte.md, AG-validated 2026-06-12) */

@font-face { font-family: 'Outfit'; src: url('fonts/outfit-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('fonts/outfit-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('fonts/outfit-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('fonts/outfit-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('fonts/dmmono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('fonts/dmmono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  /* Palette — WCAG table is law: cyan NEVER carries text on light (use cyan-text) */
  --ink: #111111;
  --cyan: #12B8D6;        /* graphic accent only on light; ONE moment per composition */
  --cyan-text: #0A6B80;   /* accent text on light (6.13:1) */
  --cyan-bright: #7FE3F2; /* accent text/elements on dark (12.74:1 on ink) */
  --slate: #5A6B7B;       /* secondary text (5.49:1 on white) */
  --hairline: #D8DFE5;
  --paper: #F4F7F9;
  --white: #FFFFFF;

  /* 8-pt grid */
  --u: 8px;
  --margin: calc(6 * var(--u));   /* 48px page margins */
  --gutter: calc(2 * var(--u));   /* 16px */

  /* Type scale (charte ratios, fluid) */
  --fs-display-xl: clamp(2.75rem, 1.2rem + 5.2vw, 5.5rem);   /* tracking -0.015em, lh 1.06 */
  --fs-display:    clamp(2rem, 1.1rem + 3vw, 3.5rem);        /* tracking -0.01em,  lh 1.15 */
  --fs-title:      clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); /* tracking -0.005em, lh 1.25 */
  --fs-lead:       clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); /* lh 1.6 */
  --fs-body:       1rem;                                     /* lh 1.55 */
  --fs-caption:    0.8125rem;                                /* DM Mono, +0.02em */
  --fs-label:      0.75rem;                                  /* Outfit 500 caps, +0.12em */

  /* Motion — 160–280 ms, ease-out, one moving element at a time, no bounce, no parallax */
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 280ms;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0.01ms !important; }
}

body {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mono { font-family: 'DM Mono', ui-monospace, monospace; }

.kicker {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.display-xl { font-size: var(--fs-display-xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.06; }
.display    { font-size: var(--fs-display);    font-weight: 600; letter-spacing: -0.01em;  line-height: 1.15; }
.title      { font-size: var(--fs-title);      font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; }
.lead       { font-size: var(--fs-lead);       font-weight: 400; line-height: 1.6; }
.caption    { font-family: 'DM Mono', ui-monospace, monospace; font-size: var(--fs-caption); letter-spacing: 0.02em; line-height: 1.5; color: var(--slate); }

.hairline-rule { height: 0; border-top: 0.5px solid var(--hairline); }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}