/**
 * 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.
 *
 * The layout is LWS's Panel KVM's (portal.css); the colours are LWS's, from the redesign of its
 * API documentation (redesign_api): navy headings, the LWS blue, the orange for accents, white
 * cards on a pale blue-grey page, Poppins. The mockups draw a light site only; the dark theme is
 * the documentation site's graphite, with the blues muted and the orange kept.
 *
 * Each colour is written once, as light-dark(light, dark). The theme is the reader's system
 * preference, or the one theme.js sets in data-theme: color-scheme follows, and light-dark()
 * with it. Without JavaScript there is no data-theme and the system decides.
 *
 * On contrast: text needs 4.5:1, marks and icons 3:1. The LWS orange (#F7671A) is 2.8:1 on the
 * pale page and on its own tint, so in the light theme marks (icons, lines, focus) take the
 * mockups' deeper orange, #E0560C, and --color-accent, deeper still, carries white text; the
 * mockups' grey (#6B7A94) is darkened to 4.5:1 too.
 * tests/Unit/Support/ContrastTest.php holds the pairs below to it, in both themes.
 */

/*
 * 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 dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root {
  /* Surfaces: white sidebar, top bar and cards on the documentation's pale blue-grey page. */
  --color-bg: light-dark(#F3F6FB, #121417);
  --color-surface: light-dark(#FFFFFF, #1B1E24);
  --color-surface-raised: light-dark(#F7F9FD, #22262D);  /* a toolbar, a row under the pointer */
  --color-sidebar: light-dark(#FFFFFF, #17191E);
  --color-topbar: light-dark(#FFFFFF, #17191E);
  --color-bg-inset: light-dark(#EEF3FB, #2A2F38);        /* neutral chips, a folded band */
  --color-field: light-dark(#FFFFFF, #121417);           /* inputs */
  --color-border: light-dark(#DBE3F1, #343A45);
  --color-border-soft: light-dark(#E3E9F4, #2A2F38);     /* between rows */
  --color-border-strong: light-dark(#C5CFDF, #454C59);   /* controls */
  --color-field-border: light-dark(#7F8DA5, #6C7689);    /* a field's edge: 3:1 on its ground */

  /* Text: titles in the LWS navy, values in a dark slate, running text in the grey-blue. */
  --color-heading: light-dark(#1B3A8C, #ECEEF2);
  --color-text: light-dark(#1E2A3E, #ECEEF2);
  --color-text-secondary: light-dark(#3C4A63, #C5CAD3);
  --color-text-muted: light-dark(#5F6B85, #9AA2B1);
  --color-link: light-dark(#1D5BD6, #8AB4FF);

  /* Accent: the LWS orange. --color-mark draws (icons, lines, focus ring). --color-accent fills
     buttons, with --color-on-accent for their text: in the dark theme, the bright orange with
     dark text, as the deep one with white would sink into the graphite. --color-accent-bg and
     -ink are the tinted pair of the current menu item. */
  --color-mark: light-dark(#E0560C, #F7671A);
  --color-accent: light-dark(#C24E0C, #F7671A);
  --color-accent-hover: light-dark(#A8430A, #FF8A47);
  --color-on-accent: light-dark(#FFFFFF, #17191E);       /* text on the orange: dark on the bright one */
  --color-accent-bg: light-dark(#FFF4EC, #422512);
  --color-accent-ink: light-dark(#B8480A, #FFB07A);
  --color-accent-border: light-dark(#FBD5BB, #7A4824);
  --color-focus: var(--color-mark);

  /* The strong button, a page's main action beside the orange: the LWS blue. */
  --color-strong-bg: light-dark(#1F4BA0, #2E3D5C);
  --color-strong-border: light-dark(#1F4BA0, #3D4F73);
  --color-strong-ink: #FFFFFF;

  /* States: text on its tint, and the tint's edge. */
  --color-ok: light-dark(#1A7D46, #6FE09A);
  --color-ok-bg: light-dark(#E6F6EC, #16291D);
  --color-ok-border: light-dark(#C7E6D3, #24452F);
  --color-required: light-dark(#C02C2C, #FF8F85);
  --color-required-bg: light-dark(#FDECEC, #2E1B1A);
  --color-required-border: light-dark(#F6CFCF, #4C2A26);
  --color-warn: light-dark(#8A5300, #FFC79A);
  --color-warn-bg: light-dark(#FDF3E3, #2A2219);
  --color-warn-border: light-dark(#F0DCAE, #5A3E22);
  --color-warn-mark: #E08A00;
  --color-info: light-dark(#1F4BA0, #8DB4FF);
  --color-info-bg: light-dark(#EEF3FB, #1E2738);
  --color-info-border: light-dark(#DBE3F1, #33415B);
  --color-info-strong: #1F4BA0;                          /* carries white text */
  /* The secondary buttons and the chips, and a card that points elsewhere: a firmer tint of the
     LWS blue, distinct from the white cards and the pale page alike. */
  --color-tonal-bg: light-dark(#E1E9F8, #26324A);
  --color-tonal-bg-hover: light-dark(#D2DEF5, #2E3D5C);
  --color-tonal-border: light-dark(#B6C7E8, #3D4F73);
  --color-tonal-ink: light-dark(#1B3A8C, #DCE6FA);
  --color-violet: light-dark(#5B21B6, #C7A4FF);
  --color-violet-bg: light-dark(#EFE7FC, #241D33);

  /* Tool levels, as text / tint / edge */
  --level-read-fg: var(--color-ok);       --level-read-bg: var(--color-ok-bg);        --level-read-border: var(--color-ok-border);
  --level-write-fg: var(--color-info);    --level-write-bg: var(--color-info-bg);     --level-write-border: var(--color-info-border);
  --level-sensitive-fg: var(--color-warn); --level-sensitive-bg: var(--color-warn-bg); --level-sensitive-border: var(--color-warn-border);
  --level-billable-fg: var(--color-accent-ink); --level-billable-bg: var(--color-accent-bg); --level-billable-border: var(--color-accent-border);

  /* The admin's sidebar, navy in both themes: its ink, its icons, the item under the pointer and
     the current one, on the LWS blue. */
  --admin-nav-bg: light-dark(#0F2766, #111C38);
  --admin-nav-ink: #C9D4EE;
  --admin-nav-muted: #93A3C9;
  --admin-nav-hover: rgba(255, 255, 255, 0.08);
  --admin-nav-current: light-dark(#1F4BA0, #263F78);
  --admin-nav-rule: rgba(255, 255, 255, 0.14);

  /* Code panels stay dark in both themes: the navy, near black in the dark. */
  --color-code-bg: light-dark(#0F2766, #0C0E11);
  --color-code-ink: #DFE7FB;

  /* Overlays and shadows, tinted with the navy as the mockups' are */
  --color-scrim: light-dark(rgba(11, 31, 85, 0.55), rgba(0, 0, 0, 0.66));
  --color-scrim-light: light-dark(rgba(11, 31, 85, 0.18), rgba(0, 0, 0, 0.3));
  --shadow-card: 0 1px 3px light-dark(rgba(15, 39, 102, 0.08), rgba(0, 0, 0, 0));
  --shadow-menu: 0 10px 30px light-dark(rgba(15, 39, 102, 0.22), rgba(0, 0, 0, 0.5));
  --shadow-accent: 0 4px 12px light-dark(rgba(247, 103, 26, 0.3), rgba(247, 103, 26, 0.18));

  /*
   * 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.
   */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --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-15: 0.9375rem;
  --text-16: 1rem;
  --text-20: 1.25rem;
  --text-24: 1.5rem;
  --text-28: 1.75rem;

  /* 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-6: 1.5rem;

  /* Shape: controls round by 8–10px, cards by 14px, as the Panel's. */
  --radius-xs: 4px;
  --radius-md: 8px;
  --radius-control: 9px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-card: 16px;
  --radius-pill: 999px;

  /* Layout and controls: two heights, a form's and a row's. */
  --sidebar-width: 260px;
  --topbar-height: 68px;
  --admin-control-h: 38px;
  --admin-control-h-sm: 30px;
}