/* UPP design tokens — the one place colour, type and spacing are defined.
 *
 * Rule (documentation/50-design-system.md): components read tokens; no wing
 * hard-codes a colour. Both themes are first-class — prefers-color-scheme is the
 * default, and the account's saved choice stamps data-theme on <html> and wins.
 *
 * No webfonts: an airgapped app must not fetch a CDN face (roadmap §6). The
 * system stacks below are the deliberate choice, not a fallback. */

:root {
  /* Neutrals — cool slate, biased toward the accent so grey reads as chosen. */
  --bg:        #eef1f4;
  --surface:   #ffffff;
  --surface-2: #f6f8fa;
  --border:    #d6dde4;
  --border-strong: #c1ccd6;
  --text:      #1a2129;
  --text-dim:  #5a6773;
  --text-faint:#8996a3;

  /* One accent, for everything interactive — a control-panel teal-cyan. */
  --accent:      #12857c;
  --accent-hover:#0e6f68;
  --accent-weak: #d6ece9;
  --on-accent:   #ffffff;

  /* Semantic — distinct from the accent hue. */
  --ok:   #2f8f4e;
  --warn: #b5820f;
  --crit: #c23b34;

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
             sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", "JetBrains Mono",
               Menlo, Consolas, monospace;

  /* Type scale — 1.20 minor third off a 15px base (denser than reading text;
     this is a console). */
  --fs-xs: 0.72rem;
  --fs-sm: 0.82rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.06rem;
  --fs-lg: 1.35rem;
  --fs-xl: 1.85rem;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;

  --radius: 8px;
  --radius-sm: 5px;
  --radius-lg: 14px;

  --shadow: 0 1px 2px rgba(20, 30, 40, 0.06),
            0 4px 16px rgba(20, 30, 40, 0.06);
  --ring: 0 0 0 3px var(--accent-weak);
}

/* Dark, as the OS default … */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0f141a;
    --surface:   #171e26;
    --surface-2: #1d2630;
    --border:    #2a343f;
    --border-strong: #3a4753;
    --text:      #e5ecf2;
    --text-dim:  #9aa8b5;
    --text-faint:#6b7883;

    --accent:      #2bb3a6;
    --accent-hover:#3ac6b8;
    --accent-weak: #11332f;
    --on-accent:   #07110f;

    --ok:   #4fb26e;
    --warn: #d6a52f;
    --crit: #e26058;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
              0 6px 20px rgba(0, 0, 0, 0.35);
    --ring: 0 0 0 3px rgba(43, 179, 166, 0.3);
  }
}

/* … and the account's explicit choice overrides the OS in both directions. */
:root[data-theme="light"] {
  --bg:        #eef1f4;
  --surface:   #ffffff;
  --surface-2: #f6f8fa;
  --border:    #d6dde4;
  --border-strong: #c1ccd6;
  --text:      #1a2129;
  --text-dim:  #5a6773;
  --text-faint:#8996a3;
  --accent:      #12857c;
  --accent-hover:#0e6f68;
  --accent-weak: #d6ece9;
  --on-accent:   #ffffff;
  --ok:   #2f8f4e;
  --warn: #b5820f;
  --crit: #c23b34;
  --shadow: 0 1px 2px rgba(20, 30, 40, 0.06),
            0 4px 16px rgba(20, 30, 40, 0.06);
  --ring: 0 0 0 3px var(--accent-weak);
}

:root[data-theme="dark"] {
  --bg:        #0f141a;
  --surface:   #171e26;
  --surface-2: #1d2630;
  --border:    #2a343f;
  --border-strong: #3a4753;
  --text:      #e5ecf2;
  --text-dim:  #9aa8b5;
  --text-faint:#6b7883;
  --accent:      #2bb3a6;
  --accent-hover:#3ac6b8;
  --accent-weak: #11332f;
  --on-accent:   #07110f;
  --ok:   #4fb26e;
  --warn: #d6a52f;
  --crit: #e26058;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
            0 6px 20px rgba(0, 0, 0, 0.35);
  --ring: 0 0 0 3px rgba(43, 179, 166, 0.3);
}

/* ── Reserved palettes ───────────────────────────────────────────────────────
 * Two 10-colour sets, kept apart by WEIGHT so a generation colour never reads as
 * a panel colour: generation is bold/saturated, the rest muted/soft. Both are
 * theme-aware. A new wing claims the next free slot and points its --wing-<slug>
 * at it below — it never hard-codes a hex. See documentation/50-design-system.md. */
:root {
  /* generation — bold (generators).  live: drop=1 emd=2 pbn=7 · reserved: 3-6,8-10 */
  --gen-1:#ba4a2c; --gen-2:#ba7f2c; --gen-3:#a2ba2c; --gen-4:#4fba2c;  --gen-5:#2cba5b;
  --gen-6:#2cbaa7; --gen-7:#2c73ba; --gen-8:#432cba; --gen-9:#a22cba; --gen-10:#ba2c73;
  /* rest — muted (sections). live: hreflang=5 generate=7 links=8 chain=9 admin=10 */
  --rest-1:#a76f52; --rest-2:#a7a052; --rest-3:#7da752; --rest-4:#52a752;  --rest-5:#52a777;
  --rest-6:#52a3a7; --rest-7:#526fa7; --rest-8:#7252a7; --rest-9:#a752a7; --rest-10:#a75270;
}
@media (prefers-color-scheme: dark) { :root {
  --gen-1:#d67e66; --gen-2:#d6a766; --gen-3:#c4d666; --gen-4:#82d666;  --gen-5:#66d68b;
  --gen-6:#66d6c7; --gen-7:#669ed6; --gen-8:#7966d6; --gen-9:#c466d6; --gen-10:#d6669e;
  --rest-1:#cb9d86; --rest-2:#cbc586; --rest-3:#a8cb86; --rest-4:#86cb86;  --rest-5:#86cba4;
  --rest-6:#86c8cb; --rest-7:#869dcb; --rest-8:#9f86cb; --rest-9:#cb86cb; --rest-10:#cb869e;
} }
:root[data-theme="light"] {
  --gen-1:#ba4a2c; --gen-2:#ba7f2c; --gen-3:#a2ba2c; --gen-4:#4fba2c;  --gen-5:#2cba5b;
  --gen-6:#2cbaa7; --gen-7:#2c73ba; --gen-8:#432cba; --gen-9:#a22cba; --gen-10:#ba2c73;
  --rest-1:#a76f52; --rest-2:#a7a052; --rest-3:#7da752; --rest-4:#52a752;  --rest-5:#52a777;
  --rest-6:#52a3a7; --rest-7:#526fa7; --rest-8:#7252a7; --rest-9:#a752a7; --rest-10:#a75270;
}
:root[data-theme="dark"] {
  --gen-1:#d67e66; --gen-2:#d6a766; --gen-3:#c4d666; --gen-4:#82d666;  --gen-5:#66d68b;
  --gen-6:#66d6c7; --gen-7:#669ed6; --gen-8:#7966d6; --gen-9:#c466d6; --gen-10:#d6669e;
  --rest-1:#cb9d86; --rest-2:#cbc586; --rest-3:#a8cb86; --rest-4:#86cb86;  --rest-5:#86cba4;
  --rest-6:#86c8cb; --rest-7:#869dcb; --rest-8:#9f86cb; --rest-9:#cb86cb; --rest-10:#cb869e;
}

/* Live wing identities → reserved slots (theme follows the slot automatically). */
:root {
  --wing-box:      var(--gen-1);   /* EMD boxes, as a group */
  --wing-emd:      var(--gen-2);
  --wing-pbn:      var(--gen-7);
  --wing-hreflang: var(--rest-5);
  --wing-generate: var(--rest-7);
  --wing-links:    var(--rest-8);
  --wing-chain:    var(--rest-9);
  --wing-admin:    var(--rest-10);
}