/*
 * Threshold Design Tokens — Canonical CSS source
 *
 * Source: W:/threshold-documents/doctrine/design/
 * Maintained by: doctrine, not project code
 * Consumers: every Threshold web project; copy or symlink, do not duplicate-and-edit
 *
 * Generated 2026-05-21 as part of task #625 (design language doctrine).
 * When this file and the doctrine disagree, fix one of them — don't silently diverge.
 */

:root {
  /* ─── Primary palette ─────────────────────────────────────────── */
  --thx-color-threshold-blue: #001123;
  --thx-color-sea:            #002987;
  --thx-color-lapis:          #0074FF;
  --thx-color-sky:            #63AAFF;
  --thx-color-crimson:        #db1b3e;
  --thx-color-brick:          #b22b22;

  /* ─── Greys ───────────────────────────────────────────────────── */
  --thx-color-black:    #000000;
  --thx-color-grey-222: #222222;
  --thx-color-grey-444: #444444;
  --thx-color-grey-666: #666666;
  --thx-color-grey-ccc: #cccccc;
  --thx-color-grey-ddd: #dddddd;
  --thx-color-grey-eee: #eeeeee;
  --thx-color-white:    #ffffff;

  /* ─── System / secondary ramps ────────────────────────────────── */
  /* Yellow — warn */
  --thx-color-yellow-100: #fff8e6;
  --thx-color-yellow-200: #ffe9b3;
  --thx-color-yellow-300: #ffdb80;
  --thx-color-yellow-400: #ffcc4d;
  --thx-color-yellow-500: #ffb600;
  --thx-color-yellow-600: #cc9200;
  --thx-color-yellow-700: #916208;
  --thx-color-yellow-800: #664900;
  --thx-color-yellow-900: #332400;

  /* Orange — notice */
  --thx-color-orange-100: #fff0e6;
  --thx-color-orange-200: #ffd1b3;
  --thx-color-orange-300: #ffb380;
  --thx-color-orange-400: #ff8533;
  --thx-color-orange-500: #ff6600;
  --thx-color-orange-600: #cc5200;
  --thx-color-orange-700: #993d00;
  --thx-color-orange-800: #662900;
  --thx-color-orange-900: #331400;

  /* Green — ok */
  --thx-color-green-100: #E8F9EF;
  --thx-color-green-200: #b9ecce;
  --thx-color-green-300: #73da9d;
  --thx-color-green-400: #44cd7d;
  --thx-color-green-500: #15C15C;
  --thx-color-green-600: #119a4a;
  --thx-color-green-700: #0d7437;
  --thx-color-green-800: #084d25;
  --thx-color-green-900: #042712;

  /* Purple — info */
  --thx-color-purple-100: #f9eeff;
  --thx-color-purple-200: #eeccff;
  --thx-color-purple-300: #e2aaff;
  --thx-color-purple-400: #d688ff;
  --thx-color-purple-500: #C555FF;
  --thx-color-purple-600: #9e44cc;
  --thx-color-purple-700: #763399;
  --thx-color-purple-800: #4f2266;
  --thx-color-purple-900: #271133;

  /* ─── Semantic tokens (use these in components) ───────────────── */
  --thx-bg:                 var(--thx-color-white);
  --thx-text:               var(--thx-color-threshold-blue);
  --thx-text-muted:         var(--thx-color-grey-666);
  --thx-surface:            var(--thx-color-grey-eee);
  --thx-divider:            var(--thx-color-grey-ddd);
  --thx-interactive:        var(--thx-color-lapis);
  --thx-interactive-hover:  var(--thx-color-lapis);     /* override per-surface (editorial nav-popup uses crimson) */
  --thx-status-ok:          var(--thx-color-green-500);
  --thx-status-warn:        var(--thx-color-yellow-500);
  --thx-status-error:       var(--thx-color-crimson);
  --thx-status-info:        var(--thx-color-purple-500);

  /* ─── Typography ──────────────────────────────────────────────── */
  --thx-font-body:     'Basier Circle', Roboto, system-ui, -apple-system, sans-serif;
  --thx-font-headline: 'Inter', 'Basier Circle', Roboto, sans-serif;
  --thx-font-mono:     ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --thx-fw-regular:  400;
  --thx-fw-medium:   500;
  --thx-fw-semibold: 600;
  --thx-fw-bold:     700;

  --thx-fs-body:    16px;
  --thx-fs-small:   14px;
  --thx-fs-meta:    13px;
  --thx-fs-h4:      18px;
  --thx-fs-h3:      24px;
  --thx-fs-h2:      36px;
  --thx-fs-h1:      56px;
  --thx-lh-body:    1.6;
  --thx-lh-heading: 1.15;

  /* ─── Radii ───────────────────────────────────────────────────── */
  /* Ladder: 4 / 5 / 6 / 8 / 10 / 12 — derived from a census of the
     live editorial site. Anything outside this ladder needs an
     explicit deviation in doctrine/design/11-surface-rules.md.       */
  --thx-radius-tag:       4px;
  --thx-radius-code:      4px;
  --thx-radius-lightbox:  4px;
  --thx-radius-image:     5px;
  --thx-radius-card-sm:   6px;
  --thx-radius-card:      8px;
  --thx-radius-button:    8px;
  --thx-radius-gallery:  10px;
  --thx-radius-modal:    10px;
  --thx-radius-promo:    12px;
  --thx-radius-pill:   9999px;
  --thx-radius-circle:   50%;

  /* ─── Spacing ladder (4px base) ───────────────────────────────── */
  --thx-space-0:  0;
  --thx-space-1:  4px;
  --thx-space-2:  8px;
  --thx-space-3:  12px;
  --thx-space-4:  16px;
  --thx-space-5:  24px;
  --thx-space-6:  32px;
  --thx-space-7:  48px;
  --thx-space-8:  64px;
  --thx-space-9:  96px;
  --thx-space-10: 128px;

  /* ─── Motion ──────────────────────────────────────────────────── */
  --thx-dur-fast:    0.15s;
  --thx-dur-default: 0.2s;
  --thx-dur-slow:    0.3s;
  --thx-ease:        ease-in-out;
  --thx-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── Elevation (shadows — used sparingly) ────────────────────── */
  --thx-shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.06);
  --thx-shadow-dropdown:   0 4px 16px rgba(0, 0, 0, 0.10);
  --thx-shadow-modal:      0 8px 32px rgba(0, 0, 0, 0.16);

  /* ─── Breakpoints (reference values; CSS media queries spell them inline) ─ */
  --thx-bp-xs:  480px;
  --thx-bp-sm:  768px;
  --thx-bp-md:  1024px;
  --thx-bp-lg:  1280px;
  --thx-bp-xl:  1536px;
}

/* ─── Dark mode (semantic re-point) ─────────────────────────────── */
[data-theme="dark"],
.dark-mode {
  --thx-bg:        var(--thx-color-threshold-blue);
  --thx-text:      var(--thx-color-white);
  --thx-text-muted: var(--thx-color-grey-ccc);
  --thx-surface:   #0a2238;
  --thx-divider:   var(--thx-color-grey-444);
}

/* ─── LevelUp theme ─────────────────────────────────────────────── */
[data-theme="levelup"] {
  --thx-interactive:       var(--thx-color-crimson);
  --thx-interactive-hover: #a01430; /* crimson 700 — derive properly when palette extends */
}

/* ─── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --thx-dur-fast:    0s;
    --thx-dur-default: 0s;
    --thx-dur-slow:    0s;
  }
}

/* ─── Default focus ring ────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--thx-color-lapis);
  outline-offset: 2px;
}