/* ============================================================
   CODE — tokens · v1.1
   The uniform UI across every coding project.
   Dark-first. Light theme is a class on <html>; tokens swap,
   components don't know which theme they're in.
   Source of truth: README.md
   ============================================================ */

/* ── Dark (default) ───────────────────────────────────────── */
:root, html.theme-dark {
  --c-bg:            #1c1c1c;   /* app background */
  --c-panel:         #242424;   /* cards, rows, inputs */
  --c-panel2:        #2e2e2e;   /* raised/nested surfaces, tracks, tags */
  --c-border:        #323232;   /* structural dividers */
  --c-border-strong: #3e3e3e;   /* interactive edges */
  --c-ink:           #ededed;   /* primary text */
  --c-sub:           #a0a0a0;   /* secondary text, labels */
  --c-faint:         #707070;   /* hints, units, meta */
  --c-green:         #3ecf8e;   /* the one accent */
  --c-green-dim:     #006239;   /* muted accent fill */
  --c-danger:        #f87171;   /* destructive only */

  --c-stage:         #171717;   /* optional: canvas behind a document */
  --c-shadow:        rgba(0,0,0,.45);
}

/* ── Light ────────────────────────────────────────────────── */
html.theme-light {
  --c-bg:            #f7f7f6;
  --c-panel:         #ffffff;
  --c-panel2:        #f0f0ef;
  --c-border:        #e4e4e2;
  --c-border-strong: #d4d4d1;
  --c-ink:           #1a1a1a;
  --c-sub:           #5a5a58;
  --c-faint:         #8a8a87;
  --c-green:         #16a34a;
  --c-green-dim:     #bbf7d0;
  --c-danger:        #dc2626;

  --c-stage:         #ececeb;
  --c-shadow:        rgba(0,0,0,.16);
}

/* ── Display variant ──────────────────────────────────────────
   For always-on screens — kiosks, dashboards, wall displays.
   The surface ramp drops to true black so the panel disappears
   in a dark room. Accent and text ramp are unchanged, so a
   component built for the app reads correctly here too.
   Apply with: <html class="theme-dark theme-display">
   ──────────────────────────────────────────────────────────── */
html.theme-display {
  --c-bg:            #000000;
  --c-panel:         #080808;
  --c-panel2:        #141414;
  --c-border:        #1c1c1c;
  --c-border-strong: #272727;
}

/* ── Theme-independent ────────────────────────────────────── */
:root {
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Text that sits ON the accent. Chosen against --c-green, so
     these are the only literals allowed outside this file. */
  --on-green:      #10231a;   /* buttons, banners */
  --on-green-hard: #0b0b0b;   /* selection, pressed steppers */

  /* Radius scale — climbs with the size of the thing */
  --r-tag:    4px;
  --r-ctrl:   7px;
  --r-btn:    8px;
  --r-card:  10px;
  --r-lg:    12px;
  --r-sheet: 16px;

  /* Motion */
  --t-fast:  .12s;
  --t-base:  .13s;
  --t-slow:  .18s;

  --pad: 18px;
}

/* Public support footer reuses --c-border, --c-ink, --c-green and --r-md; no new accent. */