/* =========================================================================
   HCS design tokens — vendored from the Abacus Robotics design system
   (claudedesign/HoleyBot Control System UI/_ds/.../colors_and_type.css).
   HCS owns this copy. Anchored on Orange; the gear yellow/red/blue are a
   restrained accent family, not primary UI surfaces.
   ========================================================================= */

/* Fonts: the brand families (Archivo / Rubik / Cousine) are named first in the
   --font-* stacks below, with robust system fallbacks (Inter / system-ui / Consolas) so
   the app renders identically offline and single-origin — no render-blocking external
   @import. To get exact brand typefaces, vendor the woff2 files into web/styles/fonts/
   and add local @font-face rules here (a deliberate, offline, consistent choice). */

:root {
  /* ===== BRAND ===== */
  --brand-orange:        #FF7F00;
  --brand-orange-deep:   #E5650A;
  --brand-orange-soft:   #FFE7CC;
  --brand-orange-wash:   #FFF6EC;

  /* ===== INK (text + dark surfaces) ===== */
  --ink-1000:  #0B0E14;
  --ink-900:   #14181F;
  --ink-800:   #1F242E;
  --ink-700:   #2E3440;
  --ink-600:   #434A57;   /* muted body text — darkened for light-mode readability */
  --ink-500:   #59616D;   /* labels / help / notes — darkened for readability */
  --ink-400:   #7C8493;   /* dim / placeholder text — darkened for readability */
  --ink-300:   #C7CCD4;
  --ink-200:   #E2E6EB;
  --ink-150:   #ECEEF2;
  --ink-100:   #F4F5F7;
  --ink-50:    #FAFAFB;

  /* ===== PAPER (light surfaces) ===== */
  --paper:        #FFFFFF;
  --paper-warm:   #FAF8F4;
  --paper-warmer: #F4EFE6;

  /* ===== ACCENTS (logo gears — used SPARINGLY) ===== */
  --gear-yellow:      #FFC000;
  --gear-yellow-deep: #C99500;
  --gear-red:         #E5342B;
  --gear-red-deep:    #B92019;
  --gear-blue:        #0E6FBE;
  --gear-blue-deep:   #0A5491;

  /* ===== SEMANTIC ===== */
  /* Page sits a touch deeper than the white cards (a comfortable warm off-white) so cards lift
     off it instead of blending into one bright wash. Cards add a soft shadow (see base.css). */
  --bg:          #F3F1EC;
  --bg-elev:     var(--paper);
  --bg-sunken:   var(--ink-100);
  --bg-inverse:  var(--ink-900);

  --fg:          var(--ink-900);
  --fg-muted:    var(--ink-600);
  --fg-subtle:   var(--ink-500);
  --fg-inverse:  var(--paper);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --divider:       var(--ink-150);

  --accent:      var(--brand-orange);
  --accent-deep: var(--brand-orange-deep);
  --accent-soft: var(--brand-orange-soft);

  /* An always-dark surface for brand marks + code blocks (overridden in dark so it stays dark). */
  --mark-bg: var(--ink-900);

  --success:      #2F8F3E;
  --success-deep: #25742F;
  --warning: var(--gear-yellow-deep);
  --danger:  var(--gear-red-deep);
  --info:    var(--gear-blue);

  /* ===== TYPE FAMILIES ===== */
  --font-display: "Archivo", "Inter", system-ui, sans-serif;
  --font-body:    "Rubik", "Inter", system-ui, sans-serif;
  --font-serif:   "Libre Baskerville", "Iowan Old Style", Georgia, serif;
  --font-mono:    "Cousine", Consolas, "SF Mono", ui-monospace, monospace;

  /* ===== TYPE SCALE (px) ===== */
  --fs-display: 72px;
  --fs-h1: 56px;
  --fs-h2: 40px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-lg: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-eyebrow: 13px;

  /* ===== LINE HEIGHTS ===== */
  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-normal: 1.45;
  --lh-loose: 1.6;

  /* ===== LETTER SPACING ===== */
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.14em;

  /* ===== SPACING (4-pt base) ===== */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ===== RADII ===== */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-pill: 999px;

  /* ===== SHADOWS / ELEVATION ===== */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.10);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 3px 8px -1px rgba(16, 24, 40, 0.10);
  --shadow-md: 0 8px 20px -6px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.07);
  --shadow-lg: 0 24px 48px -20px rgba(16, 24, 40, 0.22), 0 4px 10px rgba(16, 24, 40, 0.07);
  --shadow-focus: 0 0 0 3px rgba(255, 127, 0, 0.30);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.06);

  /* ===== MOTION ===== */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.5, 0.05, 0.3, 0.95);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ========================================================================
   DARK MODE — invert the ink scale + paper so the semantic tokens (--bg/--fg/
   --border, resolved at use) cascade to dark automatically. Brand orange is kept;
   marks/code blocks use --mark-bg (stays dark); shadows deepen. Applied by setting
   data-theme="dark" on <html> (Settings; pre-paint via the inline script in index.html).
   ======================================================================== */
:root[data-theme="dark"] {
  --ink-1000:  #FAFBFC;
  --ink-900:   #ECEFF3;   /* primary text */
  --ink-800:   #D9DEE6;
  --ink-700:   #BCC3CE;
  --ink-600:   #8B93A1;   /* muted text */
  --ink-500:   #767E8C;   /* subtle text */
  --ink-400:   #5B6270;
  --ink-300:   #3E4651;   /* strong border */
  --ink-200:   #313842;   /* border */
  --ink-150:   #2A303A;   /* divider */
  --ink-100:   #242A34;   /* sunken / chips */
  --ink-50:    #1F242C;

  --paper:        #1B1F27;   /* cards / elevated surfaces */
  --paper-warm:   #15181F;   /* page background */
  --paper-warmer: #20242C;
  --bg:           var(--paper-warm);   /* dark page tracks paper-warm (light --bg is hard-set) */

  --mark-bg: #20242C;        /* brand marks + code blocks stay dark */
  --brand-orange-soft: #3A2912;
  --brand-orange-wash: #261C12;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 20px -8px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 48px -20px rgba(0, 0, 0, 0.65), 0 4px 10px rgba(0, 0, 0, 0.40);
}

/* ========================================================================
   HIGH CONTRAST — an accessibility setting (Settings → Contrast). Darkens the
   border/divider tokens so every outline reads stronger SITE-WIDE; base.css adds a
   little extra border-width to the major surfaces + a heavier program-block stroke.
   Applied by data-contrast="high" on <html> (pre-paint in index.html; core/settings.js).
   ======================================================================== */
:root[data-contrast="high"] {
  --border:        var(--ink-400);
  --border-strong: var(--ink-500);
  --divider:       var(--ink-300);
}

/* ---------- Semantic prose helpers (subset used by the app) ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-deep);
}
.mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: -0.01em;
}