/**
 * Design tokens — the single place any visual value is allowed to live.
 *
 * Templates must never hard-code a colour, spacing step or type scale. That rule is what
 * makes a redesign an edit to this file and templates/, rather than a hunt through PHP.
 *
 * Values come from the LWS redesign (redesign_api: the home and documentation mockups), read
 * from their inline styles: the LWS blue header bar and navy footer, orange for the brand's
 * accents, Poppins. The mockups draw a light site only; the dark palette below is a neutral
 * graphite, with the bar and the assistant in a muted LWS blue: at full saturation they glared
 * from it, and the orange stays the accent. The site has had a dark mode since Phase 2, and the
 * redesign's rule is to keep whatever the mockups, drawn from an older build, did not show.
 *
 * On contrast: pills and buttons carry white text at 10–15px, which needs 4.5:1. Three of the
 * mockup's colours do not reach it — the GET green (3.2:1), the PUT orange (3.0:1) and the 314
 * amber (2.7:1) — so those hues are kept at the first depth that does. The same goes for the
 * brand orange itself: #f7671a is 3.0:1 against white, so it marks without carrying small
 * text (tab underline, current row, icons, focus ring), while buttons and chips that print on
 * orange use --lws-orange-deep. That is the one visible departure from the mockups, and
 * tests/ContrastTest.php holds every pill, button and text colour below to it.
 *
 * The pill colours are deliberately *not* overridden per theme: one set that clears 4.5:1
 * against white text and stays legible on both page backgrounds. An earlier token file existed
 * because a method pill had been allowed to become a bright mint in dark mode and measured
 * about 2:1 — invisible to anyone who develops in light mode.
 */

/*
 * Fonts, self-hosted: no request leaves the site, and no CSP exception is needed. Poppins has
 * no variable build, so there is one file per weight and subset, and a browser downloads only
 * the ones a page uses. JetBrains Mono stays for code: the mockups fall back to the system
 * monospace, which differs from one reader to the next. Licences sit beside the files.
 */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-400-latin-ext.woff2") format("woff2");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-400-latin.woff2") format("woff2");
  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: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500-latin-ext.woff2") format("woff2");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500-latin.woff2") format("woff2");
  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: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600-latin-ext.woff2") format("woff2");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600-latin.woff2") format("woff2");
  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: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-latin-ext.woff2") format("woff2");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-latin.woff2") format("woff2");
  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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  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;
}

:root {
  color-scheme: light;

  /* Brand. Not themed: the bar, the footer and the orange are LWS's in both themes. */
  --lws-orange: #f7671a;       /* marks only: 3.0:1 against white, see above */
  --lws-orange-deep: #c24e0c;  /* orange that carries white text: 4.8:1 */
  --lws-orange-ink: #b8480a;   /* orange as text on a light surface: 5.3:1 */
  --lws-blue: #1f4ba0;         /* the header bar */
  --lws-blue-deep: #173a86;    /* the bar's current tab and hover */
  --lws-navy: #0f2766;         /* the footer and the code panels */
  --lws-navy-deep: #0b1f55;    /* a code panel's header */
  --lws-status-dot: #34c759;   /* "service status", before its label */

  /* Surfaces */
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-raised: #F7F9FD;
  --color-bg-subtle: #F3F6FB;  /* the sidebar */
  --color-bg-inset: #EEF3FB;
  --color-border: #DBE3F1;
  --color-border-soft: #E3E9F4;
  --color-border-strong: #C5CFDF;

  /* The two header rows and the footer */
  --color-top-bg: #FFFFFF;
  --color-top-border: #E3E9F4;
  --color-bar: var(--lws-blue);
  --color-bar-active: var(--lws-blue-deep);
  --color-bar-ink: #FFFFFF;
  --color-bar-control-bg: #FFFFFF;      /* the switcher and the search, on the bar */
  --color-bar-control-ink: #1B3A8C;
  --color-bar-control-muted: #5F6B85;
  --color-footer-bg: var(--lws-navy);
  --color-footer-ink: #C9D4EE;
  --color-footer-strong: #FFFFFF;
  --color-footer-rule: rgba(255, 255, 255, 0.12);

  /* The hub's tinted blocks: the hero's wash and the documentation cards */
  --hero-from: #EEF3FB;
  --hero-to: #F7F9FD;
  --tint-sand: #F6F1E9;
  --tint-blue: #EAF1FB;
  --tint-green: #E9F6EE;
  --tint-orange: #FFF4EC;

  /* Text. Headings and strong text are the navy blue; running text is the grey-blue. */
  --color-text: #1B3A8C;
  --color-text-secondary: #3C4A63;
  --color-text-muted: #5F6B85;
  --color-link: #1F4BA0;
  --color-link-hover: var(--lws-orange-ink);

  /* Accent: the primary button, the current item, the focus ring */
  --color-accent: var(--lws-orange-deep);
  --color-accent-hover: #A8430A;
  --color-accent-bg: #FFF4EC;
  --color-accent-ink: #9A3F08;
  --color-accent-border: #FBD5BB;
  --color-accent-text: var(--lws-orange-ink);  /* orange words on the page */
  --color-mark: var(--lws-orange);
  --color-focus: var(--lws-orange);
  --color-info-bg: #EEF3FB;
  --color-info-ink: #1B3A8C;
  /* The current row in a list (the sidebar, search results): a blue tint, apart from the hover */
  --color-current-bg: #D3E0F6;
  --color-current-ink: var(--lws-blue-deep);
  --color-row-hover: var(--color-surface);  /* a row under the pointer, in the sidebar */

  /* Code. The panels are dark in both themes (navy here, near-black in dark mode), so their ink
     and token colours are not themed. */
  --color-code-bg: var(--lws-navy);
  --color-code-head: var(--lws-navy-deep);
  --color-code-ink: #DFE7FB;
  --color-code-muted: #C9D4EE;
  --color-code-gutter: #7486B3;
  --color-code-border: rgba(255, 255, 255, 0.10);
  /* The white buttons on a panel — copy, fold — under the pointer: light in both themes too. */
  --color-code-control-hover: #FFE9D9;
  --code-keyword: #7FB5FF;
  --code-string: #8CD98C;
  --code-variable: #C9A6FF;
  --code-number: #FF9B5C;
  --code-comment: #93A3C9;

  /* Required / optional */
  --color-required: #C02C2C;
  --color-required-bg: #FDECEC;
  --color-ok: #1A7D46;
  --color-ok-bg: #E6F6EC;

  /* Disabled controls and tooltips */
  --color-disabled-bg: #E6EBF3;
  --color-disabled-ink: #7F8AA1;
  --color-tooltip-bg: var(--lws-navy);
  --color-tooltip-ink: #EEF3FB;

  /* Overlays, tinted with the navy rather than black, as the mockups' shadows are */
  --color-scrim: rgba(11, 31, 85, 0.55);
  --color-scrim-light: rgba(11, 31, 85, 0.18);
  --shadow-menu: 0 10px 30px rgba(15, 39, 102, 0.22);
  --shadow-modal: 0 28px 60px rgba(15, 39, 102, 0.34);
  --shadow-tooltip: 0 10px 24px rgba(15, 39, 102, 0.26);
  --shadow-tab: -4px 0 14px rgba(15, 39, 102, 0.10);
  --shadow-card: 0 20px 50px rgba(27, 58, 140, 0.22);
  --shadow-button: 0 4px 12px rgba(194, 78, 12, 0.28);

  /* The assistant, in the LWS help centre's own colours (aide.lws.fr), so a reader meets the same
     widget there and here. White reads on both ends of its gradient. */
  --assistant-from: #1C459A;
  --assistant-to: #2563EB;
  --assistant-focus: var(--assistant-from);  /* the field's border once focused */
  --assistant-hover: #163A82;  /* the send button under the pointer */
  --assistant-online: #22C55E;
  --assistant-log: #F9FAFB;
  --assistant-bubble: #FFFFFF;
  --assistant-border: #E5E7EB;
  --assistant-ink: #1F2937;
  --assistant-muted: #6B7280;
  --assistant-notice-bg: #FFFBEB;
  --assistant-notice-border: #FDE68A;
  --assistant-notice-ink: #78350F;
  --assistant-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);

  /* HTTP method pills. White text; see the contrast note at the top of this file. */
  --method-get: #15803D;
  --method-post: #2F6FE0;
  --method-put: #C2410C;
  --method-patch: #6D28D9;
  --method-delete: #D93A3A;

  /* HTTP methods as text in a code panel's header, which is navy in both themes. */
  --method-get-ink: #6FE09A;
  --method-post-ink: #8DB4FF;
  --method-put-ink: #FFA26B;
  --method-patch-ink: #C7A4FF;
  --method-delete-ink: #FF8F85;

  /* Status pills, by first digit. */
  --status-2xx: #15803D;
  --status-3xx: #A15C00;
  --status-4xx: #D93A3A;
  --status-5xx: #D93A3A;

  /**
   * Badge kinds, as fg / bg / border triples.
   *
   * Nine of them, because two documentations already need seven: the LWS API has deferred and
   * paid operations, and the Panel KVM API grades every endpoint by permission level and
   * marks the asynchronous ones. A tenth kind is three custom properties and a CSS class.
   */
  --badge-ro-fg: #14653B;       --badge-ro-bg: #E6F6EC;       --badge-ro-border: #C7E6D3;
  --badge-rw-fg: #1F4BA0;       --badge-rw-bg: #EEF3FB;       --badge-rw-border: #DBE3F1;
  --badge-del-fg: #B42318;      --badge-del-bg: #FDECEC;      --badge-del-border: #F6CFCF;
  --badge-async-fg: #8A5300;    --badge-async-bg: #FDF3E3;    --badge-async-border: #F0DCAE;
  --badge-paid-fg: #9A3F08;     --badge-paid-bg: #FFF4EC;     --badge-paid-border: #FBD5BB;
  --badge-deferred-fg: #8A5300; --badge-deferred-bg: #FDF3E3; --badge-deferred-border: #F0DCAE;
  --badge-test-fg: #5B21B6;     --badge-test-bg: #EFE7FC;     --badge-test-border: #DCCDF7;
  --badge-live-fg: #14653B;     --badge-live-bg: #E6F6EC;     --badge-live-border: #9ED5B4;
  --badge-soon-fg: #4A5568;     --badge-soon-bg: #F1F4F9;     --badge-soon-border: #D5DCE8;
  --badge-v2-fg: #5A4B8A;       --badge-v2-bg: #F1EEF9;       --badge-v2-border: #D8CFF0;

  /*
   * Typography.
   *
   * A px ladder rather than a modular scale, named by size, in rem so a reader's font-size
   * preference still scales the page. Headings get role names because they change size between
   * desktop and mobile. Poppins sets wider than the previous face, so running text keeps its
   * sizes and the display sizes follow the mockups.
   */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --text-9-5: 0.59375rem;
  --text-10: 0.625rem;
  --text-10-5: 0.65625rem;
  --text-11: 0.6875rem;
  --text-11-5: 0.71875rem;
  --text-12: 0.75rem;
  --text-12-5: 0.78125rem;
  --text-13: 0.8125rem;
  --text-13-5: 0.84375rem;
  --text-14: 0.875rem;
  --text-14-5: 0.90625rem;
  --text-15: 0.9375rem;
  --text-16: 1rem;
  --text-16-5: 1.03125rem;
  --text-17-5: 1.09375rem;
  --text-18: 1.125rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-28: 1.75rem;
  --text-h2: 1.5rem;             /* 24px; 20px on mobile */
  --text-h1-page: 2rem;          /* 32px; 25px on mobile */
  --text-h1: 2.375rem;           /* 38px; 28px on mobile */
  --text-hero: clamp(2.125rem, 4vw, 3rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Shape. The mockups round controls by 4–6px and cards by 8–12px. */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-control: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-card: 12px;
  --radius-pill: 999px;

  /* Layout. The header is two rows: the white one scrolls away, the blue bar stays. */
  --header-top-height: 60px;
  --header-height: 48px;
  --nav-width: 290px;
  --rail-width: 460px;
  --toc-width: 220px;
  --main-max: 880px;
  --hub-max: 1180px;
}

/* Where there is room, the code column takes the mockup's 440px of content (plus its 32px
   gutter); narrower, it keeps 460px so the article beside it is not squeezed. */
@media (min-width: 1440px) {
  :root { --rail-width: 472px; }
}

@media (max-width: 1099px) {
  :root { --nav-width: 240px; }
}
@media (max-width: 760px) {
  :root {
    --header-top-height: 56px;
    --text-h2: 1.25rem;
    --text-h1-page: 1.5625rem;
    --text-h1: 1.75rem;
  }
}

/**
 * Dark mode.
 *
 * Declared once and applied by two selectors: the system preference, and an explicit
 * `data-theme` that theme.js sets. The `:not([data-theme="light"])` guard is what lets a
 * reader on a dark desktop choose light without the two rules fighting. Without JavaScript
 * there is no data-theme at all and the system preference decides.
 *
 * The pill colours are deliberately absent here — see the note at the top of the file.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --assistant-log: #121417;
    --assistant-bubble: #1B1E24;
    --assistant-border: #343A45;
    --assistant-ink: #ECEEF2;
    --assistant-muted: #9AA2B1;
    --assistant-notice-bg: #2A2110;
    --assistant-notice-border: #5C4813;
    --assistant-notice-ink: #FDE68A;
    --assistant-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
    /* The help centre's blues, muted to sit in the graphite. White reads on both ends. */
    --assistant-from: #2B3850;
    --assistant-to: #394E74;
    --assistant-focus: #6F93D6;
    --assistant-hover: #394E74;

    --color-bg: #121417;
    --color-surface: #1B1E24;
    --color-surface-raised: #22262D;
    --color-bg-subtle: #17191E;
    --color-bg-inset: #2A2F38;
    --color-border: #343A45;
    --color-border-soft: #2A2F38;
    --color-border-strong: #454C59;

    --color-top-bg: #121417;
    --color-top-border: #2A2F38;
    /* The bar in a muted blue; its current tab and hover lighter, which reads on a dark bar. */
    --color-bar: #242E42;
    --color-bar-active: #33415B;
    --color-bar-control-bg: rgba(255, 255, 255, 0.12);
    --color-bar-control-ink: #FFFFFF;
    --color-bar-control-muted: #C9D4EE;
    --color-footer-bg: #0C0E11;

    --hero-from: #1A1F29;
    --hero-to: #121417;
    --tint-sand: #221F1B;
    --tint-blue: #1E2738;
    --tint-green: #16291D;
    --tint-orange: #2A1E16;

    --color-text: #ECEEF2;
    --color-text-secondary: #C5CAD3;
    --color-text-muted: #9AA2B1;
    --color-link: #8AB4FF;
    --color-link-hover: #FFA26B;

    --color-accent-bg: #2A1E16;
    --color-accent-ink: #FFB07A;
    --color-accent-border: #5A3A20;
    --color-accent-text: #FFA26B;
    --color-info-bg: #1E2738;
    --color-info-ink: #C5CAD3;
    --color-current-bg: #33415B;  /* the bar's current tab: one blue */
    --color-current-ink: #FFFFFF;
    --color-row-hover: #2A2F38;

    --color-code-bg: #0C0E11;
    --color-code-head: #08090B;

    --color-required: #FF8F85;
    --color-required-bg: #2E1B1A;
    --color-ok: #6FE09A;
    --color-ok-bg: #16291D;

    --color-disabled-bg: #2A2F38;
    --color-disabled-ink: #767E8E;
    --color-tooltip-bg: #ECEEF2;
    --color-tooltip-ink: #121417;

    --color-scrim: rgba(0, 0, 0, 0.66);
    --color-scrim-light: rgba(0, 0, 0, 0.30);

    --badge-ro-fg: #6FE09A;       --badge-ro-bg: #16291D;       --badge-ro-border: #24452F;
    --badge-rw-fg: #8DB4FF;       --badge-rw-bg: #1E2738;       --badge-rw-border: #33415B;
    --badge-del-fg: #FF8F85;      --badge-del-bg: #2E1B1A;      --badge-del-border: #4C2A26;
    --badge-async-fg: #FFC79A;    --badge-async-bg: #2A2219;    --badge-async-border: #5A3E22;
    --badge-paid-fg: #FFB07A;     --badge-paid-bg: #2A1E16;     --badge-paid-border: #5A3A20;
    --badge-deferred-fg: #FFC79A; --badge-deferred-bg: #2A2219; --badge-deferred-border: #5A3E22;
    --badge-test-fg: #C7A4FF;     --badge-test-bg: #241D33;     --badge-test-border: #3D2E5C;
    --badge-live-fg: #6FE09A;     --badge-live-bg: #16291D;     --badge-live-border: #24452F;
    --badge-soon-fg: #B0B7C3;     --badge-soon-bg: #2A2F38;     --badge-soon-border: #3D4350;
    --badge-v2-fg: #C7A4FF;       --badge-v2-bg: #241D33;       --badge-v2-border: #3D2E5C;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --assistant-log: #121417;
  --assistant-bubble: #1B1E24;
  --assistant-border: #343A45;
  --assistant-ink: #ECEEF2;
  --assistant-muted: #9AA2B1;
  --assistant-notice-bg: #2A2110;
  --assistant-notice-border: #5C4813;
  --assistant-notice-ink: #FDE68A;
  --assistant-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  /* The help centre's blues, muted to sit in the graphite. White reads on both ends. */
  --assistant-from: #2B3850;
  --assistant-to: #394E74;
  --assistant-focus: #6F93D6;
  --assistant-hover: #394E74;

  --color-bg: #121417;
  --color-surface: #1B1E24;
  --color-surface-raised: #22262D;
  --color-bg-subtle: #17191E;
  --color-bg-inset: #2A2F38;
  --color-border: #343A45;
  --color-border-soft: #2A2F38;
  --color-border-strong: #454C59;

  --color-top-bg: #121417;
  --color-top-border: #2A2F38;
  /* The bar in a muted blue; its current tab and hover lighter, which reads on a dark bar. */
  --color-bar: #242E42;
  --color-bar-active: #33415B;
  --color-bar-control-bg: rgba(255, 255, 255, 0.12);
  --color-bar-control-ink: #FFFFFF;
  --color-bar-control-muted: #C9D4EE;
  --color-footer-bg: #0C0E11;

  --hero-from: #1A1F29;
  --hero-to: #121417;
  --tint-sand: #221F1B;
  --tint-blue: #1E2738;
  --tint-green: #16291D;
  --tint-orange: #2A1E16;

  --color-text: #ECEEF2;
  --color-text-secondary: #C5CAD3;
  --color-text-muted: #9AA2B1;
  --color-link: #8AB4FF;
  --color-link-hover: #FFA26B;

  --color-accent-bg: #2A1E16;
  --color-accent-ink: #FFB07A;
  --color-accent-border: #5A3A20;
  --color-accent-text: #FFA26B;
  --color-info-bg: #1E2738;
  --color-info-ink: #C5CAD3;
  --color-current-bg: #33415B;  /* the bar's current tab: one blue */
  --color-current-ink: #FFFFFF;
  --color-row-hover: #2A2F38;

  --color-code-bg: #0C0E11;
  --color-code-head: #08090B;

  --color-required: #FF8F85;
  --color-required-bg: #2E1B1A;
  --color-ok: #6FE09A;
  --color-ok-bg: #16291D;

  --color-disabled-bg: #2A2F38;
  --color-disabled-ink: #767E8E;
  --color-tooltip-bg: #ECEEF2;
  --color-tooltip-ink: #121417;

  --color-scrim: rgba(0, 0, 0, 0.66);
  --color-scrim-light: rgba(0, 0, 0, 0.30);

  --badge-ro-fg: #6FE09A;       --badge-ro-bg: #16291D;       --badge-ro-border: #24452F;
  --badge-rw-fg: #8DB4FF;       --badge-rw-bg: #1E2738;       --badge-rw-border: #33415B;
  --badge-del-fg: #FF8F85;      --badge-del-bg: #2E1B1A;      --badge-del-border: #4C2A26;
  --badge-async-fg: #FFC79A;    --badge-async-bg: #2A2219;    --badge-async-border: #5A3E22;
  --badge-paid-fg: #FFB07A;     --badge-paid-bg: #2A1E16;     --badge-paid-border: #5A3A20;
  --badge-deferred-fg: #FFC79A; --badge-deferred-bg: #2A2219; --badge-deferred-border: #5A3E22;
  --badge-test-fg: #C7A4FF;     --badge-test-bg: #241D33;     --badge-test-border: #3D2E5C;
  --badge-live-fg: #6FE09A;     --badge-live-bg: #16291D;     --badge-live-border: #24452F;
  --badge-soon-fg: #B0B7C3;     --badge-soon-bg: #2A2F38;     --badge-soon-border: #3D4350;
  --badge-v2-fg: #C7A4FF;       --badge-v2-bg: #241D33;       --badge-v2-border: #3D2E5C;
}

/* ---- Admin ------------------------------------------------------------------------------
 * The admin takes the palettes above and adds the few colours its board uses beyond them, in
 * the same family: the graphite for its dark theme, the blue tints for its light one. Switched
 * exactly like the site: the system preference, or an explicit data-theme.
 */
:root {
  /* Two control heights, no more: a form's inputs, selects and buttons share the first; the
     header's controls and a table row's actions share the second. */
  --admin-control-h: 36px;
  --admin-control-h-sm: 30px;
  --admin-control-border: #C5CFDF;
  --admin-panel-bg: #F7F9FD;
  --admin-row-alt: #FAFCFF;
  --admin-rule: #E3E9F4;
  --admin-tab-active: #EEF3FB;
  --admin-tab-active-ink: #1B3A8C;
  --admin-text-dim: #5F6B85;
  --admin-badge: var(--lws-orange-deep);
  --admin-go: #15803D;
  --admin-mark-ok: #15803D;
  --admin-mark-gap: #B8480A;
  --admin-mark-absent: #A3AEC4;
  --admin-warn-bg: #FFF4EC;
  --admin-warn-ink: #9A3F08;
  --admin-quote-rule: #C5CFDF;
  --admin-link-ink: #1F4BA0;
  --admin-info-ink: #1F4BA0;
  --admin-info-bg: #EEF3FB;
  --admin-violet-ink: #6D28D9;
  --admin-violet-bg: #F1EAFB;
  --admin-chart-views: #F7671A;
  --admin-chart-searches: #2F6FE0;
  --admin-chart-gaps: #C2410C;
  --admin-chart-grid: #E3E9F4;
  --admin-diff-add-bg: #E6F6EC;
  --admin-diff-del-bg: #FDECEC;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --admin-control-border: #454C59;
    --admin-panel-bg: #1B1E24;
    --admin-row-alt: #181B20;
    --admin-rule: #2A2F38;
    --admin-tab-active: #2A2F38;
    --admin-tab-active-ink: #FFFFFF;
    --admin-text-dim: #A9B0BD;
    --admin-go: #15803D;  /* white label: 5.0:1 */
    --admin-mark-ok: #4ADE80;
    --admin-mark-gap: #FFB07A;
    --admin-mark-absent: #5A6170;
    --admin-warn-bg: #2A1E16;
    --admin-warn-ink: #FFC79A;
    --admin-quote-rule: #454C59;
    --admin-link-ink: #8AB4FF;
    --admin-info-ink: #8DB4FF;
    --admin-info-bg: #1E2738;
    --admin-violet-ink: #C7A4FF;
    --admin-violet-bg: #241D33;
    --admin-chart-searches: #5B8DEF;
    --admin-chart-grid: #2A2F38;
    --admin-diff-add-bg: #16291D;
    --admin-diff-del-bg: #2E1B1A;
  }
}

:root[data-theme="dark"] {
  --admin-control-border: #454C59;
  --admin-panel-bg: #1B1E24;
  --admin-row-alt: #181B20;
  --admin-rule: #2A2F38;
  --admin-tab-active: #2A2F38;
  --admin-tab-active-ink: #FFFFFF;
  --admin-text-dim: #A9B0BD;
  --admin-go: #15803D;  /* white label: 5.0:1 */
  --admin-mark-ok: #4ADE80;
  --admin-mark-gap: #FFB07A;
  --admin-mark-absent: #5A6170;
  --admin-warn-bg: #2A1E16;
  --admin-warn-ink: #FFC79A;
  --admin-quote-rule: #454C59;
  --admin-link-ink: #8AB4FF;
  --admin-info-ink: #8DB4FF;
  --admin-info-bg: #1E2738;
  --admin-violet-ink: #C7A4FF;
  --admin-violet-bg: #241D33;
  --admin-chart-searches: #5B8DEF;
  --admin-chart-grid: #2A2F38;
  --admin-diff-add-bg: #16291D;
  --admin-diff-del-bg: #2E1B1A;
}