/* The product's one token file: theme v2 "Mint Signal" (2026-11-06; the owner's pick, the 21st theme by serafimcloud, id
   419e14a5-ba2b-4ed4-911a-1035b54a1695), in light and dark, for the app and the site alike. It replaces direction A's "Night console"
   values under the same names: every `--a-*` name saas/DESIGN.md documents is still here, so the rules that read them keep working.
   Contract:
   - Tokens and font faces only: custom properties and @font-face rules. Nothing here styles an element, so loading this file changes no
     page until that page's own sheet reads the tokens.
   - Two layers under the documented names. Layer 1 is the theme's own variables under their shadcn names (--background, --primary,
     --radius, ...), so a ported shadcn component reads them unchanged. Layer 2 holds our own names for what the theme leaves open:
     the states, the field edge, the mint as a readable ink, the series, the rail. The `--a-*` names are aliases of the two layers.
   - Mode: light by default; dark under the system's prefers-color-scheme; data-theme="light|dark" on <html> wins over both. A section
     can force one mode with `.chapter-light` or `.chapter-dark` (the same names, remapped on that element).
   - The accent is the theme's mint #51f0a8 in both modes, always with black words on it (14.4:1). On white the mint itself is too faint
     to read (1.4:1), so where it must be read or seen (a link, the focus ring, a chosen radio, a bar's fill) light mode uses deeper
     mints of the same family: #0a7a47 as text (5.3:1), #0e9f5e and #0d9f5d as marks and the ring (3.1:1 or more).
   - States always come with a glyph or a word. Up is the mint. Down from both regions is red; down from ONE region is the theme's pink
     (owner 2026-11-06: "red = down from 2 regions, pink = one region"): every one-region state reads --partial. --warn (the lamp's
     yellow) is for warnings only: an expiring certificate or domain, a slow check, a late payment. Maintenance is the theme's sky.
   - Changed from the theme for legibility, nothing else: the border (#f4f6f8 is 1.07:1 on the ground; #ebebeb), field edges at 3:1, the
     light focus ring (mint on white is 1.4:1), the destructive button (#d61f69 with white, 4.9:1), the light secondary (#e4fef3).
   - Radius: the theme's 1.4rem with shadcn's steps from it, so buttons and fields are near pills and cards round off at 22 px.
   - Font: Plus Jakarta Sans (SIL OFL 1.1, shared/fonts/README.txt; the owner said yes on 2026-11-06), weights 200-800, same-origin,
     no font CDN. Archivo stays in the wordmark only. Pages preload plus-jakarta-sans-latin.woff2.
   - Durations are tokens so the reduced-motion switch (motion.js, data-motion) reaches them; only transform and opacity ever move. */

/* Plus Jakarta Sans: Google Fonts' variable cuts (shared/fonts/README.txt has the sources and the sha256 of each file) */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/shared/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/shared/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/static/shared/fonts/plus-jakarta-sans-latin-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==== light (the theme's ":root"); also any `.chapter-light` section ==== */
:root, .chapter-light {
  color-scheme: light;
  /* ---- layer 1: the theme ---- */
  --background: #fdfdfd;
  --foreground: #000000;
  --card: #ffffff;                  /* the theme's #fdfdfd, one step whiter so a card reads on the ground */
  --card-foreground: #000000;
  --popover: #fcfcfc;
  --popover-foreground: #000000;
  --primary: #51f0a8;               /* the mint; black on it 14.4:1 */
  --primary-foreground: #000000;
  --secondary: #e4fef3;             /* the theme's sidebar mint tint (its #fcfdfd cannot be told from the ground) */
  --secondary-foreground: #0a5c36;  /* 7.6:1 on its tint */
  --muted: #f5f5f5;
  --muted-foreground: #525252;      /* 7.7:1 on the ground, 7.2:1 on muted */
  --accent: #f9fffc;
  --accent-foreground: #0d9f5d;
  --destructive: #d61f69;           /* white on it 4.9:1 (the theme's #f54a88 is 3.4:1) */
  --destructive-foreground: #ffffff;
  --border: #ebebeb;                /* the theme's #f4f6f8 is 1.07:1 on the ground */
  --input: #ebebeb;
  --ring: #0d9f5d;                  /* 3.4:1 on the ground */
  --chart-1: #51f0a8; --chart-2: #7efe8f; --chart-3: #ff4838; --chart-4: #2ebdf6; --chart-5: #ffb188;
  --sidebar: #ffffff;
  --sidebar-foreground: #000000;
  --sidebar-primary: #000000;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e4fef3;
  --sidebar-accent-foreground: #000000;
  --sidebar-border: #ebebeb;
  --sidebar-ring: #000000;
  --shadow-color: 0 0% 0%;
  --shadow-opacity: 0.1;
  --spacing: 0.27rem;
  /* ---- layer 2: our own names ---- */
  --panel: #fdfdfd;                 /* the inset page beside the rail (Dashboard 3) */
  --panel-border: #ebebeb;
  --hover: #f4f6f5;                 /* a row, a menu item, a ghost button under the pointer */
  --selected: #e4fef3;              /* a chosen row or option */
  --primary-hover: #2fdc90;         /* black on it 11.8:1 */
  --primary-ink: #0a7a47;           /* the mint as text: 5.3:1 */
  --primary-strong: #0e9f5e;        /* the mint as a mark or a fill on white: 3.4:1 */
  --field-edge: #8c8c8c;            /* 3.3:1 on the ground */
  --field-bg: #ffffff;
  --scrim: rgba(0, 0, 0, 0.32);
  --series-1: #0e9f5e;              /* chart lines on white (the theme's pastel chart colours are for fills) */
  --series-2: #1689bd;
  --series-3: #7c3aed;              /* a third series: 5.7:1 on white */
  /* the app's chart lines on the dark ground (dataviz validator 2026-11-09: OKLCH L 0.48-0.67, CVD dE 10.0, normal 16.7 on #0a0a0a);
     app-v2.css gives them to the charts in dark mode. The --series-* dark steps stay as they are: the e-mail tokens mirror them. */
  --series-night-1: #22a66e;
  --series-night-2: #2c6cc4;
  --series-night-3: #9d7cf0;
  /* the states: a word or a glyph always goes with the colour */
  --ok: #0e9f5e;      --ok-ink: #0a7a47;      --ok-bg: rgba(81, 240, 168, 0.18);   --ok-edge: rgba(14, 159, 94, 0.30);
  --warn: #a87b0a;    --warn-ink: #8a5a00;    --warn-bg: rgba(245, 196, 81, 0.18); --warn-edge: rgba(201, 145, 20, 0.35);
  --fail: #dc2626;    --fail-ink: #b91c1c;    --fail-bg: rgba(220, 38, 38, 0.10);  --fail-edge: rgba(220, 38, 38, 0.30);
  --partial: #f54a88; --partial-ink: #c2185b; --partial-bg: rgba(245, 74, 136, 0.10); --partial-edge: rgba(245, 74, 136, 0.30);
  --info: #1689bd;    --info-ink: #0a6f99;    --info-bg: rgba(46, 189, 246, 0.12); --info-edge: rgba(46, 189, 246, 0.35);
  --neutral: #8c8c8c; --neutral-ink: #52525b; --neutral-bg: rgba(115, 115, 115, 0.10); --neutral-edge: rgba(115, 115, 115, 0.25);
  --fail-strong: #dc2626;           /* the filled "Down" block: white on it 4.8:1, in both modes */
  --brand-ink: #0a7a47;             /* the AI label, "new" */
  --brand-bg: rgba(81, 240, 168, 0.18);
  --test: #6b3fa0;    --test-bg: rgba(150, 110, 240, 0.16);   /* the TEST label and nothing else: 5.9:1 on its tint */
  --ground-2: #f7f7f7;              /* one step from the ground: a band, the footer */
  /* the categories (owner 2026-11-09: "a bit of colour everywhere", then "not too colourful, in harmony"): the mint leads, three cool
     hues follow, for what a thing IS, never for how it is: monitoring (teal), alerts and channels (indigo), security (violet). Each stays
     25 degrees of hue or more from every state and from the mint (review COL-2, 2026-11-10: monitoring was the 'up' green and alerts the
     maintenance sky, byte for byte). A mark (an icon, a tile's edge; dataviz validator, all pairs: L, chroma, CVD dE 13.4, normal 17.6,
     3:1 or more on white), an ink for words (4.5:1 or more on the ground and on its tint) and a tint for a tile. DESIGN.md says where. */
  --cat-monitor: #0e9a94;  --cat-monitor-ink: #06726e;  --cat-monitor-bg: #e1f6f4;
  --cat-alert: #3c4baf;    --cat-alert-ink: #33419d;    --cat-alert-bg: #e9eefc;
  --cat-security: #9269e4; --cat-security-ink: #6941c6; --cat-security-bg: #efebfb;
}

/* ==== dark (the theme's ".dark"): the system's choice, data-theme="dark", or a `.chapter-dark` section ==== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background: #000000; --foreground: #f0f0f0; --card: #0a0a0a; --card-foreground: #f0f0f0; --popover: #1a1b1b; --popover-foreground: #f0f0f0;
    --primary: #51f0a8; --primary-foreground: #000000; --secondary: #216a49; --secondary-foreground: #f0f0f0; --muted: #252527;
    --muted-foreground: #969696; --accent: #093723; --accent-foreground: #fefefe; --destructive: #d61f69; --destructive-foreground: #ffffff;
    --border: #252527; --input: #3b3b3b; --ring: #51f0a8;
    --chart-1: #51f0a8; --chart-2: #9effa1; --chart-3: #ffb7cf; --chart-4: #5fd0ff; --chart-5: #ffb188;
    --sidebar: #0a0a0a; --sidebar-foreground: #f0f0f0; --sidebar-primary: #51f0a8; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #00331b;
    --sidebar-accent-foreground: #51f0a8; --sidebar-border: #353a3e; --sidebar-ring: #51f0a8; --spacing: 0.25rem; --shadow-opacity: 0.4;
    --panel: #000000; --panel-border: #252527; --hover: #161718; --selected: #093723; --primary-hover: #7af5bd; --primary-ink: #51f0a8;
    --primary-strong: #51f0a8; --field-edge: #666666; --field-bg: #0a0a0a; --scrim: rgba(0, 0, 0, 0.6);
    --series-1: #51f0a8; --series-2: #5fd0ff; --series-3: #c4b5fd;
    --ok: #51f0a8;      --ok-ink: #51f0a8;      --ok-bg: rgba(81, 240, 168, 0.12);   --ok-edge: rgba(81, 240, 168, 0.3);
    --warn: #f5c451;    --warn-ink: #f5c451;    --warn-bg: rgba(245, 196, 81, 0.12); --warn-edge: rgba(245, 196, 81, 0.3);
    --fail: #ef4444;    --fail-ink: #f87171;    --fail-bg: rgba(239, 68, 68, 0.14);  --fail-edge: rgba(239, 68, 68, 0.36);
    --partial: #ff78a5; --partial-ink: #ff78a5; --partial-bg: rgba(255, 120, 165, 0.12); --partial-edge: rgba(255, 120, 165, 0.32);
    --info: #5fd0ff;    --info-ink: #5fd0ff;    --info-bg: rgba(95, 208, 255, 0.12); --info-edge: rgba(95, 208, 255, 0.3);
    --neutral: #737373; --neutral-ink: #a3a3a3; --neutral-bg: rgba(163, 163, 163, 0.1); --neutral-edge: rgba(163, 163, 163, 0.22);
    --brand-ink: #51f0a8; --brand-bg: rgba(81, 240, 168, 0.12); --test: #c7a6ff; --test-bg: rgba(150, 110, 240, 0.2); --ground-2: #0f0f10;
    --cat-monitor: #0e9a94; --cat-monitor-ink: #53bfb6; --cat-monitor-bg: #0c2928; --cat-alert: #3559c3; --cat-alert-ink: #7ca2f6; --cat-alert-bg: #1d2337;
    --cat-security: #a17adf; --cat-security-ink: #dab2f3; --cat-security-bg: #24222c;
  }
}
:root[data-theme="dark"], .chapter-dark {
  color-scheme: dark;
  --background: #000000; --foreground: #f0f0f0; --card: #0a0a0a; --card-foreground: #f0f0f0; --popover: #1a1b1b; --popover-foreground: #f0f0f0;
  --primary: #51f0a8; --primary-foreground: #000000; --secondary: #216a49; --secondary-foreground: #f0f0f0; --muted: #252527;
  --muted-foreground: #969696; --accent: #093723; --accent-foreground: #fefefe; --destructive: #d61f69; --destructive-foreground: #ffffff;
  --border: #252527; --input: #3b3b3b; --ring: #51f0a8;
  --chart-1: #51f0a8; --chart-2: #9effa1; --chart-3: #ffb7cf; --chart-4: #5fd0ff; --chart-5: #ffb188;
  --sidebar: #0a0a0a; --sidebar-foreground: #f0f0f0; --sidebar-primary: #51f0a8; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #00331b;
  --sidebar-accent-foreground: #51f0a8; --sidebar-border: #353a3e; --sidebar-ring: #51f0a8; --spacing: 0.25rem; --shadow-opacity: 0.4;
  --panel: #000000; --panel-border: #252527; --hover: #161718; --selected: #093723; --primary-hover: #7af5bd; --primary-ink: #51f0a8;
  --primary-strong: #51f0a8; --field-edge: #666666; --field-bg: #0a0a0a; --scrim: rgba(0, 0, 0, 0.6);
  --series-1: #51f0a8; --series-2: #5fd0ff; --series-3: #c4b5fd;
  --ok: #51f0a8;      --ok-ink: #51f0a8;      --ok-bg: rgba(81, 240, 168, 0.12);   --ok-edge: rgba(81, 240, 168, 0.3);
  --warn: #f5c451;    --warn-ink: #f5c451;    --warn-bg: rgba(245, 196, 81, 0.12); --warn-edge: rgba(245, 196, 81, 0.3);
  --fail: #ef4444;    --fail-ink: #f87171;    --fail-bg: rgba(239, 68, 68, 0.14);  --fail-edge: rgba(239, 68, 68, 0.36);
  --partial: #ff78a5; --partial-ink: #ff78a5; --partial-bg: rgba(255, 120, 165, 0.12); --partial-edge: rgba(255, 120, 165, 0.32);
  --info: #5fd0ff;    --info-ink: #5fd0ff;    --info-bg: rgba(95, 208, 255, 0.12); --info-edge: rgba(95, 208, 255, 0.3);
  --neutral: #737373; --neutral-ink: #a3a3a3; --neutral-bg: rgba(163, 163, 163, 0.1); --neutral-edge: rgba(163, 163, 163, 0.22);
  --brand-ink: #51f0a8; --brand-bg: rgba(81, 240, 168, 0.12); --test: #c7a6ff; --test-bg: rgba(150, 110, 240, 0.2); --ground-2: #0f0f10;
    --cat-monitor: #0e9a94; --cat-monitor-ink: #53bfb6; --cat-monitor-bg: #0c2928; --cat-alert: #3559c3; --cat-alert-ink: #7ca2f6; --cat-alert-bg: #1d2337;
    --cat-security: #a17adf; --cat-security-ink: #dab2f3; --cat-security-bg: #24222c;
}


/* ==== the documented names (saas/DESIGN.md), as aliases of the two layers. Declared on :root AND on the chapters, so a section that
   forces a mode works them out again from its own values (a custom property inherits its computed value). ==== */
:root, .chapter-light, .chapter-dark {
  /* ---- grounds ---- */
  --a-ground: var(--background);  /* the page ground */
  --a-ground-2: var(--ground-2);  /* one step up: a band, the footer */
  --a-ground-3: var(--muted);     /* two steps: wells, code blocks */
  --a-surface: var(--card);       /* a card or a panel */
  --a-surface-solid: var(--card);
  --a-surface-2: var(--hover);    /* a raised row or chip inside a panel */
  --a-surface-3: var(--muted);    /* hover of a row, a pressed chip */
  --a-tile: var(--card);
  --a-line: var(--border);        /* rules and the hairline edge of a panel */
  --a-line-2: var(--field-edge);  /* the edge of a field or a control: 3:1 against the ground */
  --a-field-edge: var(--field-edge);
  --a-well: var(--field-bg);      /* a field's ground */
  --a-field-edge-strong: var(--field-edge);
  --a-env-back: var(--muted); --a-env-front: var(--card); --a-env-flap: var(--secondary);   /* the envelope of "check your inbox" */
  /* ---- ink ---- */
  --a-ink: var(--foreground);
  --a-ink-2: var(--muted-foreground);
  --a-ink-3: var(--muted-foreground);
  --a-link: var(--primary-ink);   /* a link inside running text; underlined, so never colour alone */
  --a-focus: var(--ring);         /* the one focus ring */
  /* ---- the accent (named the lamp before): the one main action of a screen and "you are here" ---- */
  --a-lamp: var(--primary);
  --a-lamp-2: var(--primary-hover);
  --a-on-lamp: var(--primary-foreground);
  --a-lamp-glow: rgba(81, 240, 168, 0.45);
  --a-lamp-ink: var(--primary-ink);
  /* ---- states (always with a glyph or a word) ---- */
  --a-ok: var(--ok);           --a-ok-bg: var(--ok-bg);           --a-ok-ink: var(--ok-ink);
  --a-warn: var(--warn);       --a-warn-bg: var(--warn-bg);       --a-warn-ink: var(--warn-ink);
  --a-fail: var(--fail);       --a-fail-bg: var(--fail-bg);       --a-fail-ink: var(--fail-ink);
  --a-partial: var(--partial); --a-partial-bg: var(--partial-bg); --a-partial-ink: var(--partial-ink);   /* down from one region */
  --a-fail-strong: var(--fail-strong);
  --a-planned: var(--info);    --a-planned-bg: var(--info-bg);    --a-planned-ink: var(--info-ink);
  --a-unknown: var(--neutral); --a-unknown-bg: var(--neutral-bg);
  --a-test: var(--test);       --a-test-bg: var(--test-bg);       --a-test-ink: var(--test);
  --a-tag-bg: var(--secondary); --a-tag-ink: var(--secondary-foreground);   /* "Example data", "Coming soon", plan tags */
  --a-ok-mark: var(--ok); --a-warn-mark: var(--warn); --a-fail-mark: var(--fail); --a-partial-mark: var(--partial); --a-planned-mark: var(--info);
  /* ---- the regions' series (charts, legends; region A is always s1) ---- */
  --a-s1: var(--series-1);
  --a-s2: var(--series-2);
  --a-s3: var(--series-3);
  /* ---- depth: flat at rest (a hairline), a shadow only on what floats ---- */
  --a-shadow: 0 0 0 1px var(--border);
  --a-shadow-tile: inset 0 0 0 1px var(--border);
  --a-shadow-tile-hover: inset 0 0 0 1px var(--field-edge), var(--shadow-md);
  --a-shadow-pop: var(--shadow-lg), 0 0 0 1px var(--border);   /* menus, dialogs */
  --a-shadow-lamp: none;
  --a-edge: inset 0 0 0 1px var(--a-line);
  --a-edge-2: inset 0 0 0 1px var(--a-line-2);
  --a-elev-2: var(--shadow-lg), 0 0 0 1px var(--border);   /* a menu, a popover, a toast */
  --a-elev-3: var(--shadow-xl), 0 0 0 1px var(--border);   /* a dialog, a drawer */
  --a-bar-bg: color-mix(in srgb, var(--background) 86%, transparent);   /* a sticky bar over the page */
  /* ---- the mesh: soft light behind a hero, in the theme's mint and sky (literal: the e-mail's band draws --a-mesh-page) ---- */
  --a-mesh: radial-gradient(40% 50% at 78% 30%, rgba(81, 240, 168, 0.26), transparent 70%),
    radial-gradient(35% 45% at 95% 75%, rgba(46, 189, 246, 0.18), transparent 70%),
    radial-gradient(40% 50% at 10% 10%, rgba(81, 240, 168, 0.12), transparent 70%);
  --a-mesh-page: radial-gradient(45% 70% at 85% 0%, rgba(81, 240, 168, 0.18), transparent 70%),
    radial-gradient(40% 70% at 0% 0%, rgba(46, 189, 246, 0.1), transparent 70%);   /* the head of an inner page */
  --a-mesh-close: radial-gradient(40% 60% at 50% 100%, rgba(81, 240, 168, 0.22), transparent 70%);   /* the closing call */
  --a-dots: radial-gradient(color-mix(in srgb, var(--foreground) 8%, transparent) 1px, transparent 1px);
}

/* ==== what does not change with the mode: the theme's type, radius, sizes and shadows, then the documented scale ==== */
:root {
  /* ---- the theme's own scale (layer 1 and 2 names) ---- */
  --radius: 1.4rem;
  --radius-sm: calc(var(--radius) - 4px);   /* 18: badges, chips, menu items */
  --radius-md: calc(var(--radius) - 2px);   /* 20: buttons, fields */
  --radius-lg: var(--radius);               /* 22: cards */
  --radius-xl: calc(var(--radius) + 4px);   /* 26: dialogs, sheets */
  --radius-box: 6px;                        /* a checkbox, a kbd, a day in the calendar: small things keep a small corner */
  --radius-full: 999px;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-serif: Lora, ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;   /* IBM Plex Mono is not bundled */
  --letter-spacing: 0em;
  --text-3xs: 0.625rem; --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem;
  --leading-xs: 1rem; --leading-sm: 1.25rem; --leading-base: 1.5rem; --leading-tight: 1.15;
  --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --control-sm: 2rem; --control: 2.25rem; --control-lg: 2.5rem;
  --rail-closed: 60px; --rail-open: 260px; --header-h: 3.5rem;
  /* shadows, the tweakcn way from the theme's parameters (offset 0 1px, blur 3px, spread 0); they read the mode's opacity */
  --shadow-2xs: 0 1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 0.5));
  --shadow-xs: 0 1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 0.5));
  --shadow-sm: 0 1px 3px 0 hsl(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px hsl(var(--shadow-color) / var(--shadow-opacity));
  --shadow-md: 0 1px 3px 0 hsl(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -1px hsl(var(--shadow-color) / var(--shadow-opacity));
  --shadow-lg: 0 1px 3px 0 hsl(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -1px hsl(var(--shadow-color) / var(--shadow-opacity));
  --shadow-xl: 0 1px 3px 0 hsl(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -1px hsl(var(--shadow-color) / var(--shadow-opacity));
  --shadow-2xl: 0 1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-opacity) * 2.5));

  /* ---- type: Plus Jakarta Sans for every word (display included), Archivo only in the wordmark ---- */
  --a-font: var(--font-sans);
  --a-font-mark: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;   /* the wordmark: the text face at 800, tracked -0.02 em (LOGO-V2; the Archivo wordmark face is retired) */
  --a-mono: var(--font-mono);
  --a-t-2xs: 0.75rem;                          /* 12: tags, axis labels */
  --a-t-xs: 0.8125rem;                         /* 13: captions, eyebrows of a card */
  --a-t-sm: 0.9375rem;                         /* 15: secondary lines, tile text */
  --a-t-md: 1.0625rem;                         /* 17: running text, controls */
  --a-t-read: 1.125rem;                        /* 18: long-form reading (guides, help, legal) */
  --a-t-lg: 1.25rem;                           /* 20: lede, tile titles */
  --a-t-xl: 1.5rem;                            /* 24: h3 of a reading page */
  --a-t-2xl: clamp(1.75rem, 2.6vw, 2.25rem);   /* 28-36: h2 of a reading page */
  --a-t-h2: clamp(2.2rem, 4.4vw, 4rem);        /* 35-64: a section's headline */
  --a-t-h1: clamp(2.6rem, 5.4vw, 5rem);        /* 42-80: the headline of an inner page */
  --a-t-display: clamp(3rem, 6.6vw, 6.4rem);   /* 48-102: the one display line of the home page */
  /* the in-between sizes direction A uses for a role of their own (SITE-A 2026-11-04: every font size of the site is a token) */
  --a-t-3xs: 0.6875rem;                        /* 11: the smallest labels inside a chart or a picture */
  --a-t-ui: 0.875rem;                          /* 14: compact controls (the bar's buttons on a phone) */
  --a-t-lead: 1.1875rem;                       /* 19: a section's lead line, the wordmark */
  --a-t-title: 1.375rem;                       /* 22: the title of a tile or a card, a figure in a card */
  --a-t-figure-sm: 1.875rem;                   /* 30: a figure in a chart's ring, the console's figure on a phone */
  --a-t-figure: 2rem;                          /* 32: a figure beside a chart */
  --a-t-figure-md: 2.25rem;                    /* 36 */
  --a-t-figure-lg: 2.5rem;                     /* 40: the console's big figure */
  --a-lh-display: 0.94;
  --a-lh-head: 1.02;
  --a-lh-snug: 1.2;
  --a-lh-body: 1.55;
  --a-lh-read: 1.7;
  --a-w-text: 400;
  --a-w-label: 700;
  --a-w-strong: 750;
  --a-w-head: 800;
  --a-w-display: 800;          /* Plus Jakarta Sans stops at 800 */
  --a-track-display: -0.045em;
  --a-track-head: -0.04em;
  --a-track-title: -0.015em;
  --a-track-label: 0.08em;
  --a-measure: 68ch;                           /* the longest comfortable reading line */

  /* ---- layout ---- */
  --a-wrap: min(1240px, calc(100vw - 48px));
  --a-wrap-read: min(1120px, calc(100vw - 48px));   /* a reading page with its contents column */
  --a-gutter: 24px;
  --a-bar-h: 68px;                             /* the sticky bar */
  --a-sp-1: 4px; --a-sp-2: 8px; --a-sp-3: 12px; --a-sp-4: 16px; --a-sp-5: 24px; --a-sp-6: 32px; --a-sp-7: 48px; --a-sp-8: 64px;
  --a-sp-9: 96px; --a-sp-10: 120px;
  --a-section: clamp(72px, 9vw, 120px);        /* the vertical rhythm between sections */

  /* ---- radii: the theme's steps (buttons and fields near pills, cards 22, dialogs 26) ---- */
  --a-r-xs: 6px;
  --a-r-sm: var(--radius-sm);
  --a-r-btn: var(--radius-md);
  --a-r-field: var(--radius-md);
  --a-r-card: var(--radius-lg);
  --a-r-tile: var(--radius-xl);
  --a-r-pill: 999px;

  /* ---- glass ---- */
  --a-glass: blur(14px) saturate(1.3);         /* backdrop-filter of a glass panel over the mesh */
  --a-glass-bar: blur(16px);                   /* the sticky bar */

  /* ---- the dot grid behind a hero (its colour is an alias above) ---- */
  --a-dots-size: 28px 28px;

  /* ---- motion (the numbers of shared/js/motion.js; reduced motion zeroes them through data-motion) ---- */
  --a-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --a-ease-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
  --a-dur-press: 120ms;
  --a-dur-state: 180ms;
  --a-dur-lift: 250ms;
  --a-dur-menu: 220ms;
  --a-dur-rise: 700ms;
  --a-dur-arrive: 1100ms;
  --a-dur-strip: 48s;

  /* ---- the one motion scale of the redesign (DESIGN-SYSTEM 2026-11-05, plan D17; named --motion-* by the brief, for app and site),
     with the 21st board's values (docs/evaluations/21st-inspiration-2026-11-05.md, B). shared/js/motion.js holds the same numbers
     (DUR, CURVE, STAGGER) and its helpers run on them; a CSS transition reads them here. The --a-dur-* names above keep the site's
     older numbers (the app remaps them in app-a-base.css); new rules read these. Off and the system's reduced motion make every
     duration 0 (below); Calm keeps them (fades only: the movement is the sheet's to drop). ---- */
  --motion-fast: 120ms;        /* a press (scale 0.97), an icon or label swap, a surface leaving */
  --motion-base: 160ms;        /* hover, selected, a menu opening, a list entry arriving (D9) */
  --motion-lift: 200ms;        /* a dialog, an accordion, a tooltip, a switch */
  --motion-slow: 240ms;        /* a toast, a popover with content, the rail folding */
  --motion-sheet: 400ms;       /* a drawer or a sheet arriving */
  --motion-card: 420ms;        /* a card answering the pointer: lift, edge light, spotlight (owner 2026-11-06: slower) */
  --motion-sheet-out: 280ms;   /* ... and leaving */
  --motion-count: 500ms;       /* a figure rolling to a new value, never on first paint */
  --motion-rise: 500ms;        /* a site section's parts rising into view, once */
  --motion-pulse: 900ms;       /* the ring of a status dot, once per check result */
  --motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* the default: arrivals and answers to the hand */
  --motion-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* something travelling while visible (a thumb, an underline) */
  --motion-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);     /* drawers and sheets */
  --motion-ease-exit: cubic-bezier(0.3, 0, 1, 1);          /* leaving for good: toasts, closing menus */
  --motion-ease-standard: var(--motion-ease-out);          /* the brief's names for the same curves */
  --motion-ease-enter: var(--motion-ease-out);
  --motion-stagger-row: 30ms;  /* table rows and list entries on a first load (the 9th and later with the 8th) */
  --motion-stagger-menu: 16ms; /* menu items, the first after 30 ms */
  --motion-stagger-bar: 20ms;  /* a chart's bars on a first paint */
  --motion-stagger-section: 70ms; /* a site section's parts */

  /* ==== the redesign's tokens (DESIGN-SYSTEM 2026-11-05, plan D17; saas/DESIGN.md). Additions only: no value above changes. Sizes
     are the site's; the app remaps the size names it shares in app-a-base.css (its compact D10 scale). The base template is the 21st
     board's Efferd "Dashboard 2" lattice (docs/evaluations/21st-inspiration-2026-11-05.md, A): flat cells, 1 px hairlines, no shadow
     at rest. ==== */


  /* ---- the lattice (board A) and its cells ---- */
  --a-lattice-gap: 1px;        /* the hairline between cells: the container's ground shows through a 1 px gap */
  --a-r-cell: 0px;             /* a cell has no corner of its own; the lattice has the card's */
  --a-cell-pad: 16px;          /* a cell's or a card's padding */
  --a-cell-pad-lg: 20px;       /* a lone panel */

  /* ---- type of the cells (board A: KPI cell, card header, table card, activity list) ---- */
  --a-w-medium: 500;           /* a table's header row */
  --a-w-semibold: 600;         /* a KPI value, a card's title */
  --a-t-kpi-label: 0.75rem;    /* 12: the KPI's label, ink-2, tracking below */
  --a-track-kpi-label: 0.01em;
  --a-t-kpi: 1.5rem;           /* 24: the KPI's value, semibold, tabular figures */
  --a-t-kpi-foot: 0.75rem;     /* 12: the delta and "vs last week" */
  --a-t-card-title: 1rem;      /* 16: a card's title, semibold */
  --a-t-card-desc: 0.8125rem;  /* 13: the one line under it, ink-2 */
  --a-t-th: 0.8125rem;         /* 13: a table's header row, medium */
  --a-row: 40px;               /* a table or list row */
  --a-row-fade: 48px;          /* the last visible row fades over this under "View all" */
  --a-share-row: 48px;         /* a share bar's row (the live side card) */

  /* ---- sizes: controls, icons, tiles (site values; the app's compact scale is --c-* in app-a-base.css) ---- */
  --a-control-sm: 40px;        /* the site's small button and segmented options */
  --a-control: 46px;           /* the site's button */
  --a-control-lg: 56px;        /* the site's URL check (a field and its button joined) */
  --a-target: 44px;            /* the least a finger gets (WCAG 2.5.8 asks 24; we keep 44 on touch) */
  --a-icon: 16px;              /* an icon beside words: actions, section titles, rows */
  --a-icon-lg: 20px;           /* a card's or a step's icon */
  --a-logo: 24px;              /* a brand logo (brands.svg) ... */
  --a-logo-tile: 40px;         /* ... in its neutral tile */
  --a-icon-tile: 32px;         /* an empty card's icon tile */
  --a-r-dialog: var(--radius-xl);   /* a dialog's corners */

  /* ---- the focus ring: one, never removed (3 px of --a-focus; 3 px off on the site, 2 px on fields and in the app) ---- */
  --a-focus-width: 3px;
  --a-focus-offset: 3px;
  --a-focus-offset-field: 2px;

  /* ---- charts (series colours are --a-s1..s3 and the state marks; these are the marks' shape) ---- */
  --a-chart-stroke: 2px;       /* a line or a step line */
  --a-chart-tint: 16%;         /* a bar's or an area's flat fill: color-mix(in srgb, <series> var(--a-chart-tint), transparent), no gradient */
  --a-chart-edge: 1px;         /* the solid top edge of a tinted bar */

  /* ---- breakpoints (a media query cannot read a custom property: the numbers are written in the @media rules; scripts read these) */
  --a-bp-phone: 375px;
  --a-bp-tablet: 768px;        /* the lattice: 2 columns from here */
  --a-bp-laptop: 1024px;       /* the lattice: 4 columns from here */
  --a-bp-desktop: 1440px;      /* the reference screen (1440 x 900: the dashboard fits without scrolling) */
}

/* The redesign's names made of other tokens. Declared on :root AND the chapters, so a section that forces a mode works them out again from
   its own colours (a custom property inherits its computed value: an alias set on :root alone would keep the night's colours). */
:root, .chapter-light, .chapter-dark {
  /* surfaces by height: the page, a cell or card, what floats */
  --a-layer-page: var(--a-ground);
  --a-cell: var(--a-ground);              /* a lattice cell: opaque, so the 1 px gap shows the hairline and nothing else */
  --a-lattice: var(--a-line);             /* the lattice's own ground: the hairline colour */
  --a-layer-float: var(--a-surface-solid); /* a menu, a popover, a toast, a dialog: opaque */
  --a-scrim: color-mix(in srgb, var(--a-ground) 70%, transparent);   /* behind a dialog or a drawer */
  --a-elev-0: none;                       /* at rest: flat */
  --a-elev-1: inset 0 0 0 1px var(--a-line);   /* a card or a control at rest: the hairline ring */
  /* borders and rings */
  --a-hairline: 1px solid var(--a-line);
  --a-hairline-strong: 1px solid var(--a-line-2);
  --a-ring: inset 0 0 0 1px var(--a-line);
  --a-ring-hover: inset 0 0 0 1px var(--a-line-2);
  --a-ring-field: inset 0 0 0 1px var(--a-field-edge);
  --a-focus-ring: var(--a-focus-width) solid var(--a-focus);        /* outline: var(--a-focus-ring); outline-offset: var(--a-focus-offset) */
  --a-focus-shadow: 0 0 0 var(--a-focus-width) var(--a-focus);      /* where an outline cannot show (inside a clipped box) */
  /* status: the mark (dot, bar, glyph), its tint and its words; always with a glyph or a word, never colour alone */
  --a-status-success: var(--a-ok-mark);      --a-status-success-bg: var(--a-ok-bg);      --a-status-success-ink: var(--a-ok-ink);
  --a-status-warning: var(--a-warn-mark);    --a-status-warning-bg: var(--a-warn-bg);    --a-status-warning-ink: var(--a-warn-ink);
  --a-status-partial: var(--a-partial-mark); --a-status-partial-bg: var(--a-partial-bg); --a-status-partial-ink: var(--a-partial-ink);   /* down from one region */
  --a-status-danger: var(--a-fail-mark);     --a-status-danger-bg: var(--a-fail-bg);     --a-status-danger-ink: var(--a-fail-ink);
  --a-status-danger-strong: var(--a-fail-strong);   /* the filled "Down" pill: white words on it */
  --a-status-info: var(--a-s1);              --a-status-info-bg: var(--a-tag-bg);        --a-status-info-ink: var(--a-tag-ink);
  --a-status-maintenance: var(--a-planned-mark); --a-status-maintenance-bg: var(--a-planned-bg); --a-status-maintenance-ink: var(--a-planned-ink);
  --a-status-paused: var(--a-ink-3);         --a-status-paused-bg: var(--a-unknown-bg);  --a-status-paused-ink: var(--a-ink-2);
  --a-status-nodata: var(--a-ink-3);         --a-status-nodata-bg: var(--a-unknown-bg);  --a-status-nodata-ink: var(--a-ink-2);
  /* charts: series, the states as series, the grid */
  --a-chart-1: var(--a-s1);
  --a-chart-2: var(--a-s2);
  --a-chart-3: var(--a-s3);
  --a-chart-up: var(--a-ok-mark);
  --a-chart-warn: var(--a-warn-mark);
  --a-chart-partial: var(--a-partial-mark);
  --a-chart-down: var(--a-fail-mark);
  --a-chart-grid: var(--a-line);
  --a-chart-axis: var(--a-ink-3);
  --a-chart-cursor: var(--a-line-2);
}

/* The categories, applied (owner 2026-11-09/10: "a little colour everywhere ... not too colourful, in harmony"; DESIGN.md "Colour roles").
   A class on the card, the row or the link of a thing says what the thing IS (monitoring, alerts and channels, security); that thing's
   icon tile reads four names from it: --cat-bg (the tile), --cat-ink (the icon on it: 4.5:1 or more on the tile), --cat-edge (the tile's
   1 px edge) and --cat-mark (a filled mark, a legend swatch). A tile with no class around it falls back to the neutral tile; `.cat-none`
   puts a thing back to neutral inside a coloured page. Custom properties only, like the rest of this file: only icon tiles read them,
   never a paragraph, a heading or a section's fill. */
.cat-monitor { --cat-mark: var(--cat-monitor); --cat-ink: var(--cat-monitor-ink); --cat-bg: var(--cat-monitor-bg);
  --cat-edge: color-mix(in srgb, var(--cat-monitor) 30%, transparent); }
.cat-alert { --cat-mark: var(--cat-alert); --cat-ink: var(--cat-alert-ink); --cat-bg: var(--cat-alert-bg);
  --cat-edge: color-mix(in srgb, var(--cat-alert) 30%, transparent); }
.cat-security { --cat-mark: var(--cat-security); --cat-ink: var(--cat-security-ink); --cat-bg: var(--cat-security-bg);
  --cat-edge: color-mix(in srgb, var(--cat-security) 30%, transparent); }
.cat-none { --cat-mark: initial; --cat-ink: initial; --cat-bg: initial; --cat-edge: initial; }

/* Reduced motion reaches the direction-A durations the same way it reaches the v2 ones (shared/js/motion.js sets data-motion on the root
   before the first paint): Calm keeps fades and drops movement, Off and the system's reduced-motion setting make everything instant. */
:root[data-motion="calm"] { --a-dur-rise: 0ms; --a-dur-arrive: 0ms; --a-dur-strip: 0ms; }
:root[data-motion="off"] { --a-dur-press: 0ms; --a-dur-state: 0ms; --a-dur-lift: 0ms; --a-dur-menu: 0ms; --a-dur-rise: 0ms; --a-dur-arrive: 0ms;
  --a-dur-strip: 0ms; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) { --a-dur-press: 0ms; --a-dur-state: 0ms; --a-dur-lift: 0ms; --a-dur-menu: 0ms; --a-dur-rise: 0ms;
    --a-dur-arrive: 0ms; --a-dur-strip: 0ms; }
}
/* The motion scale is instant with Off and whenever the system asks for reduced motion (the helpers of motion.js do the same). */
:root[data-motion="off"] { --motion-fast: 0ms; --motion-base: 0ms; --motion-lift: 0ms; --motion-slow: 0ms; --motion-sheet: 0ms; --motion-card: 0ms;
  --motion-sheet-out: 0ms; --motion-count: 0ms; --motion-rise: 0ms; --motion-pulse: 0ms; --motion-stagger-row: 0ms;
  --motion-stagger-menu: 0ms; --motion-stagger-bar: 0ms; --motion-stagger-section: 0ms; }
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; --motion-lift: 0ms; --motion-slow: 0ms; --motion-sheet: 0ms; --motion-card: 0ms; --motion-sheet-out: 0ms;
    --motion-count: 0ms; --motion-rise: 0ms; --motion-pulse: 0ms; --motion-stagger-row: 0ms; --motion-stagger-menu: 0ms;
    --motion-stagger-bar: 0ms; --motion-stagger-section: 0ms; }
}