/* ================= THE SUITE — TOKENS =================
   `alt` is historical (an early alternate presentation) and kept so `.alt-app`/`.a-*`/CSS/alt/
   all still say "the Suite's own layer" — read it that way, never as a trial. Scoped to
   `.alt-app`, carried by tasks/notes/calendar/team_board/okrs.html (one shell) and admin.html
   (wearing it over the console); the classic pages and mobile.html do not carry the class.
   mobile.html DOES mirror this geometry locally, at the same values (sys_design-system §14a,
   application-font.test.js) — change a radius, spacing step or shadow here and update it there
   too, or they drift. Builds on CSS/tokens.css's canonical palette rather than replacing it:
   these are ROLES pointing at canonical colours, plus what this layout needs that the current
   one doesn't (a spacing scale, control heights, a row height, two elevations). */

.alt-app{
  /* ---- surfaces ---- */
  --a-bg:var(--bg);
  --a-panel:var(--panel);
  --a-raised:var(--panel-2);
  /* One step above --panel-2 for things that float: menus, the drawer header, a selected row.
     Composited rather than a new hex so it tracks both themes. */
  /* Percentages must sum to 100 or the colour comes out translucent — color-mix() with
     percentages under 100 keeps their ratio but multiplies the result's alpha by the sum (88+4
     gave alpha 0.92, letting the page show through every floating surface). The plain
     declaration above is the fallback for an engine with no color-mix() — not decoration: that
     engine discards the WHOLE custom property without it. */
  --a-float:var(--panel-2);
  --a-float:color-mix(in srgb, var(--panel-2) 96%, var(--text) 4%);
  --a-line:var(--border);
  --a-line-soft:var(--border-soft);
  --a-line-strong:var(--border-strong);

  /* ---- text ---- */
  --a-text:var(--text);
  --a-dim:var(--text-dim);
  --a-faint:var(--text-faint);

  /* ---- roles ---- */
  --a-blue:var(--accent);
  --a-blue-fill:var(--accent-fill);
  --a-blue-text:var(--accent-text);
  --a-blue-soft:var(--accent-soft);
  /* Gold is emphasis, never status — the wireframes use it for the star, the brand mark and the
     one figure worth looking at first; nothing else in this product means "gold" as a state. */
  --a-gold:#f5a623;
  --a-gold-soft:rgba(245,166,35,.16);
  --a-green:var(--green-text);
  --a-green-soft:var(--green-soft);
  --a-amber:var(--warn-text);
  --a-amber-soft:var(--yellow-soft);
  --a-red:var(--red-text);
  --a-red-soft:var(--red-soft);
  --a-purple:var(--purple-text);
  --a-purple-soft:var(--purple-soft);
  --a-ring:var(--focus-ring);

  /* ---- spacing: a 4px scale, named by use rather than by number ---- */
  --a-1:4px; --a-2:8px; --a-3:12px; --a-4:16px; --a-5:20px; --a-6:24px; --a-8:32px;

  /* ---- radii ---- */
  --a-r-sm:6px; --a-r:9px; --a-r-lg:14px; --a-r-pill:999px;

  /* ---- heights. One control height everywhere, so a row of a select, a chip, a button and a
     field reads as one row — the rule the production board learned the hard way. ---- */
  --a-ctl:32px;
  --a-ctl-lg:36px;
  --a-row:44px;

  /* ---- elevation ---- */
  --a-shadow:0 10px 30px rgba(0,0,0,.34);
  --a-shadow-sm:0 4px 14px rgba(0,0,0,.22);
  /* The dialog's own, deeper than a card's: it sits over the whole page rather than on it. */
  --a-shadow-lg:0 24px 60px rgba(0,0,0,.46);

  /* ---- motion. The canonical durations, so reduced-motion is answered once. ---- */
  --a-quick:var(--dur-quick, 160ms);
  --a-ease:var(--ease-out, cubic-bezier(.2,.7,.3,1));

  /* ---- type: roles point at CSS/tokens.css's canonical font stacks (the reader's chosen
     `:root[data-app-font]` block), so a literal stack here would be a second answer to "what
     face is the app in". `--a-mono` isn't part of it — fixed advance width is required for
     aligned figures, never a preference. ---- */
  --a-display:var(--app-font-display, 'Space Grotesk', system-ui, sans-serif);
  --a-body:var(--app-font, 'Inter', system-ui, -apple-system, sans-serif);
  --a-mono:'JetBrains Mono', ui-monospace, monospace;
}

/* The team's custom theme comes free too — JS/core/theme-custom.js writes inline custom
   properties on <html>, so `--a-panel` follows `--panel` with nothing here to re-measure. The
   two exceptions below (`--a-float`, a mix, composites automatically; `--a-gold`, deliberately
   NOT derived — emphasis, never status) are also the only two restated for light mode; every
   other role gets light mode free from its canonical token. */
/* Compound selector — sys_design-system.md "The Suite's token layer": `.alt-app` IS the body
   here, so a plain descendant form (`body.theme-light .alt-app`) never matched; measured zero
   effect in light mode until fixed (gold stayed at dark's 2.03:1 contrast instead of 4.17:1).
   Both the `:root` and `body` forms are needed because the pre-paint boot script can only stamp
   `<html>` before `<body>` parses. */
:root.theme-light .alt-app,
:root.theme-light.alt-app,
body.theme-light.alt-app,
body.theme-light .alt-app{
  /* Plain declaration first, for the same reason as the dark half above. */
  --a-float:var(--panel-2);
  --a-float:color-mix(in srgb, var(--panel-2) 97%, #000 3%);
  --a-gold:#b06d05;
  --a-gold-soft:rgba(176,109,5,.14);
  --a-shadow:0 10px 30px rgba(19,32,54,.14);
  --a-shadow-sm:0 4px 14px rgba(19,32,54,.10);
  --a-shadow-lg:0 24px 60px rgba(19,32,54,.22);
}

/* ================= SOMEBODY WHO ASKED FOR LESS MOVEMENT GETS LESS MOVEMENT =================
   One override at the TOKEN rather than a block per stylesheet — almost every transition reads
   `var(--a-quick)`/`--dur-progress`, so zeroing them here settles all of them, including the
   next one somebody writes. `0s` is safe here (unlike CSS/components.css's classic modals,
   which use `1ms`) because nothing in JS/alt/ listens for `transitionend` — if that changes,
   this becomes `1ms` too. Not scoped to a theme or page: `.alt-app` is on all three, and the
   request is about the person. */
@media (prefers-reduced-motion: reduce){
  .alt-app{
    --a-quick:0s;
    --dur-quick:0s;
    --dur-micro:0s;
    --dur-surface:0s;
    --dur-exit:0s;
    --dur-progress:0s;
  }
  /* The two places a duration is written as a literal rather than through a token. */
  .alt-app .a-scrim > *{ animation:none; }
  .alt-app *{ scroll-behavior:auto; }
}