/* TeleJACT — Earthy Modular Hybrid tokens.
   Lifted from "TeleJACT Web.dc.html" (Claude Design project c6def5c3).
   The Nocturne _ds bundle that the canvas links is a dark system the design
   overrides wholesale, so the values below — not Nocturne's — are the source
   of truth for this app. */

:root {
  /* — grounds — */
  --canvas: #E4E1D6;        /* the page behind the app frame */
  --ground: #EFEDE4;        /* app ground */
  --rail: #F3EFE6;          /* left rail, inspector grounds */
  --surface: #FAF9F5;       /* cards, inputs, raised rows */
  --surface-sunk: #F5F2EA;  /* nested / secondary blocks */

  /* — ink —
     Most text in the design is rgba over the ground rather than a flat hex,
     so the ink channel is exposed as an rgb triple to mix against. */
  --ink: #2E2B23;
  --ink-rgb: 62, 58, 47;
  --ink-85: rgba(62, 58, 47, 0.85);
  --ink-75: rgba(62, 58, 47, 0.75);
  --ink-60: rgba(62, 58, 47, 0.60);
  --ink-50: rgba(62, 58, 47, 0.50);
  --ink-45: rgba(62, 58, 47, 0.45);
  --ink-40: rgba(62, 58, 47, 0.40);
  --ink-35: rgba(62, 58, 47, 0.35);

  /* — accent: sage — */
  --accent: #7E9269;
  --accent-deep: #55693F;
  --accent-deeper: #41522F;
  --accent-ink: #38452C;
  --accent-tint: #DCE3D1;   /* solid chip fill */
  --accent-wash: #E3E8DA;   /* avatar / bubble fill */
  --accent-soft: rgba(126, 146, 105, 0.12);
  --accent-softer: rgba(126, 146, 105, 0.06);

  /* — status — */
  --warn: #B87A4E;          /* a number that needs a look */
  --warn-bg: #F0DECD;
  --warn-ink: #8A4F2E;
  --danger: #B5563C;
  --danger-rgb: 181, 86, 60;
  --danger-soft: rgba(181, 86, 60, 0.10);   /* quiet-danger hover wash, mirrors --accent-soft */
  --danger-tint: rgba(181, 86, 60, 0.55);   /* quiet-danger resting ink — same 55% the .ex__row
                                                icon hack used, now a token instead of a bare opacity */

  /* — neutrals — */
  --chip: #EDEAE0;
  --chip-ink: #57523F;
  --edge: #E2DFD5;
  --edge-ink: #7C766A;
  --track: #EDEAE0;         /* progress-bar track */

  /* — lines — */
  --line: rgba(62, 58, 47, 0.08);
  --line-soft: rgba(62, 58, 47, 0.07);
  --line-strong: rgba(62, 58, 47, 0.12);
  --line-field: rgba(62, 58, 47, 0.12);
  --line-btn: rgba(62, 58, 47, 0.16);

  /* — type — */
  --font: Inter, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* — radii — */
  --r-xs: 5px;
  --r-sm: 6px;
  --r-md: 7px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-card: 12px;   /* contract §2 — cards 12, controls 8 */
  --r-bubble: 12px;

  /* — elevation — */
  --edge-ring: 0 0 0 1px var(--edge);
  --edge-ring-accent: 0 0 0 1px var(--accent-tint);
  --lift: 0 0 0 1px var(--edge), 0 16px 40px rgba(62, 58, 47, 0.10);

  /* — type scale —
     Named so a future size is picked from the scale rather than typed. The
     canvas was drawn at 1440 and read zoomed-out in a design tool; in a real
     browser at 100% these are the sizes that are actually legible. */
  --fs-micro: 13px;   /* mono kickers, chart ticks */
  --fs-small: 13px;   /* secondary metadata */
  --fs-body: 14px;    /* table cells, most copy */
  --fs-base: 16px;    /* default */
  --fs-lead: 17px;    /* card titles */
  --fs-h3: 20px;
  --fs-h2: 23px;
  --fs-h1: 30px;

  /* — layout — */
  --rail-w: 220px;
  /* The app is a desktop surface, not a fluid site: past this it stops
     stretching and centres, so a 27" monitor does not turn a roster row into
     a metre of whitespace with a name at each end. */
  --content-max: 1720px;
  --app-min-w: 1180px;   /* fits a 1280 laptop without sideways scroll */   /* rail + the roster's fixed columns at their design widths */
}