/* ==========================================================================
   YONASOL — Design Tokens
   Three directions share base structure (spacing, radii, type scale)
   but diverge on color + typography. Direction-specific tokens are
   scoped via [data-dir="field-lab"], [data-dir="signal"], [data-dir="workbench"].
   ========================================================================== */

/* ---------- Shared base ---------- */
:root {
  /* 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;
  --sp-32: 128px;

  /* Radii */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Type scale (modular) */
  --fs-mono-xs: 11px;
  --fs-mono-sm: 12px;
  --fs-mono-md: 13px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 38px;
  --fs-5xl: 48px;
  --fs-6xl: 64px;
  --fs-7xl: 80px;

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --tr-mono: 0.04em;
  --tr-label: 0.08em;
  --tr-display: -0.02em;
  --tr-display-lg: -0.03em;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-quick: 140ms;
  --t-base: 220ms;
  --t-slow: 480ms;
}

/* =========================================================================
   DIRECTION 1 — FIELD LAB
   Editorial, parchment + muted teal, humanist sans + serif accent.
   Field-note motif: subtle ruled lines, hand-stamped numbers.
   ========================================================================= */
[data-dir="field-lab"] {
  /* Surfaces */
  --bg: #14171a;            /* deep warm ink */
  --bg-2: #1a1e22;          /* lifted surface */
  --bg-3: #21262b;          /* card */
  --bg-inset: #0f1214;      /* deepest */
  --paper: #e8dfca;         /* parchment for inverted blocks */
  --paper-ink: #2b251c;

  /* Text */
  --ink: #e8e2d4;           /* warm off-white */
  --ink-muted: #9aa0a4;
  --ink-faint: #6a6f74;
  --ink-on-paper: #2b251c;

  /* Accents */
  --accent: #6ea3a3;        /* muted teal — desaturated, slate-leaning */
  --accent-soft: rgba(110,163,163,0.14);
  --accent-line: rgba(110,163,163,0.32);
  --warm: #c9b48a;          /* parchment/sand warm */
  --warm-soft: rgba(201,180,138,0.14);

  /* Status */
  --status-live: #88b48a;
  --status-beta: #c9b48a;
  --status-stealth: #7a8088;
  --status-retired: #6a6f74;

  /* Lines + dividers */
  --rule: rgba(232,226,212,0.10);
  --rule-strong: rgba(232,226,212,0.18);

  /* Type families */
  --ff-display: 'Fraunces', 'Tiempos Headline', Georgia, serif;
  --ff-body: 'Söhne', 'Inter', system-ui, -apple-system, sans-serif;
  --ff-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Shadow */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.02) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.03) inset;
}

/* =========================================================================
   DIRECTION 2 — SIGNAL & TELEMETRY
   Technical, deep charcoal + brass, geometric sans + mono-forward.
   Telemetry / orbital motif: tick marks, coordinate labels, grid frames.
   ========================================================================= */
[data-dir="signal"] {
  --bg: #0e1013;
  --bg-2: #15181c;
  --bg-3: #1c2024;
  --bg-inset: #0a0c0e;
  --paper: #d4c8a8;
  --paper-ink: #1a1d20;

  --ink: #dee2e6;
  --ink-muted: #8a9099;
  --ink-faint: #585d63;
  --ink-on-paper: #1a1d20;

  --accent: #4f8a8a;        /* slate-teal, more muted than dir1 */
  --accent-soft: rgba(79,138,138,0.14);
  --accent-line: rgba(79,138,138,0.30);
  --warm: #b08a3e;          /* brass */
  --warm-soft: rgba(176,138,62,0.16);

  --status-live: #6b9b6b;
  --status-beta: #b08a3e;
  --status-stealth: #6c7480;
  --status-retired: #4a4f55;

  --rule: rgba(222,226,230,0.08);
  --rule-strong: rgba(222,226,230,0.16);

  --ff-display: 'GT America', 'Söhne', 'Neue Haas Grotesk', system-ui, sans-serif;
  --ff-body: 'GT America', 'Söhne', 'Inter', system-ui, sans-serif;
  --ff-mono: 'Berkeley Mono', 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 12px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
}

/* =========================================================================
   DIRECTION 3 — WORKBENCH
   Grounded, warm graphite + tobacco, slab-ish display + mono labels.
   Operating-manual motif: numbered steps, plate corners, technical drawings.
   ========================================================================= */
[data-dir="workbench"] {
  --bg: #16140f;            /* warm graphite */
  --bg-2: #1d1a14;
  --bg-3: #25211a;
  --bg-inset: #100e0a;
  --paper: #d8cdb4;
  --paper-ink: #2a241a;

  --ink: #e6dec9;
  --ink-muted: #968b78;
  --ink-faint: #5e5648;
  --ink-on-paper: #2a241a;

  --accent: #5e9494;        /* held-back teal */
  --accent-soft: rgba(94,148,148,0.14);
  --accent-line: rgba(94,148,148,0.30);
  --warm: #8a6a3e;          /* tobacco */
  --warm-soft: rgba(138,106,62,0.16);

  --status-live: #8aa56e;
  --status-beta: #b08a3e;
  --status-stealth: #7a7064;
  --status-retired: #5e5648;

  --rule: rgba(230,222,201,0.09);
  --rule-strong: rgba(230,222,201,0.18);

  --ff-display: 'Tobias', 'Söhne Breit', 'Roslindale', Georgia, serif;
  --ff-body: 'Söhne', 'Inter', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --shadow-1: 0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.45);
  --shadow-2: 0 10px 28px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.03) inset;
}