/* Collabysis design tokens - Cyanotype Evolved (DESIGN.md).
   The three voices, the two themes, the 8px spacing scale, and the 4/8/12 radius
   hierarchy live here so every surface reads as one system. Do not deviate without
   founder approval (DESIGN.md line 6). */

/* ------------------------------------------------------------------ *
 * The three voices - self-hosted OFL woff2, no external origin.       *
 * Fraunces (human), Hanken Grotesk (interface), IBM Plex Mono (data). *
 * ------------------------------------------------------------------ */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Voices */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (rem) - DESIGN.md line 35 */
  --fs-display: clamp(2.2rem, 1.2rem + 4.2vw, 3.4rem);
  --fs-h2: 1.7rem;
  --fs-h3: 1.35rem;
  --fs-body: 1rem;
  --fs-small: 0.9rem;
  --fs-data: 0.82rem;
  --fs-mono-label: 0.72rem;

  /* Spacing scale - 8px base, comfortable (DESIGN.md line 63-64) */
  --sp-2xs: 2px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;

  /* Radius hierarchy - never uniform-bubbly (DESIGN.md line 70) */
  --r-sm: 4px;   /* inputs, chips */
  --r-md: 8px;   /* buttons, cards */
  --r-lg: 12px;  /* modals, page panels */

  /* Layout */
  --max-content: 1200px;
  --measure: 65ch;

  /* Motion (DESIGN.md line 72-75) */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in: cubic-bezier(0.6, 0.05, 0.9, 0.4);
  --ease-move: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: 90ms;
  --dur-short: 200ms;
  --dur-medium: 340ms;

  /* Light ("Print Studio") - default (DESIGN.md line 40-52) */
  --bg: #F7F7F4;
  --surface: #FFFFFF;
  --ink: #1A1D21;
  --muted: #5F6670;
  --hairline: #E2E4E0;
  --structure: #1D3B57;
  --accent: #DD4B2A;
  --good: #2F7A55;
  --warn: #C1841F;
  --bad: #9E1B14;

  /* Primary-action pair. These stay in the cinnabar family while giving
     normal-size button text a deterministic WCAG AA contrast margin. */
  --action-bg: #B83A20;
  --action-fg: #FFFFFF;
  --action-hover-bg: #9F3019;

  /* Derived tints (kept within the palette; no new hues) */
  --structure-wash: #EDF1F5;
  --accent-wash: #FBECE7;
  --zebra: #FAFAF8;
  --shadow-soft: 0 1px 2px rgba(26, 29, 33, 0.05), 0 8px 28px rgba(26, 29, 33, 0.06);
  --shadow-press: 0 2px 10px rgba(158, 27, 20, 0.18);
  color-scheme: light;
}

/* Dark ("Darkroom") - a stance, not an invert (DESIGN.md line 54-57).
   Applied by prefers-color-scheme, or forced by the toggle via data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1922;
    --surface: #16242F;
    --ink: #EAE4D6;
    --muted: #8A97A0;
    --hairline: #24333F;
    --structure: #6FA8D6;
    --accent: #F1663B;
    --good: #5BB587;
    --warn: #D9A23E;
    --bad: #C4574A;
    --action-bg: #F1663B;
    --action-fg: #0E1922;
    --action-hover-bg: #FF7A52;
    --structure-wash: #17303F;
    --accent-wash: #33221C;
    --zebra: #13202A;
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-press: 0 2px 12px rgba(241, 102, 59, 0.22);
    color-scheme: dark;
  }
}

/* Explicit toggle wins over the media query in both directions. */
:root[data-theme="dark"] {
  --bg: #0E1922;
  --surface: #16242F;
  --ink: #EAE4D6;
  --muted: #8A97A0;
  --hairline: #24333F;
  --structure: #6FA8D6;
  --accent: #F1663B;
  --good: #5BB587;
  --warn: #D9A23E;
  --bad: #C4574A;
  --action-bg: #F1663B;
  --action-fg: #0E1922;
  --action-hover-bg: #FF7A52;
  --structure-wash: #17303F;
  --accent-wash: #33221C;
  --zebra: #13202A;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-press: 0 2px 12px rgba(241, 102, 59, 0.22);
  color-scheme: dark;
}