/* ============================================================
   nimbus — design tokens
   eternalcloud's personal design system
   White ground. Two lights on it. Buttons you can press.
   ------------------------------------------------------------
   Naming rule: tokens are named by PURPOSE, never by hue.
   Provenance: comments cite the project each value was
   distilled from — this system was extracted, not invented.

   THE WHITE-BASE RULE
   The page is white. moon and honey go ON the white as type,
   rules, dots, edges and small bounded fills — never behind a
   whole layout. Separation comes from hairlines and space, not
   from tinted grounds. The night sky is still here, but it is
   an opt-in theme now: [data-theme="night"].
   (Discipline borrowed from the Azalea brand system, which
   holds the same line for the same reason: brand colour reads
   as brand colour only when it is scarce.)
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Surfaces ---------------------------------------------
     On white there is no layering upward — white is the top.
     Cards are the same white as the page and are separated by a
     drawn edge. There is exactly ONE fill step, and it goes
     down: --panel-2 is the sunken tone for inputs, quiet keys
     and raised pills. Resist adding a second. */
  --bg:       #FFFFFF;   /* the page — always white, no exceptions */
  --panel:    #FFFFFF;   /* a card: same white, held by a hairline */
  --panel-2:  #F3F5FA;   /* the one sunken step (cool, night-sky cast) */
  --hairline: #DFE4EF;   /* edges are drawn, not shaded */
  --hairline-strong: #C6CDDE;  /* the hard bottom edge of a quiet key */

  /* ---- Ink (never pure black; the base is white, the ink is
     not its opposite — it keeps the night-sky cast) ---------- */
  --ink:   #151922;
  --dim:   #5A6478;
  --faint: #767F94;

  /* ---- The two lights ---------------------------------------
     moon  = every interactive thing: links, buttons, focus,
             active filters. Re-tuned from the dark-ground value
             (#82A7FF) for legibility on white — same family,
             own value.
     honey = identity only: the sigil, text selection, the
             pinned/current marker. --honey is the graphic fill;
             --honey-deep is honey as TEXT on a light ground.
     House rule: honey never becomes a button.
     House rule: nothing glows except the nimbus.
     House rule: neither light ever becomes the page. */
  --moon:       #3B63D6;
  --moon-deep:  #2C4BA6;   /* the pressed edge of a moon button */
  --moon-ink:   #FFFFFF;   /* text sitting on a moon fill */
  --moon-tint:  rgba(59, 99, 214, .10);
  --honey:      #E7AE2E;
  --honey-deep: #8A6410;
  --honey-tint: rgba(231, 174, 46, .20);

  /* ---- Status (semantic; separate from the two lights)
     Each value clears 4.5:1 against its own tint, because the
     status pill is 11px uppercase and has nowhere to hide. */
  --ok:    #17784C;
  --warn:  #8C5B04;
  --alert: #B23A31;
  --ok-tint:    rgba(23, 120, 76, .12);
  --warn-tint:  rgba(140, 91, 4, .12);
  --alert-tint: rgba(178, 58, 49, .12);

  /* ---- Shape: lightly rounded, never blobby; pills are pills.
     8 on controls, 12 on cards, 16 on panels — codekanban,
     trello-tagged-dashboard, and the Azalea work all agree. */
  --radius-ctl:   8px;
  --radius-card:  12px;
  --radius-panel: 16px;
  --radius-pill:  999px;

  /* ---- Depth: on white, shadow is the junior partner — the
     hairline does the separating and the shadow only says
     "this is above". --press (the pogo-kids 0 2px 0 key edge)
     is the exception: it is a hard edge, not a shade. */
  --shadow-rest: 0 1px 2px rgba(21, 25, 34, .05);
  --shadow-lift: 0 8px 24px rgba(21, 25, 34, .10);

  /* ---- Type: the display face is a guest; the body is the
     house. Space Grotesk + JetBrains Mono are self-hosted
     (codekanban vendor/); body text never waits for a webfont.
     Mono is reserved for data: metrics, hex, timestamps. */
  --display: "Space Grotesk", var(--body);
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
          Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono",
          Consolas, monospace;

  /* type scale — compact by default (codekanban runs 12–13px) */
  --text-hero:  clamp(34px, 5vw, 52px);
  --text-title: 22px;
  --text-lead:  16px;
  --text-body:  14px;
  --text-data:  12.5px;
  --text-micro: 11px;      /* always uppercase, tracked out */
  --track-micro: .08em;

  /* spacing — 4px base */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;  --s8: 72px;

  /* motion — quick and functional; 120–320ms, nothing loops
     except the sigil's breathing */
  --fast: 120ms ease;
  --calm: 240ms ease;
}

/* ---- night theme (opt-in) ----------------------------------
   Where nimbus started: codekanban (#14161A) and double-ttt
   (#0b1220) met in the middle and nudged toward night-sky blue.
   Layered, never pure black; each layer one step brighter.

   This is an escape hatch, not the default. Reach for it when a
   surface is genuinely meant to be dark — a focused editor, a
   viewer, a thing you stare at at 1am — not to give a product
   "personality". The white base is the house. */
[data-theme="night"] {
  color-scheme: dark;

  --bg:       #10131C;   /* the sky */
  --panel:    #171C29;   /* a card floating on it */
  --panel-2:  #1E2434;   /* a card on a card */
  --hairline: #2B3347;
  --hairline-strong: #3B4560;

  --ink:   #E9ECF4;
  --dim:   #9AA4B8;
  --faint: #667186;

  --moon:       #82A7FF;
  --moon-deep:  #4A6CC7;
  --moon-ink:   #0E1524;
  --moon-tint:  rgba(130, 167, 255, .13);
  --honey:      #F2C14E;
  --honey-deep: #F2C14E;   /* on a dark ground, honey IS the ink */
  --honey-tint: rgba(242, 193, 78, .16);

  --ok:    #4CC38A;
  --warn:  #E5A13A;
  --alert: #E5645A;
  --ok-tint:    rgba(76, 195, 138, .13);
  --warn-tint:  rgba(229, 161, 58, .13);
  --alert-tint: rgba(229, 100, 90, .13);

  --shadow-rest: 0 1px 2px rgba(0, 0, 0, .25);
  --shadow-lift: 0 6px 18px rgba(0, 0, 0, .35);
}