/* TEMPER design tokens v1.0 — mirrors tokens.json. Locked 2026-09-25.
   Font URLs are relative to brands/temper/tokens/; products copy fonts/ and
   rewrite these paths, they never hotlink the brand masters. */

@font-face {
  font-family: "Archivo Expanded";
  src: url("/fonts/Archivo-wdth-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-opsz-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("/fonts/Inter-opsz-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* brand — fixed */
  --t-graphite: #0B0B0C;
  --t-offwhite: #EDEAE6;
  --t-vermilion: #FF3B1F;
  --t-steel: #3A3A3F;
  --t-vermilion-text: #C62814;

  /* neutral ramp */
  --t-n-0: #0B0B0C;
  --t-n-50: #131315;
  --t-n-100: #1B1B1E;
  --t-n-200: #26262A;
  --t-n-300: #3A3A3F;
  --t-n-400: #5C5B60;
  --t-n-500: #8A8990;
  --t-n-600: #B5B2AE;
  --t-n-700: #D6D2CD;
  --t-n-800: #EDEAE6;
  --t-n-900: #F7F5F2;

  /* signal (interactive Vermilion) — labels on Vermilion are Graphite */
  --t-signal: #FF3B1F;
  --t-signal-hover: #FF5436;
  --t-signal-pressed: #E0301A;
  --t-on-signal: #0B0B0C;

  /* product state — separate from brand colour */
  --t-positive: #35C46A;
  --t-warning: #E7A62A;
  --t-critical: #E84C4C;
  --t-info: #7EA7FF;

  /* type */
  --t-font-brand: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --t-font-display: "Inter Display", "Inter", -apple-system, "SF Pro Display", system-ui, sans-serif;
  --t-font-text: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --t-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* space (4px unit) */
  --t-s-1: 4px; --t-s-2: 8px; --t-s-3: 12px; --t-s-4: 16px; --t-s-5: 24px;
  --t-s-6: 32px; --t-s-7: 48px; --t-s-8: 64px; --t-s-9: 96px; --t-s-10: 128px;

  --t-r-control: 4px;
  --t-r-card: 8px;
  --t-r-panel: 12px;

  --t-dur-fast: 120ms;
  --t-dur: 180ms;
  --t-dur-slow: 320ms;
  --t-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --t-max: 1280px;
  --t-measure: 680px;
}

/* surfaces: light is the default, .t-dark flips it */
.t-light, :root {
  --t-bg: var(--t-offwhite);
  --t-bg-raised: var(--t-n-900);
  --t-fg: var(--t-graphite);
  --t-fg-muted: var(--t-n-400);
  --t-rule: var(--t-n-700);
  --t-accent-text: var(--t-vermilion-text);
}
.t-dark {
  --t-bg: var(--t-graphite);
  --t-bg-raised: var(--t-n-100);
  --t-fg: var(--t-offwhite);
  --t-fg-muted: var(--t-n-500);
  --t-rule: var(--t-n-300);
  --t-accent-text: var(--t-vermilion);
}

/* type roles */
.t-shout {           /* editorial only: short uppercase words */
  font-family: var(--t-font-brand);
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.92;
}
.t-display-xl { font: 800 88px/0.95 var(--t-font-display); letter-spacing: -0.04em; font-variation-settings: "opsz" 32; }
.t-display    { font: 800 64px/1.0 var(--t-font-display); letter-spacing: -0.035em; font-variation-settings: "opsz" 32; }
.t-h1         { font: 700 44px/1.08 var(--t-font-display); letter-spacing: -0.03em; font-variation-settings: "opsz" 32; }
.t-h2         { font: 700 34px/1.12 var(--t-font-display); letter-spacing: -0.025em; font-variation-settings: "opsz" 32; }
.t-h3         { font: 600 24px/1.25 var(--t-font-display); letter-spacing: -0.015em; font-variation-settings: "opsz" 28; }
.t-body-l     { font: 400 19px/1.5 var(--t-font-text); letter-spacing: -0.011em; }
.t-body       { font: 400 16px/1.55 var(--t-font-text); letter-spacing: -0.006em; }
.t-small      { font: 400 14px/1.45 var(--t-font-text); }
.t-data       { font: 500 13px/1.45 var(--t-font-mono); font-variant-numeric: tabular-nums; }
.t-label      { font: 500 11px/1.4 var(--t-font-mono); letter-spacing: 0.24em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  :root { --t-dur-fast: 0ms; --t-dur: 0ms; --t-dur-slow: 0ms; }
}