/*
 * TruDesign — design tokens · "Verdant OS" (Claude Design, direction 1a)
 * Type system (two roles):
 *   Sora        — display + body/UI. Geometric grotesque, tech-forward, crisp bold.
 *   Space Mono  — data, labels, eyebrows, progress. Precision cues only.
 * Both self-hosted (latin), true static weights. No external font dependency.
 * Palette verified WCAG 2.1 AA for all text pairs.
 */

/* ---- Sora (display + body) — 400 / 500 / 600 / 700 / 800 ---------------- */
@font-face {
  font-family: 'Sora';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/Sora-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
}
@font-face {
  font-family: 'Sora';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/Sora-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
}
@font-face {
  font-family: 'Sora';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/Sora-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
}
@font-face {
  font-family: 'Sora';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/Sora-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
}
@font-face {
  font-family: 'Sora';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/Sora-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
}

/* ---- Space Mono (data/labels only) — 400 / 700 ------------------------- */
@font-face {
  font-family: 'Space Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/SpaceMono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/SpaceMono-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
}

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* Colour — Verdant OS: cool paper, deep-forest ink, forest green, electric lime */
  --paper:      #F4F6F0;  /* page background */
  --panel:      #FBFCF8;  /* card fill */
  --panel-2:    #ECEEE6;  /* deeper panel (testimonial) */
  --ink:        #141D12;  /* near-black forest — body text */
  --ink-soft:   #2C3628;  /* labels */
  --forest:     #0F1A10;  /* dark surfaces: nav, success card */
  --forest-ink: #EAF3E4;  /* text on forest */
  --green:      #3F6B2E;  /* primary: links, chip-active, accents */
  --green-dark: #2A5019;  /* hover */
  --lime:       #C9F277;  /* electric-lime CTA / accent (dark text only) */
  --lime-hover: #D7F88F;
  --rule:       #DBE0D5;  /* hairlines / input borders */
  --rule-soft:  #CFD6C7;  /* input borders (resting) */
  --muted:      #7A8676;  /* captions / hints */
  --muted-2:    #4A5A44;  /* secondary body */
  --focus:      #3F6B2E;  /* focus ring colour */

  /* Type — two roles */
  --font-body: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  /* Back-compat alias: any lingering --font-display maps to the body face. */
  --font-display: var(--font-body);

  --fs-eyebrow: 0.75rem;
  --fs-small:   0.8125rem;
  --fs-body:    1rem;
  --fs-lead:    1.125rem;
  --fs-h3:      1.1875rem;
  --fs-h2:      1.75rem;
  --fs-display: clamp(1.875rem, 4.4vw, 2.75rem);
  --lh-tight:   1.05;
  --lh-body:    1.6;

  /* Space & measure */
  --measure: 60ch;
  --wrap: 1080px;
  --s-1: 0.5rem; --s-2: 0.75rem; --s-3: 1rem; --s-4: 1.5rem;
  --s-5: 2.5rem; --s-6: 4rem;  --s-7: 6rem;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --border: 1px;
}

/* ---- Reset (light) ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:where(a) { color: var(--green); text-underline-offset: 0.18em; }
:where(a:hover) { color: var(--green-dark); }
::selection { background: var(--lime); color: var(--forest); }