/* ────────────────────────────────────────────────────────────
   css/sc-tokens.css
   Single source of truth for SC design tokens (§2 of
   sc-aesthetic-design-reference.md). Load this BEFORE any
   page-level inline <style>. All SC surfaces should consume
   these --sc-* variables; no inline hex, no per-file :root
   overrides.

   Default theme: clean-light (applied at :root).
   Opt-in themes: workshop-dark, workshop-amber, high-contrast, print.
   Switch themes by setting data-sc-theme on <html>.
   ──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ══════════ DEFAULT: CLEAN-LIGHT ══════════ */
:root,
[data-sc-theme="clean-light"] {
  /* Surfaces */
  --sc-bg:         #f7f5ef;
  --sc-surface:    #ffffff;
  --sc-surface-2:  #efece4;
  --sc-surface-3:  #e4e0d3;

  /* Text */
  --sc-text:       #1f1d1a;
  --sc-text-2:     #5e5a52;
  --sc-text-3:     #8a867c;

  /* Borders */
  --sc-border:     #d9d4c6;
  --sc-border-2:   #c4beab;
  --sc-border-strong: #1f1d1a;

  /* Accent — single gold, legible on light */
  --sc-accent:     #b2871f;
  --sc-accent-hover: #8e6a15;
  --sc-accent-fg:  #ffffff;
  --sc-accent-soft-bg: rgba(178, 135, 31, 0.10);

  /* Semantic */
  --sc-info:       #2e6fae;   --sc-info-bg:    rgba(46, 111, 174, 0.10);
  --sc-success:    #3f7a2e;   --sc-success-bg: rgba(63, 122, 46, 0.10);
  --sc-warn:       #a56316;   --sc-warn-bg:    rgba(165, 99, 22, 0.10);
  --sc-danger:     #b04030;   --sc-danger-bg:  rgba(176, 64, 48, 0.10);

  /* Type */
  --sc-font-ui:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --sc-font-mono:  'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --sc-fs-nano:    11px;   /* badges, tiny meta */
  --sc-fs-mini:    12px;   /* eyebrow labels, secondary meta */
  --sc-fs-small:   13px;   /* nav, tab labels, form labels */
  --sc-fs-body:    15px;   /* inputs, body copy */
  --sc-fs-lg:      17px;   /* emphasized body */
  --sc-fs-h3:      18px;
  --sc-fs-h2:      22px;
  --sc-fs-h1:      28px;
  --sc-fs-readout: 22px;   /* primary numeric output */
  --sc-fs-readout-lg: 28px;

  --sc-ls-caps:    0.08em; /* uppercase eyebrows / nav */
  --sc-ls-wide:    0.15em; /* brand wordmark */

  /* Space */
  --sc-radius:     8px;
  --sc-radius-sm:  4px;
  --sc-radius-lg:  12px;
  --sc-shadow-sm:  0 1px 2px rgba(31, 29, 26, 0.06);
  --sc-shadow-md:  0 4px 16px -4px rgba(31, 29, 26, 0.12);

  --sc-grid-line:  rgba(0, 0, 0, 0.035);
}

/* ══════════ WORKSHOP-DARK (opt-in) ══════════
   Warmer than pure-black — references crown-molding's wood-shop palette.
   Gold accent sings against warm-black bg. */
[data-sc-theme="workshop-dark"] {
  --sc-bg:         #1a1714;
  --sc-surface:    #242019;
  --sc-surface-2:  #2e2a23;
  --sc-surface-3:  #3a352c;

  --sc-text:       #ece7da;
  --sc-text-2:     #a29b89;
  --sc-text-3:     #726b5a;

  --sc-border:     #3d3730;
  --sc-border-2:   #4f4840;
  --sc-border-strong: #ece7da;

  --sc-accent:     #f0b423;
  --sc-accent-hover: #f6c752;
  --sc-accent-fg:  #1a1714;
  --sc-accent-soft-bg: rgba(240, 180, 35, 0.12);

  --sc-info:       #7ab3e0;   --sc-info-bg:    rgba(122, 179, 224, 0.12);
  --sc-success:    #7ec96a;   --sc-success-bg: rgba(126, 201, 106, 0.12);
  --sc-warn:       #e6a853;   --sc-warn-bg:    rgba(230, 168, 83, 0.12);
  --sc-danger:     #e08870;   --sc-danger-bg:  rgba(224, 136, 112, 0.12);

  --sc-grid-line:  rgba(91, 184, 240, 0.02);
}

/* ══════════ WORKSHOP-AMBER (opt-in) ══════════
   Amber-tinted monochrome, evokes saw-table CRT / daylight workshop. */
[data-sc-theme="workshop-amber"] {
  --sc-bg:         #1c1810;
  --sc-surface:    #26211a;
  --sc-surface-2:  #332c22;
  --sc-surface-3:  #40382c;

  --sc-text:       #f5d98a;
  --sc-text-2:     #c9a558;
  --sc-text-3:     #8f7638;

  --sc-border:     #4a3f2e;
  --sc-border-2:   #5c4f3a;
  --sc-border-strong: #f5d98a;

  --sc-accent:     #f5d98a;
  --sc-accent-hover: #ffe9a8;
  --sc-accent-fg:  #1c1810;
  --sc-accent-soft-bg: rgba(245, 217, 138, 0.12);

  --sc-info:       #e0c070;   --sc-info-bg:    rgba(224, 192, 112, 0.10);
  --sc-success:    #c9c770;   --sc-success-bg: rgba(201, 199, 112, 0.10);
  --sc-warn:       #e0a050;   --sc-warn-bg:    rgba(224, 160, 80, 0.12);
  --sc-danger:     #e07050;   --sc-danger-bg:  rgba(224, 112, 80, 0.12);
}

/* ══════════ HIGH-CONTRAST (opt-in, accessibility) ══════════ */
[data-sc-theme="high-contrast"] {
  --sc-bg:         #000000;
  --sc-surface:    #0a0a0a;
  --sc-surface-2:  #141414;
  --sc-surface-3:  #1f1f1f;

  --sc-text:       #ffffff;
  --sc-text-2:     #d0d0d0;
  --sc-text-3:     #9a9a9a;

  --sc-border:     #404040;
  --sc-border-2:   #606060;
  --sc-border-strong: #ffffff;

  --sc-accent:     #ffcc00;
  --sc-accent-hover: #ffe155;
  --sc-accent-fg:  #000000;
  --sc-accent-soft-bg: rgba(255, 204, 0, 0.18);

  --sc-info:       #80c0ff;   --sc-info-bg:    rgba(128, 192, 255, 0.15);
  --sc-success:    #80ff80;   --sc-success-bg: rgba(128, 255, 128, 0.15);
  --sc-warn:       #ffb050;   --sc-warn-bg:    rgba(255, 176, 80, 0.15);
  --sc-danger:     #ff8080;   --sc-danger-bg:  rgba(255, 128, 128, 0.15);
}

/* ══════════ PRINT (opt-in, for PDF export) ══════════ */
[data-sc-theme="print"],
@media print {
  :root {
    --sc-bg:         #ffffff;
    --sc-surface:    #ffffff;
    --sc-surface-2:  #f5f5f5;
    --sc-surface-3:  #ebebeb;

    --sc-text:       #000000;
    --sc-text-2:     #333333;
    --sc-text-3:     #666666;

    --sc-border:     #000000;
    --sc-border-2:   #666666;
    --sc-border-strong: #000000;

    --sc-accent:     #000000;
    --sc-accent-hover: #000000;
    --sc-accent-fg:  #ffffff;
    --sc-accent-soft-bg: transparent;

    --sc-shadow-sm:  none;
    --sc-shadow-md:  none;
  }
}

/* ══════════ BASE RESETS ══════════ */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--sc-bg); }
body {
  margin: 0;
  background: var(--sc-bg);
  color: var(--sc-text);
  font-family: var(--sc-font-ui);
  font-size: var(--sc-fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Utility classes used by retrofitted surfaces */
.sc-eyebrow {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-fs-mini);
  letter-spacing: var(--sc-ls-caps);
  text-transform: uppercase;
  color: var(--sc-text-3);
}
