/* ============================================================
   STR.systems — design tokens
   Owned by the parent brand. Consumed by steward/ today;
   index.html migrates onto this later (it currently carries
   30+ hardcoded hexes and no custom properties).

   Dark only, by decision (owner, 2026-08-13). Not a default and
   not a toggle: the use scene is an operator checking a turnover
   on a phone, usually at night, already inside a dark messaging
   client. No light palette is carried here — an unused one rots.
   str.systems adds its own when it migrates, against real needs.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- ground & surfaces ---------------------------------- */
  --ground:        #0e1621;  /* the page floor */
  --surface:       #17212b;  /* bars, panels, list groups */
  --surface-2:     #212d3b;  /* incoming message — matched to the live client */
  --surface-3:     #2b3a4b;  /* raised / hovered row */
  --line:          #2c3a49;
  --line-soft:     #26323f;

  /* ---- ink ------------------------------------------------ */
  --ink:           #ffffff;
  --ink-2:         #a9b6c4;  /* body on dark, ~8:1 */
  --ink-3:         #7d8b99;  /* tertiary, timestamps, ~5:1 */

  /* ---- brand ---------------------------------------------- */
  /* Brass is Steward's own. The structure is borrowed; the
     identity is not. Never let the link blue carry the brand. */
  --accent:        #e0a94a;
  --accent-soft:   #f0c67e;
  --accent-wash:   rgba(224, 169, 74, 0.12);
  --accent-line:   rgba(224, 169, 74, 0.32);
  --on-accent:     #17120a;

  --link:          #62bcf9;

  /* ---- message bubbles ------------------------------------ */
  --msg-in:        var(--surface-2);
  --msg-in-ink:    var(--ink);
  --msg-out:       #3a6ea8;
  --msg-out-ink:   #ffffff;
  --msg-out-meta:  #c8ddf2;

  /* ---- status --------------------------------------------- */
  --ok:            #5cc47c;
  --ok-wash:       rgba(92, 196, 124, 0.12);
  --alert:         #e5695f;
  --alert-wash:    rgba(229, 105, 95, 0.12);

  /* ---- translucent chrome (the iOS bar material) ---------- */
  --veil:          rgba(14, 22, 33, 0.72);
  --veil-line:     rgba(255, 255, 255, 0.07);

  /* ---- type ----------------------------------------------- */
  /* UI runs on the platform stack because that is authentically
     what this world is set in. Display runs on Golos Text:
     Cyrillic-native (a Russian edition is planned), institutional
     rather than fashionable, and self-hosted. */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Golos Text", var(--font-ui);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --t-display: clamp(2.5rem, 10vw, 4rem);
  --t-h2:      clamp(1.25rem, 4.2vw, 1.55rem);
  --t-h3:      clamp(1.1rem, 3.4vw, 1.3rem);
  --t-body:    1.0625rem;   /* 17px — the platform reading size */
  --t-sm:      0.9375rem;
  --t-xs:      0.8125rem;
  --t-micro:   0.6875rem;

  --lh-tight:  1.08;
  --lh-snug:   1.3;
  --lh-body:   1.55;

  --tr-display: -0.028em;
  --tr-h2:      -0.02em;

  /* ---- space (4px base) ----------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;

  --measure: 66ch;

  /* ---- radii ---------------------------------------------- */
  --r-bubble: 17px;   /* measured off the iOS client */
  --r-tail:   4px;    /* the squared corner on the tail side */
  --r-group:  12px;   /* settings/list groups */
  --r-pill:   999px;
  --r-btn:    10px;

  /* ---- depth ---------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.34);
  --shadow-2: 0 6px 18px -6px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 18px 42px -14px rgba(0, 0, 0, 0.62);
  /* a title bubble sits nearer the viewer than the thread behind it */
  --shadow-lift: 0 2px 6px rgba(0,0,0,.34), 0 22px 48px -16px rgba(0,0,0,.72);

  /* ---- motion --------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 520ms;
}