/* ==========================================================================
   Service Ghost — Paper Night · colors_and_type.css
   Reusable color, type, spacing, radius, and state tokens.

   Source of truth: service-ghost-brand-kit-2.html (locked system :root),
   verified identical in service-ghost-paper-night-3x.html (V1 Folio,
   V2 Desk OS, V3 Quiet Strike all share these tokens).
   ========================================================================== */

:root {
  /* --- Color · core palette (soft warm dark; hex fallback, oklch primary) --- */
  --bg: #140e08;                     /* page — warm charcoal, never pure black */
  --bg: oklch(17% 0.016 70);
  --surface: #1f1a14;                /* raised panel / card */
  --surface: oklch(22% 0.014 70);
  --fg: #eeebe2;                     /* primary text — warm cream */
  --fg: oklch(94% 0.012 90);
  --ink-hard: #e0ded7;               /* hard ink accents on dark */
  --ink-hard: oklch(90% 0.01 90);
  --muted: #9f978c;                  /* secondary text, eyebrows */
  --muted: oklch(68% 0.018 75);
  --border: #3e362e;                 /* hairlines, card borders */
  --border: oklch(34% 0.018 70);

  /* --- Color · accent (exactly one — vermillion) --- */
  --accent: #c54f3b;                 /* vermillion; budget ≤2 uses per screen */
  --accent: oklch(58% 0.155 32);
  --accent-fg: #fbf8f1;              /* text/icons on accent */
  --accent-fg: oklch(98% 0.01 90);

  /* --- Color · reverse (cream paper strips) --- */
  --paper: #f4f2ea;
  --paper: oklch(96% 0.01 90);
  --ink: #171008;
  --ink: oklch(18% 0.02 70);

  /* --- Color · semantic (tonal, never candy) --- */
  --success: #adc6a8;                /* muted sage; status dots default to cream */
  --success: oklch(80% 0.05 140);
  --warning: #d9af75;                /* muted amber */
  --warning: oklch(78% 0.09 75);
  --danger: #e54d42;                 /* deep red, sibling of accent */
  --danger: oklch(63% 0.19 28);
  --info: var(--muted);              /* informational = monochrome */

  /* --- Typography · families --- */
  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* --- Typography · scale (from locked kit) --- */
  --text-micro: 10px;     /* swatch values, fine mono labels */
  --text-caption: 11px;   /* eyebrows — mono, 500, +0.1em, uppercase */
  --text-small: 12px;
  --text-label: 13px;     /* buttons — 600, +0.06em, uppercase */
  --text-body: 14px;      /* default UI body */
  --text-body-lg: 16px;
  --text-lede: 17px;      /* hero lede */
  --text-h3: 22px;        /* card titles */
  --text-h2: 28px;        /* section titles (serif) */
  --text-display: clamp(44px, 7.2vw, 72px);  /* serif, at scale only */

  /* --- Spacing (4px base) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --pad: clamp(20px, 4vw, 40px);     /* page gutter */
  --max: 1120px;                     /* content max width */

  /* --- Radius (hard, print-like) --- */
  --radius: 2px;
  --radius-btn: 2px;

  /* --- States & motion --- */
  --border-strong: color-mix(in oklch, var(--fg) 45%, var(--border)); /* ghost hover */
  --accent-brighten: 1.07;           /* filter: brightness() on accent hover */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --disabled-opacity: 0.45;
  --ease: 0.18s ease;
}

/* --- Base --- */
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

code, kbd, pre, .mono { font-family: var(--font-mono); }

a { color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --- Shared utilities (mirrors locked kit classes) --- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow.accent { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}