/* Design tokens (card 281). The first part of this file is the design's
   own token file, design/explorations/dashboard/tokens.css (D-196), name
   for name and value for value: the light theme on :root, and the dark
   theme twice, once for a person who chose Dark (data-theme="dark" on
   <html>, drawn by the server) and once for System when the browser
   prefers dark. A test holds the two files together
   (internal/web/tokens_test.go).

   The design's scaling root (html font-size) lives in base.css with the
   body's size, for the signed-in app only, since card 282 (the shell
   sets the density every app screen inherits).

   The second part is the compatibility block: every token name the
   screens not yet redrawn still use, mapped to the nearest design token
   so they follow the theme. A card that redraws a screen deletes the
   aliases it freed; the test fails on an alias nothing uses. */
:root {
  color-scheme: light;
  /* Ground and surfaces. */
  --ground: #F4F1E8;          /* the page behind everything */
  --ground-2: #ECE8DD;        /* the sidebar, a quiet band */
  --surface: #FFFFFF;         /* cards, tables, dialogs */
  --surface-2: #FAF8F3;       /* a row on hover, a table head */
  --surface-sunk: #F0EDE4;    /* inputs' ground, code */

  /* Ink. */
  --ink: #121315;
  --ink-2: #4A4843;           /* secondary text, 8.6:1 on white */
  --ink-3: #6B6860;           /* labels and meta, 5.3:1 on white */
  --ink-on-accent: #FFFFFF;

  /* Lines. */
  --line: rgba(18, 19, 21, .10);
  --line-2: rgba(18, 19, 21, .18);
  --line-strong: rgba(18, 19, 21, .32);

  /* Action. One accent; it marks what can be done and what is selected. */
  --accent: #1F3FE5;
  --accent-2: #1733C4;        /* pressed */
  --accent-ground: #EAEDFD;   /* a selected row, a current tab */
  --accent-ink: #1733C4;      /* accent as text on white, 7:1 */

  /* The explanation's own ground (the site's violet). */
  --explain: #5B4BE0;
  --explain-ground: #EFEDFC;

  /* States: word, glyph and colour always together (RULES 6). */
  --up: #147A4B;         --up-ground: #E3F3EA;         --up-bar: #2E9E68;
  --degraded: #955800;   --degraded-ground: #FBF0DC;   --degraded-bar: #D6972B;
  --down: #B82C18;       --down-ground: #FCE8E3;       --down-bar: #E8462F;
  --paused: #5C5952;     --paused-ground: #ECE9E1;     --paused-bar: #B5B0A5;
  --pending: #3F6286;    --pending-ground: #E6EDF4;    --pending-bar: #9DB3C9;
  --nodata-bar: #DDD8CC;

  /* The response chart's locations: told apart by hue, never a state
     colour, each line 3:1 or more on a card and on an incident band. */
  --chart-fra: #1F3FE5; --chart-sto: #CC4A98; --chart-iad: #0B7285;

  /* Faces (D-192 default). */
  --font-ui: "Outfit", system-ui, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, monospace;
  --font-title: "Space Grotesk", "Outfit", system-ui, sans-serif;

  /* Type scale: fixed sizes; an app does not scale its type with the
     window beyond the root. */
  --t-title: 1.625rem;   /* a page title */
  --t-figure: 1.75rem;   /* a large figure */
  --t-h2: 1.0625rem;     /* a card or section heading */
  --t-body: 0.9375rem;   /* 15, interface text */
  --t-small: 0.8125rem;  /* 13, meta and help */
  --t-data: 0.875rem;    /* 14, mono figures and addresses */
  --t-data-s: 0.75rem;   /* 12, mono labels */
  --lh: 1.45;
  --lh-tight: 1.2;

  /* Space: a four-point scale. */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 2rem; --s-8: 2.5rem; --s-9: 3rem;

  /* Shape. */
  --r-1: 0.375rem;   /* chips, inputs' inner parts */
  --r-2: 0.625rem;   /* buttons, inputs */
  --r-3: 0.875rem;   /* cards, dialogs */
  --r-pill: 999px;

  /* Elevation: surfaces sit on the ground by a hairline; only floating
     layers (menus, dialogs, toasts) carry a shadow. */
  --shadow-float: 0 1rem 2.5rem -1rem rgba(18, 19, 21, .30), 0 0 0 1px rgba(18, 19, 21, .06);
  --scrim: rgba(15, 16, 18, .42);   /* behind a dialog or a sheet */

  /* Controls. */
  --control: 2.25rem;     /* a button or input on a desktop */
  --control-s: 1.875rem;  /* a compact control in a table row */
  --tap: 2.75rem;         /* the phone's minimum */
  --row: 3rem;            /* a list row */

  /* Frame. */
  --sidebar: 15rem;
  --topbar: 3.25rem;
  --content: 78rem;
  --gutter: 1.5rem;
  --gutter-phone: 1rem;

  /* Motion. */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --d-fast: 150ms;
  --d-base: 250ms;
}

/* Dark: the same system on an ink ground. States keep their hue and gain
   light for contrast; the accent lifts to stay readable. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0F1012; --ground-2: #15171A; --surface: #1A1C20; --surface-2: #202328; --surface-sunk: #131518;
  --ink: #F1EEE6; --ink-2: #BEBAB0; --ink-3: #8F8B82; --ink-on-accent: #FFFFFF;
  --line: rgba(241, 238, 230, .09); --line-2: rgba(241, 238, 230, .16); --line-strong: rgba(241, 238, 230, .30);
  --accent: #4B63EE; --accent-2: #3F56DB; --accent-ground: rgba(91, 116, 255, .16); --accent-ink: #9AABFF;
  --explain: #A99DFF; --explain-ground: rgba(169, 157, 255, .12);
  --up: #5BD192; --up-ground: rgba(91, 209, 146, .12); --up-bar: #3FB978;
  --degraded: #F0B45A; --degraded-ground: rgba(240, 180, 90, .13); --degraded-bar: #E0A23F;
  --down: #FF7A66; --down-ground: rgba(255, 122, 102, .13); --down-bar: #F05A43;
  --paused: #A9A499; --paused-ground: rgba(169, 164, 153, .12); --paused-bar: #6E6A62;
  --pending: #8FB4DA; --pending-ground: rgba(143, 180, 218, .12); --pending-bar: #5F7FA0;
  --nodata-bar: #2C2F35;
  --chart-fra: #5F78F5; --chart-sto: #FF9AD0; --chart-iad: #3BC4D6;
  --shadow-float: 0 1rem 2.5rem -1rem rgba(0, 0, 0, .7), 0 0 0 1px rgba(241, 238, 230, .08); --scrim: rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0F1012; --ground-2: #15171A; --surface: #1A1C20; --surface-2: #202328; --surface-sunk: #131518;
    --ink: #F1EEE6; --ink-2: #BEBAB0; --ink-3: #8F8B82; --ink-on-accent: #FFFFFF;
    --line: rgba(241, 238, 230, .09); --line-2: rgba(241, 238, 230, .16); --line-strong: rgba(241, 238, 230, .30);
    --accent: #4B63EE; --accent-2: #3F56DB; --accent-ground: rgba(91, 116, 255, .16); --accent-ink: #9AABFF;
    --explain: #A99DFF; --explain-ground: rgba(169, 157, 255, .12);
    --up: #5BD192; --up-ground: rgba(91, 209, 146, .12); --up-bar: #3FB978;
    --degraded: #F0B45A; --degraded-ground: rgba(240, 180, 90, .13); --degraded-bar: #E0A23F;
    --down: #FF7A66; --down-ground: rgba(255, 122, 102, .13); --down-bar: #F05A43;
    --paused: #A9A499; --paused-ground: rgba(169, 164, 153, .12); --paused-bar: #6E6A62;
    --pending: #8FB4DA; --pending-ground: rgba(143, 180, 218, .12); --pending-bar: #5F7FA0;
    --nodata-bar: #2C2F35;
    --chart-fra: #5F78F5; --chart-sto: #FF9AD0; --chart-iad: #3BC4D6;
    --shadow-float: 0 1rem 2.5rem -1rem rgba(0, 0, 0, .7), 0 0 0 1px rgba(241, 238, 230, .08); --scrim: rgba(0, 0, 0, .6);
  }
}

/* The public status page's states (#946, Svet 2026-10-17): one colour,
   one glyph and one word each, close to what visitors know from other
   status pages. Operational, degraded performance, partial outage, major
   outage and maintenance, with no data and paused beside them. Scoped to
   the page's frame, so the dashboard keeps the design's state colours
   above; maintenance has its own blue and no longer borrows the waiting
   slate. internal/web/tokens_test.go holds every ink at 4.5:1 and every
   bar at 3:1 on the card and on the ground, in both themes. */
.pub-body {
  --up-bar: #2C9B65;
  --degraded: #8A5A00;   --degraded-ground: #FBF0DC;   --degraded-bar: #B97F00;
  --partial: #B4461A;    --partial-ground: #FDEBE0;    --partial-bar: #D86A12;
  --down: #B82C18;       --down-ground: #FCE8E3;       --down-bar: #DC3B2B;
  --maint: #1F5FA8;      --maint-ground: #E4EEFA;      --maint-bar: #2F7FD8;
  --nodata: #5C5952;     --nodata-ground: #ECE9E1;     --nodata-bar: #D9D4C7;
}
:root[data-theme="dark"] .pub-body {
  --up-bar: #3FB978;
  --degraded: #F5C35A; --degraded-ground: rgba(245, 195, 90, .13); --degraded-bar: #F2B42C;
  --partial: #FF9A6B; --partial-ground: rgba(255, 154, 107, .13); --partial-bar: #F27D45;
  --down: #FF7A66; --down-ground: rgba(255, 122, 102, .13); --down-bar: #F05A43;
  --maint: #8EC1FF; --maint-ground: rgba(142, 193, 255, .12); --maint-bar: #5AA2F0;
  --nodata: #A9A499; --nodata-ground: rgba(169, 164, 153, .12); --nodata-bar: #2C2F35;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pub-body {
    --up-bar: #3FB978;
    --degraded: #F5C35A; --degraded-ground: rgba(245, 195, 90, .13); --degraded-bar: #F2B42C;
    --partial: #FF9A6B; --partial-ground: rgba(255, 154, 107, .13); --partial-bar: #F27D45;
    --down: #FF7A66; --down-ground: rgba(255, 122, 102, .13); --down-bar: #F05A43;
    --maint: #8EC1FF; --maint-ground: rgba(142, 193, 255, .12); --maint-bar: #5AA2F0;
    --nodata: #A9A499; --nodata-ground: rgba(169, 164, 153, .12); --nodata-bar: #2C2F35;
  }
}