/* ============================================================================
   Theme set `suite` — the SHARED set. One list of named themes offered by several
   pages, so a theme picked on one of them is the theme on all of them.

   Every other set in this folder belongs to one product and names its own themes,
   so a pick made there only carries to another page as a light/dark scheme (the
   fallback in commons/theme-preload.js). `suite` is the opposite: the SAME five
   ids on every page that opts in, so the stored id is offered everywhere and the
   look follows the visitor from page to page.

     craftian   light   pastel glass, purple accent (the house style)
     porcelain  light   ivory editorial, teal accent, serif headings
     carbon     dark    graphite workbench, indigo accent
     nocturne   dark    dark glass, cyan / violet / pink accent
     phosphor   dark    green-tinted terminal dark, phosphor green accent

   The order above is the picker's order and it is load-bearing: a visitor arriving
   with a theme this set does not offer lands on the FIRST theme of their scheme,
   so `craftian` is the light landing and `carbon` the dark one.

   HOW A PAGE JOINS (it edits no shared file, exactly like any other set)
     1. <html lang="en" data-theme-set="suite">   (optionally data-theme-default="<id>")
     2. In <head>, synchronously, in this order, before the page's own CSS:
          <script src="/commons/theme-preload.js"></script>
          <link rel="stylesheet" href="/commons/themes/suite.css">
          <script src="/commons/themes/suite.js"></script>
     3. Style from the vocabulary listed below and from nothing else: the contract
        tokens (see the TOKEN CONTRACT in commons/craftian-ui.css) and the `--suite-*`
        tokens. This file is the ONE palette source of the set, so a skinned page (one
        layout, five palettes) ships a structural stylesheet that names no colour and
        needs NO palette file of its own. What it does ship is its per-theme character:
        a rule for one theme only is written
        [data-theme-set="suite"][data-theme="<id>"] .thing{…}
        in the PAGE's stylesheet, never here.
     4. Mount the shared top bar (commons/craftian-topbar.js, with commons/craftian-ui.css
        loaded before the page's own CSS). On this set it is the unified bar, styled per
        theme, and it mounts the ONE theme picker with the palette icon on its own. An
        editor that keeps a compact bar of its own calls
        CraftianTheme.mountPicker(button) from commons/theme-picker.js instead. A page
        never builds a theme menu of its own.
     5. Size a full-height region below the bar with  var(--ctb-h, 64px) : the bar's
        height differs per theme and --ctb-h is where it is published.
     The step-by-step for moving a whole page onto the set (the briefs, the two
     migration paths, the tests, the browser harness and the traps) is the repo's
     docs/SUITE-MIGRATION.md.

   WHAT A PAGE MUST NOT DO
     - Keep a second storage key for its theme. The one key is 'craftian.theme',
       written only through CraftianTheme.set(id).
     - Add a theme id here that only it can render. A theme in this set is a promise
       that EVERY page on the set has a palette for it, so adding one means adding
       it on all of them in the same change.
     - Rename an id. The id is what is stored in every visitor's browser.

   ADDING A THEME TO THE SET
     One palette block below (both selector arms, every contract token and every
     `--suite-*` token, the matching color-scheme), one line in suite.js (canvas =
     that block's --page), then on every page that is on the set its character rules
     for the new id and a value for each private remainder listed at the end of this
     header.

   THE VOCABULARY (what a page on the set reads; every theme defines all of it)
     Contract tokens, shared with every other set (the full list and its rules are
     the TOKEN CONTRACT in commons/craftian-ui.css). The ones a skin leans on:
       --page                        the canvas, and the no-flash colour in suite.js
       --surface --surface-2 --surface-3   opaque surfaces, from raised to tinted
       --card --screen               a card, and a well set into the page
       --glass                       the translucent surface (pair with --suite-blur)
       --border --border-2 --line    the standard, lighter and hairline rules
       --track                       the unfilled part of a meter or a skeleton
       --ink --ink-soft --ink-faint  body, secondary and faint text
       --brand-ink                   TITLE ink: headings and names, the strongest text
       --accent                      the one accent, as a flat colour
       --accent-ink --accent-ink2    the accent as text or an icon on a surface
       --primary                     the accent FILL of a primary button (a gradient
                                     in craftian and phosphor): a background, never
                                     a colour
       --ring                        the focus outline, and a hovered border: a SOLID
                                     colour in every theme
       --shadow --shadow-sm          a floating surface, and a resting one
       --spring --ease               the two easings

     Set tokens, prefixed so they never collide with a contract token.
     surfaces
       --suite-panel                 a panel's fill
       --suite-panel-shadow          the shadow, hairline ring or glow that goes with it
       --suite-tile                  a quiet inset block inside a panel
       --suite-ctl                   a control at rest: button, field, select
       --suite-hover                 the hover wash of a row, a tile or a control
       --suite-menu                  a popover, a menu, a dialog, a drawer
       --suite-scrim                 the veil behind a dialog or a drawer
       --suite-code-bg               a code block or a data well
       --suite-code-ink              text inside that well
       --suite-mesh                  the fixed page backdrop, as a background value
     lines
       --suite-bw                    the theme's border width
     text
       --suite-on-accent             text on the accent fill (on --primary)
       --suite-link                  a link, an address, a short id
     accent
       --suite-accent-soft           the soft accent wash: a selected row, a tag
       --suite-accent-line           the border that goes with that wash
       --suite-focus                 the box-shadow of a focused field
     status (two tones each: the bare name is a FILL for a dot, a bar or a border
     and is too light to be text on the light themes; `-ink` is safe as TEXT on the
     theme's surfaces; `-wash` is the tint behind that text)
       --suite-ok                    fill: done, live, added
       --suite-ok-ink                the same as text
       --suite-ok-wash               the tint behind it
       --suite-warn                  fill: pending, modified, expiring
       --suite-warn-ink              the same as text
       --suite-warn-wash             the tint behind it
       --suite-err                   fill: failed, deleted, destructive
       --suite-err-ink               the same as text
       --suite-err-wash              the tint behind it
     series (four categorical colours, each clear as a line or a mark on the
     theme's surfaces: graph lanes, legend keys, tags, chart series; the first is the
     accent's own hue)
       --suite-series-1
       --suite-series-2
       --suite-series-3
       --suite-series-4
     type (the PAGE loads the font files; these only name them)
       --suite-font-ui               body and controls
       --suite-font-heading          headings
       --suite-font-mono             code, ids, figures
       --suite-fw-item               the weight of ordinary text in this theme
       --suite-fw-strong             the weight of labels, buttons and emphasis
     radii
       --suite-radius                a panel, a card, a dialog
       --suite-radius-sm             a control, a row, a small block
       --suite-radius-pill           a pill, a chip, a tag (square in two themes)
     blur
       --suite-blur                  backdrop blur for glass surfaces (0px = none)

   LEFT PRIVATE (deliberately NOT in this file, with the reason; anything else a
   page paints with comes from the vocabulary above)
     The Apps page keeps six page-only tokens, declared per theme in its own theme
     file, because no second page would read them and no formula over the vocabulary
     gives them: --apps-tilt and --apps-lift-y (how far a card leans to the pointer
     and rises on hover: motion character, not palette), --apps-chip2 --apps-chip3
     --apps-chip4 (three stat-chip fills, gradients in the two glass themes) and
     --apps-kind-game (the hue of the Game tag).
     The Git page keeps none.
     The Web IDE keeps its editor palette, in its own unprefixed names, because the
     tokens have no meaning outside an editor: file-type icon colours, indent guides,
     gutter, editor ink, caret, selection, the diff add and delete fills and inks,
     the void hatch, hunk headers, ref pills, avatars, two graph lanes, tab, activity
     bar and badge states, shell padding and panel gaps, its panel fill, borders and
     its own radii, the button, menu and scrollbar details. It also keeps, per theme,
     the few values that DIFFER from this file's on purpose: a dimmer faint ink in
     carbon and nocturne (line numbers must recede), heavier weights and a quieter
     focus ring in nocturne, a flat accent fill in phosphor, the brighter "added"
     green in craftian, and its menu, hover and field fills where they are tuned to
     the editor's denser chrome. Everything else it reads from here through one alias
     block at the top of its theme file. Its per-theme character rules are not scoped
     to the set: raising their specificity would flip them against the editor's own
     three-class rules.
     The Tasks page is five LAYOUTS, not five skins, so each view owns its design:
     tuned shadows, the extra line steps and the denser type of the carbon board, the
     type scale and box characters of the phosphor one, the paper tones and hairlines
     of the porcelain one, the glows of nocturne. A view reads a token from here
     wherever the value is the same and keeps a private one where it differs.
     The Inbox views are layouts too. The two light ones keep their layout sizes (the
     column, reader and sheet widths, the base type size) and, for text contrast only,
     a darker secondary ink and a darker button fill in craftian and a solid focus
     ring in both: the faint ink, the craftian accent gradient under white text and
     the translucent ring of this file do not reach 4.5:1 (or 3:1 for the ring).
     The three dark ones keep their layout sizes too (type size, row height, rail,
     list, drawer, reader and reply-cap sizes) and, for text contrast only: carbon a
     lighter faint ink, a flat darker button fill, a solid focus ring and the tint
     behind the key hint on its New message button; nocturne a flat violet button fill
     in place of the accent gradient and a solid focus ring; phosphor a lighter faint
     ink. Each is declared on the view's root with its measured reason beside it.
     The Calendar views are layouts as well. The two light ones keep their layout
     sizes (control, field, month row, event line, hour, gutter, list time column,
     panel, sheet and column widths), a stand-in for an event with no stored colour,
     and, for contrast only, the same three as Inbox in craftian (a darker secondary
     ink, a darker button fill, a solid focus ring) and the solid focus ring in
     porcelain. A stored calendar or event colour is data and never a token: it is
     drawn as a rule, a dot or a low tint, with the time on a tint in the main ink.
     The three dark ones keep their layout sizes too (the same list, plus the dock,
     inspector, rail, drawer, card, band and column sizes of their arrangements) and,
     for text contrast only: carbon a lighter faint ink, a flat darker button fill
     and a solid focus ring; nocturne a flat violet button fill in place of the
     accent gradient and a solid focus ring; phosphor a lighter faint ink.
     The skins (one layout each: Contacts, Dashboards, Forms, Surveys, Polls, Scout,
     Meet-Poll, Booking, Ideas, Mindmaps, Automations, Content, Documents, Mail,
     Meetings, AI Gateway, App Guests, Scratch, the X Bot and Gallery) keep NO token
     for text contrast. Each once declared the same three per theme (a darker primary
     button fill, a solid focus ring, a darker secondary ink in craftian), because
     this file's --primary, --ring and craftian --ink-soft did not reach 4.5:1 (3:1
     for the ring). Those values now ARE this file's, so the pages read --primary,
     --ring and --ink-soft directly and the sixty private declarations are gone. A new
     skin must not bring them back: if a value of this file fails a ratio on a page,
     move it here. None of these pages reads --ink-faint for text. Their chips, marks,
     meters and notices are painted from the status triads above, the accent, the
     series colours and the code tokens, each wash laid over an opaque surface.
     What three of them still keep, declared per theme in the page's own theme file
     with the measured reason beside each:
     The Dashboards page keeps two further chart series colours, --dsh-series-5 and
     --dsh-series-6: this file has four and a board has six slots, so a fifth and a
     sixth preset would repeat a colour. Each was chosen against this file's four (told
     apart with normal vision and under simulated protanopia and deuteranopia, legible
     on --surface and on --track); the pairs of this file's OWN four that sit below
     those floors are listed, measured, in that page's wiring test.
     The Mindmaps page keeps six. Four are further BRANCH colours, --mmp-branch-5 to
     --mmp-branch-8: a map has eight branch slots and this file has four series
     colours, which slots 1 to 4 read, so a map of more than four branches would repeat
     a colour next to itself. Each was chosen against this file's four and against the
     other three (told apart with normal vision and under simulated protanopia and
     deuteranopia) and against the theme's --page, where an edge is drawn. Two are
     depth percentages, --mmp-tint-1 and --mmp-tint-2: how much of its branch colour a
     branch node's and a leaf node's fill carries over the opaque --surface, bounded by
     the main ink staying over 4.5:1 on the tinted fill.
     The Meetings page keeps one that is not about contrast: --mtg-letterbox, the bars
     behind a recording's video, which are black in every theme and so belong to no
     palette.
     The Inbox and Calendar views above still carry their private contrast values. They
     were measured against this file's earlier, lighter values and are now equal to or
     stricter than this file's; they can be dropped view by view.

   These files are PUBLIC (served to anonymous visitors, comments included): name no
   gated page path in them.
   ========================================================================== */

/* ---------- craftian: light pastel glass, purple accent ---------- */
[data-theme-set="suite"][data-theme="craftian"],
[data-theme-set="suite"][data-theme="craftian"] body{
  color-scheme:light;
  /* canvas + surfaces */
  --page:#f7f4ef;--bg1:rgba(159,141,255,.40);--bg2:rgba(95,208,173,.38);--bg3:rgba(255,122,156,.34);
  --surface:#ffffff;--surface-2:#fbf9f6;--surface-3:#f1ecfb;--card:#ffffff;--screen:#fdfcfa;
  --glass:rgba(255,255,255,.66);
  /* lines */
  --border:rgba(159,141,255,.28);--border-2:rgba(159,141,255,.18);--line:rgba(159,141,255,.18);--track:#ece6f8;
  /* text */
  --ink:#3f3a5a;--ink-soft:#4f4a6b;--ink-faint:#6f6a8c;
  --brand-ink:#2f2b47;--accent-ink:#7c3aed;--accent-ink2:#8b5cf6;
  /* accent + pastels */
  --primary:linear-gradient(135deg,#6d28d9,#7c3aed);--accent:#8b5cf6;--ring:#7c3aed;
  --lav:#c9c0ff;--lav-soft:#ece8ff;--mint:#a7e9d3;--mint-soft:#e2f8f1;--peach:#ffd3bd;--peach-soft:#fff0e7;
  /* depth + motion */
  --shadow:0 22px 54px -16px rgba(74,69,102,.35);--shadow-sm:0 8px 20px -12px rgba(74,69,102,.35);
  --spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,.61,.36,1);
  /* suite extras */
  --suite-font-ui:'Nunito',system-ui,sans-serif;--suite-font-heading:'Quicksand',system-ui,sans-serif;
  --suite-font-mono:'JetBrains Mono',ui-monospace,monospace;
  --suite-ok:#10b981;--suite-warn:#f59e0b;--suite-err:#fb7185;
  --suite-radius:22px;--suite-radius-sm:12px;--suite-blur:14px;
  /* surfaces: panel + its shadow, tile, control, hover, menu, scrim, code well, backdrop */
  --suite-panel:rgba(255,255,255,.66);--suite-panel-shadow:0 22px 54px -16px rgba(74,69,102,.35);
  --suite-tile:rgba(255,255,255,.5);--suite-ctl:rgba(255,255,255,.75);--suite-hover:rgba(255,255,255,.82);
  --suite-menu:rgba(255,255,255,.96);--suite-scrim:rgba(63,58,90,.3);
  --suite-code-bg:rgba(255,255,255,.72);--suite-code-ink:#3f3a5a;
  --suite-mesh:
    radial-gradient(42rem 42rem at 8% -6%, rgba(159,141,255,.40), transparent 62%),
    radial-gradient(36rem 36rem at 96% 12%, rgba(255,122,156,.34), transparent 60%),
    radial-gradient(40rem 40rem at 82% 92%, rgba(116,182,255,.34), transparent 62%),
    radial-gradient(34rem 34rem at 6% 88%, rgba(95,208,173,.38), transparent 60%),
    radial-gradient(30rem 30rem at 52% 46%, rgba(255,171,94,.26), transparent 65%);
  /* lines + text */
  --suite-bw:1.5px;--suite-on-accent:#fff;--suite-link:#6d28d9;
  /* accent washes + field focus */
  --suite-accent-soft:rgba(139,92,246,.14);--suite-accent-line:rgba(139,92,246,.3);--suite-focus:0 0 0 4px rgba(139,92,246,.12);
  /* status as TEXT (ink) and the tint behind it (wash); the bare names above are fills */
  --suite-ok-ink:#05704e;--suite-ok-wash:rgba(52,211,153,.18);
  --suite-warn-ink:#a3491c;--suite-warn-wash:rgba(245,158,11,.16);
  --suite-err-ink:#be123c;--suite-err-wash:rgba(251,113,133,.16);
  /* categorical series */
  --suite-series-1:#7c3aed;--suite-series-2:#db2777;--suite-series-3:#0d9488;--suite-series-4:#c2410c;
  /* weights + pill radius */
  --suite-fw-item:700;--suite-fw-strong:800;--suite-radius-pill:999px;
}

/* ---------- porcelain: light ivory editorial, teal accent ---------- */
[data-theme-set="suite"][data-theme="porcelain"],
[data-theme-set="suite"][data-theme="porcelain"] body{
  color-scheme:light;
  /* canvas + surfaces */
  --page:#faf8f4;--bg1:rgba(15,118,110,.07);--bg2:rgba(176,138,62,.07);--bg3:rgba(168,85,95,.04);
  --surface:#fffdf9;--surface-2:#f3f0ea;--surface-3:#e9f2f0;--card:#fffdf9;--screen:#fdfbf7;
  --glass:rgba(255,253,249,.86);
  /* lines */
  --border:#e8e4da;--border-2:#efebe2;--line:#e8e4da;--track:#ece8de;
  /* text */
  --ink:#2b2a33;--ink-soft:#5e5c68;--ink-faint:#706d78;
  --brand-ink:#1f1e26;--accent-ink:#0f766e;--accent-ink2:#0b5d57;
  /* accent + pastels */
  --primary:#0b5d57;--accent:#0f766e;--ring:#0f766e;
  --lav:#c9d9d6;--lav-soft:#e9f2f0;--mint:#c5d6bf;--mint-soft:#edf3e9;--peach:#e6d3a8;--peach-soft:#f7f0e0;
  /* depth + motion */
  --shadow:0 18px 44px -20px rgba(43,42,51,.22);--shadow-sm:0 4px 14px -8px rgba(43,42,51,.18);
  --spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,.61,.36,1);
  /* suite extras */
  --suite-font-ui:'Source Sans 3',system-ui,sans-serif;--suite-font-heading:'Fraunces',Georgia,serif;
  --suite-font-mono:'JetBrains Mono',ui-monospace,monospace;
  --suite-ok:#5f7f58;--suite-warn:#b08a3e;--suite-err:#a8555f;
  --suite-radius:18px;--suite-radius-sm:9px;--suite-blur:0px;
  /* surfaces: panel + its shadow, tile, control, hover, menu, scrim, code well, backdrop */
  --suite-panel:#fffdf9;--suite-panel-shadow:0 2px 8px -2px rgba(43,42,51,.08), 0 1px 2px rgba(43,42,51,.04);
  --suite-tile:#fffdf9;--suite-ctl:#fffdf9;--suite-hover:#f3f0ea;
  --suite-menu:#fffdf9;--suite-scrim:rgba(43,42,51,.25);
  --suite-code-bg:#f6f3ec;--suite-code-ink:#2b2a33;
  --suite-mesh:
    radial-gradient(900px 480px at 8% -6%, rgba(15,118,110,.07), transparent 60%),
    radial-gradient(1000px 560px at 96% 2%, rgba(176,138,62,.07), transparent 62%);
  /* lines + text */
  --suite-bw:1px;--suite-on-accent:#fdfcf8;--suite-link:#0b5d57;
  /* accent washes + field focus */
  --suite-accent-soft:#e9f2f0;--suite-accent-line:rgba(15,118,110,.28);--suite-focus:0 0 0 3px rgba(15,118,110,.1);
  /* status as TEXT (ink) and the tint behind it (wash); the bare names above are fills */
  --suite-ok-ink:#4a6b43;--suite-ok-wash:#edf3e9;
  --suite-warn-ink:#8a6418;--suite-warn-wash:#f7f0e0;
  --suite-err-ink:#96434e;--suite-err-wash:#f9edec;
  /* categorical series */
  --suite-series-1:#0f766e;--suite-series-2:#8f6b22;--suite-series-3:#96434e;--suite-series-4:#4b5f8f;
  /* weights + pill radius */
  --suite-fw-item:400;--suite-fw-strong:600;--suite-radius-pill:999px;
}

/* ---------- carbon: graphite workbench, indigo accent ---------- */
[data-theme-set="suite"][data-theme="carbon"],
[data-theme-set="suite"][data-theme="carbon"] body{
  color-scheme:dark;
  /* canvas + surfaces */
  --page:#17181c;--bg1:rgba(99,102,241,.11);--bg2:rgba(139,92,246,.06);--bg3:rgba(52,211,153,.04);
  --surface:#1b1c22;--surface-2:#15161a;--surface-3:#23252e;--card:#1e1f26;--screen:#1a1b21;
  --glass:rgba(27,28,34,.82);
  /* lines */
  --border:rgba(255,255,255,.08);--border-2:rgba(255,255,255,.045);--line:rgba(255,255,255,.045);--track:#2a2c36;
  /* text */
  --ink:#eceef4;--ink-soft:#9ba1b0;--ink-faint:#878ea1;
  --brand-ink:#f6f7fb;--accent-ink:#b6b8ff;--accent-ink2:#8f92ff;
  /* accent + pastels */
  --primary:#585be8;--accent:#6366f1;--ring:#8f92ff;
  --lav:#b6b8ff;--lav-soft:rgba(99,102,241,.16);--mint:#6ee7b7;--mint-soft:rgba(52,211,153,.1);--peach:#fcd34d;--peach-soft:rgba(251,191,36,.1);
  /* depth + motion */
  --shadow:0 24px 60px -24px rgba(0,0,0,.8);--shadow-sm:0 8px 22px -12px rgba(0,0,0,.7);
  --spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,.61,.36,1);
  /* suite extras */
  --suite-font-ui:'Inter',system-ui,sans-serif;--suite-font-heading:'Inter',system-ui,sans-serif;
  --suite-font-mono:'JetBrains Mono',ui-monospace,monospace;
  --suite-ok:#34d399;--suite-warn:#fbbf24;--suite-err:#fb7185;
  --suite-radius:10px;--suite-radius-sm:8px;--suite-blur:0px;
  /* surfaces: panel + its shadow, tile, control, hover, menu, scrim, code well, backdrop */
  --suite-panel:#1b1c22;--suite-panel-shadow:none;
  --suite-tile:rgba(255,255,255,.02);--suite-ctl:rgba(255,255,255,.035);--suite-hover:rgba(255,255,255,.05);
  --suite-menu:#1e1f26;--suite-scrim:rgba(10,11,15,.58);
  --suite-code-bg:#15161a;--suite-code-ink:#d9dce6;
  --suite-mesh:
    radial-gradient(820px 420px at 12% -10%, rgba(99,102,241,.11), transparent 62%),
    radial-gradient(700px 420px at 96% 6%, rgba(139,92,246,.06), transparent 60%),
    linear-gradient(180deg,#1a1b21 0%,#17181c 40%,#121317 100%);
  /* lines + text */
  --suite-bw:1px;--suite-on-accent:#fff;--suite-link:#b6b8ff;
  /* accent washes + field focus */
  --suite-accent-soft:rgba(99,102,241,.16);--suite-accent-line:rgba(99,102,241,.32);--suite-focus:0 0 0 4px rgba(99,102,241,.1);
  /* status as TEXT (ink) and the tint behind it (wash); the bare names above are fills */
  --suite-ok-ink:#34d399;--suite-ok-wash:rgba(52,211,153,.1);
  --suite-warn-ink:#fbbf24;--suite-warn-wash:rgba(251,191,36,.1);
  --suite-err-ink:#fb7185;--suite-err-wash:rgba(251,113,133,.1);
  /* categorical series */
  --suite-series-1:#8f92ff;--suite-series-2:#34d399;--suite-series-3:#fbbf24;--suite-series-4:#f472b6;
  /* weights + pill radius */
  --suite-fw-item:500;--suite-fw-strong:600;--suite-radius-pill:7px;
}

/* ---------- nocturne: dark glass, cyan / violet / pink accent ---------- */
[data-theme-set="suite"][data-theme="nocturne"],
[data-theme-set="suite"][data-theme="nocturne"] body{
  color-scheme:dark;
  /* canvas + surfaces */
  --page:#0e0c18;--bg1:rgba(34,211,238,.18);--bg2:rgba(168,85,247,.22);--bg3:rgba(236,72,153,.17);
  --surface:#161327;--surface-2:#120f20;--surface-3:#201b38;--card:#1a1630;--screen:#12101f;
  --glass:rgba(20,17,34,.55);
  /* lines */
  --border:rgba(255,255,255,.13);--border-2:rgba(255,255,255,.08);--line:rgba(255,255,255,.08);--track:#26213d;
  /* text */
  --ink:rgba(255,255,255,.9);--ink-soft:rgba(255,255,255,.62);--ink-faint:rgba(255,255,255,.5);
  --brand-ink:#ffffff;--accent-ink:#c084fc;--accent-ink2:#22d3ee;
  /* accent + pastels */
  --primary:#7c3aed;--accent:#a855f7;--ring:#c084fc;
  --lav:#c084fc;--lav-soft:rgba(168,85,247,.16);--mint:#22d3ee;--mint-soft:rgba(34,211,238,.12);--peach:#fbbf24;--peach-soft:rgba(251,191,36,.12);
  /* depth + motion */
  --shadow:0 22px 60px -18px rgba(0,0,0,.7);--shadow-sm:0 8px 24px -12px rgba(0,0,0,.6);
  --spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,.61,.36,1);
  /* suite extras */
  --suite-font-ui:'Nunito',system-ui,sans-serif;--suite-font-heading:'Quicksand',system-ui,sans-serif;
  --suite-font-mono:'JetBrains Mono',ui-monospace,monospace;
  --suite-ok:#34d399;--suite-warn:#fbbf24;--suite-err:#ec4899;
  --suite-radius:18px;--suite-radius-sm:10px;--suite-blur:16px;
  /* surfaces: panel + its shadow, tile, control, hover, menu, scrim, code well, backdrop */
  --suite-panel:rgba(20,17,34,.55);--suite-panel-shadow:0 0 0 1px rgba(168,85,247,.2), 0 22px 60px -18px rgba(0,0,0,.7);
  --suite-tile:rgba(255,255,255,.03);--suite-ctl:rgba(255,255,255,.045);--suite-hover:rgba(255,255,255,.055);
  --suite-menu:rgba(18,16,31,.97);--suite-scrim:rgba(5,4,10,.6);
  --suite-code-bg:rgba(5,4,10,.5);--suite-code-ink:rgba(232,230,255,.9);
  --suite-mesh:
    radial-gradient(46rem 40rem at 10% -8%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(42rem 42rem at 104% 8%, rgba(236,72,153,.17), transparent 62%),
    radial-gradient(48rem 44rem at 88% 104%, rgba(168,85,247,.22), transparent 60%),
    radial-gradient(38rem 36rem at -6% 82%, rgba(56,189,248,.15), transparent 62%),
    linear-gradient(180deg,#12101f 0%,#0e0c18 40%,#0a0812 100%);
  /* lines + text */
  --suite-bw:1px;--suite-on-accent:#fff;--suite-link:#22d3ee;
  /* accent washes + field focus */
  --suite-accent-soft:rgba(168,85,247,.16);--suite-accent-line:rgba(168,85,247,.4);--suite-focus:0 0 0 4px rgba(168,85,247,.22);
  /* status as TEXT (ink) and the tint behind it (wash); the bare names above are fills */
  --suite-ok-ink:#34d399;--suite-ok-wash:rgba(52,211,153,.13);
  --suite-warn-ink:#fbbf24;--suite-warn-wash:rgba(251,191,36,.12);
  --suite-err-ink:#f472b6;--suite-err-wash:rgba(236,72,153,.14);
  /* categorical series */
  --suite-series-1:#22d3ee;--suite-series-2:#c084fc;--suite-series-3:#f472b6;--suite-series-4:#fbbf24;
  /* weights + pill radius */
  --suite-fw-item:600;--suite-fw-strong:700;--suite-radius-pill:999px;
}

/* ---------- phosphor: green-tinted terminal dark, phosphor green accent ---------- */
[data-theme-set="suite"][data-theme="phosphor"],
[data-theme-set="suite"][data-theme="phosphor"] body{
  color-scheme:dark;
  /* canvas + surfaces */
  --page:#0b0f0c;--bg1:rgba(74,222,128,.07);--bg2:rgba(251,191,36,.04);--bg3:rgba(74,222,128,.03);
  --surface:#111612;--surface-2:#0d120e;--surface-3:#18201a;--card:#131914;--screen:#0f1410;
  --glass:rgba(17,22,18,.84);
  /* lines */
  --border:rgba(134,239,172,.16);--border-2:rgba(134,239,172,.09);--line:rgba(134,239,172,.09);--track:#1c261f;
  /* text */
  --ink:#d7e0d8;--ink-soft:#97a69a;--ink-faint:#7b8b82;
  --brand-ink:#eef5ef;--accent-ink:#86efac;--accent-ink2:#4ade80;
  /* accent + pastels */
  --primary:linear-gradient(135deg,#4ade80,#22c55e);--accent:#4ade80;--ring:#4ade80;
  --lav:#86efac;--lav-soft:rgba(74,222,128,.13);--mint:#4ade80;--mint-soft:rgba(74,222,128,.1);--peach:#fbbf24;--peach-soft:rgba(251,191,36,.1);
  /* depth + motion */
  --shadow:0 24px 60px -24px rgba(0,0,0,.85);--shadow-sm:0 8px 22px -12px rgba(0,0,0,.75);
  --spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,.61,.36,1);
  /* suite extras */
  --suite-font-ui:'Inter',system-ui,sans-serif;--suite-font-heading:'JetBrains Mono',ui-monospace,monospace;
  --suite-font-mono:'JetBrains Mono',ui-monospace,monospace;
  --suite-ok:#4ade80;--suite-warn:#fbbf24;--suite-err:#fb7185;
  --suite-radius:6px;--suite-radius-sm:4px;--suite-blur:0px;
  /* surfaces: panel + its shadow, tile, control, hover, menu, scrim, code well, backdrop */
  --suite-panel:#111612;--suite-panel-shadow:none;
  --suite-tile:rgba(255,255,255,.015);--suite-ctl:rgba(255,255,255,.03);--suite-hover:rgba(134,239,172,.06);
  --suite-menu:#131914;--suite-scrim:rgba(4,7,5,.62);
  --suite-code-bg:#0d120e;--suite-code-ink:#c9d6cb;
  --suite-mesh:
    radial-gradient(820px 420px at 12% -10%, rgba(74,222,128,.07), transparent 62%),
    radial-gradient(700px 420px at 96% 6%, rgba(251,191,36,.04), transparent 60%),
    linear-gradient(180deg,#0f1410 0%,#0b0f0c 40%,#080b09 100%);
  /* lines + text */
  --suite-bw:1px;--suite-on-accent:#06210f;--suite-link:#86efac;
  /* accent washes + field focus */
  --suite-accent-soft:rgba(74,222,128,.16);--suite-accent-line:rgba(74,222,128,.32);--suite-focus:0 0 0 4px rgba(74,222,128,.1);
  /* status as TEXT (ink) and the tint behind it (wash); the bare names above are fills */
  --suite-ok-ink:#4ade80;--suite-ok-wash:rgba(74,222,128,.1);
  --suite-warn-ink:#fbbf24;--suite-warn-wash:rgba(251,191,36,.1);
  --suite-err-ink:#fb7185;--suite-err-wash:rgba(251,113,133,.1);
  /* categorical series */
  --suite-series-1:#4ade80;--suite-series-2:#fbbf24;--suite-series-3:#38bdf8;--suite-series-4:#fb7185;
  /* weights + pill radius */
  --suite-fw-item:500;--suite-fw-strong:600;--suite-radius-pill:4px;
}