/* ==========================================================================
   KABASON — DESIGN TOKENS
   Every color, size, and timing value in the suite is defined here.
   No other stylesheet should contain a literal hex value.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TYPEFACES (self-hosted, latin subset — no third-party requests)

   Martian Mono   display  — titles, wordmark, nav, eyebrow labels
   Archivo        body     — descriptions, form labels, buttons, help text
   IBM Plex Mono  data     — textareas, outputs, code, expressions, results

   All three are SIL Open Font License 1.1. See assets/fonts/LICENSE.txt
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/martian-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-400-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   SCALE — shared by both themes
   -------------------------------------------------------------------------- */

:root {
  /* Font stacks */
  --font-display: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-data: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Type scale */
  --t-11: 11px;
  --t-13: 13px;
  --t-15: 15px;
  --t-17: 17px;
  --t-21: 21px;
  --t-27: 27px;
  --t-34: 34px;

  /* Martian Mono is wide; these keep it from feeling loose or cramped */
  --tracking-wide: 0.08em;
  --tracking-tight: -0.02em;

  /* Space scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Instrument panel, not pill */
  --radius: 4px;
  --radius-lg: 6px;

  /* Layout */
  --page-max: 1140px;
  --bar-height: 52px;

  /* Motion */
  --fast: 120ms;
  --slow: 500ms;
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* --------------------------------------------------------------------------
   THEME: DARK (default)

   Color has jobs here. Nothing gets a color for decoration:
     --signal  you can act, or this is where you are
     --verify  this is correct
     --fault   this is wrong
   Everything else is slate.
   -------------------------------------------------------------------------- */

:root,
:root.dark-mode {
  --ground: #0e1620;
  --surface: #16202d;
  --surface-2: #1c2836;
  --line: #243243;
  --line-soft: #1b2634;

  --text: #e6ecf3;
  --text-dim: #8c9bad;
  --text-faint: #7d8b9d; /* quietest tier, still 5:1 against --ground */

  /* Two forms of the same accent. --signal-fill is the brand orange and is
     only ever a background. --signal is the form that has to pass contrast
     as text or a 1px line, so the light theme darkens it. */
  --signal-fill: #f5871f;
  --signal: #f5871f;
  --signal-ink: #14212e; /* text on a signal fill */
  --signal-wash: rgba(245, 135, 31, 0.12);

  --verify: #35c08a;
  --verify-wash: rgba(53, 192, 138, 0.12);

  --fault: #e5484d;
  --fault-wash: rgba(229, 72, 77, 0.12);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   THEME: LIGHT

   Built as its own palette rather than an inversion. The accents are darkened
   so they still pass contrast against a white surface.
   -------------------------------------------------------------------------- */

:root.light-mode {
  --ground: #f1f4f8;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --line: #d3dce6;
  --line-soft: #e4eaf1;

  --text: #141c26;
  --text-dim: #5c6b7c;
  --text-faint: #5c6a7c; /* quietest tier, still 4.8:1 against --ground */

  --signal-fill: #f5871f;
  --signal: #ac5200;
  --signal-ink: #241300;
  --signal-wash: rgba(245, 135, 31, 0.14);

  --verify: #137d57;
  --verify-wash: rgba(19, 125, 87, 0.1);

  --fault: #c22c31;
  --fault-wash: rgba(194, 44, 49, 0.1);

  --shadow: 0 1px 2px rgba(20, 28, 38, 0.08);
  --shadow-lift: 0 6px 24px rgba(20, 28, 38, 0.12);
}