/* ─────────────────────────────────────────────────────────────
   Cotrugli — Colors & Type (design tokens)
   One brand. Two themes. Components reference tokens, never raw hex.
   Dark is default. Light is the inverted alternative.

   Source of truth: cotrugli-design-system-v1.html. This file is the
   shipped token sheet, with @font-face paths pointed at ../fonts/.
   ───────────────────────────────────────────────────────────── */

/* ─── Brand fonts — variable, self-hosted ─── */
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/InterTight-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/InterTight-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Type families ── */
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Type roles (font shorthand: weight size/line-height family) ── */
  --t-display:    500 48px/1.05 var(--font-sans);  /* tracking -0.03em  */
  --t-h1:         500 32px/1.10 var(--font-sans);  /* tracking -0.025em */
  --t-h2:         500 22px/1.20 var(--font-sans);  /* tracking -0.02em  */
  --t-h3:         500 18px/1.30 var(--font-sans);  /* tracking -0.015em */
  --t-body:       400 15px/1.55 var(--font-sans);
  --t-body-sm:    400 13px/1.50 var(--font-sans);
  --t-mono-data:  500 13px/1.50 var(--font-mono);
  --t-mono-label: 500 10px/1.40 var(--font-mono);  /* 0.12em UPPER     */
  --t-micro:      400 11px/1.40 var(--font-sans);

  /* ── Tracking helpers (apply alongside the role) ── */
  --tr-display: -0.03em;
  --tr-h1:      -0.025em;
  --tr-h2:      -0.02em;
  --tr-h3:      -0.015em;
  --tr-label:    0.12em;

  /* ── Spacing scale (4px base) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ── Corner radius (tight — system feeling) ── */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;

  /* ── Motion ── */
  --easing: linear;
  --t-quick: 120ms;
  --t-base:  160ms;
  --t-slow:  240ms;

  /* ─────────── DARK THEME — default ─────────── */
  --surface:        #0a0a0a;  /* mono ink — page bg */
  --surface-elev:   #18181b;  /* cards, panels */
  --surface-rule:   #27272a;  /* borders, dividers */

  --text:           #fafafa;  /* primary text — paper */
  --text-muted:     #a1a1aa;  /* de-emphasized */
  --text-subtle:    #71717a;  /* labels, captions */
  --text-faint:     #52525b;  /* micro hints */

  --signal:         #c4f000;  /* chartreuse — AGENT ONLY */
  --signal-soft:    #d8f566;  /* hover on signal */
  --signal-ink:     #2a3300;  /* text on signal fill */

  --success:        #4ade80;
  --danger:         #f87171;
  --warning:        #fbbf24;
  --info:           #60a5fa;
}

/* ─────────── LIGHT THEME — inverted ─────────── */
.light {
  --surface:        #fafafa;
  --surface-elev:   #f4f4f5;
  --surface-rule:   #e4e4e7;

  --text:           #0a0a0a;
  --text-muted:     #52525b;
  --text-subtle:    #71717a;
  --text-faint:     #a1a1aa;

  --signal:         #8aac00;  /* signal-deep — darker chartreuse */
  --signal-soft:    #6b8500;
  --signal-ink:     #fafafa;

  --success:        #15803d;
  --danger:         #b91c1c;
  --warning:        #b45309;
  --info:           #1d4ed8;
}