/* GENERATED by frontend/scripts/build-web-theme.mjs — do not edit.
 * Source of truth: frontend/src/styles/jutsuTokens.css
 * Regenerate with: yarn build (in frontend/)
 *
 * The Jutsu theme for Frappe's server-rendered pages — login, sign-up,
 * forgot-password. Wired up by `web_include_css` in lms/hooks.py.
 */

@font-face{font-family:Geist Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/lms/frontend/assets/geist-cyrillic-ext-wght-normal-DjL33-gN.woff2) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Geist Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/lms/frontend/assets/geist-cyrillic-wght-normal-BEAKL7Jp.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Geist Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/lms/frontend/assets/geist-vietnamese-wght-normal-6IgcOCM7.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Geist Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/lms/frontend/assets/geist-latin-ext-wght-normal-DC-KSUi6.woff2) format("woff2-variations");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:Geist Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/lms/frontend/assets/geist-latin-wght-normal-BgDaEnEv.woff2) format("woff2-variations");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:root`, not `:root`.
 *
 * Frappe's own login.bundle.css loads AFTER this file and redefines the very
 * same espresso variables on a plain `:root` — `--surface-base: #ffffff`,
 * `--ink-gray-9: #0f0f0f`. At equal specificity the later sheet wins, so the
 * page came out light with only the tokens Frappe does not define (the canvas,
 * the grid) surviving. Repeating the selector raises specificity to (0,2,0),
 * which outranks it without reaching for `!important` — and leaves
 * `!important` available further down for the handful of properties Frappe
 * paints directly on elements rather than through a variable.
 *
 * Light values first so every token has a definition, then the dark ones over
 * the top: these pages are always dark. Both blocks are lifted verbatim from
 * the app's token file. */
:root:root {

	/* ---------------------------------------------------------------- surfaces
	   base = Jutsu `--card`; the page canvas is `--surface-canvas` below, which
	   html paints with the grid. gray-2 = `--muted` (the app's hover fill),
	   gray-3 = `--accent` (its active fill), gray-4 = `--border`, gray-10 =
	   `--foreground` (solid gray buttons). */
	--surface-base: oklch(1 0.002 264);
	--surface-gray-1: oklch(0.979 0.006 264);
	--surface-gray-2: oklch(0.955 0.012 265);
	--surface-gray-3: oklch(0.935 0.018 262);
	--surface-gray-4: oklch(0.905 0.017 264);
	--surface-gray-5: oklch(0.83 0.025 264);
	--surface-gray-6: oklch(0.683 0.032 262);
	--surface-gray-7: oklch(0.586 0.034 261);
	--surface-gray-8: oklch(0.439 0.036 262);
	--surface-gray-9: oklch(0.341 0.034 263);
	--surface-gray-10: oklch(0.195 0.028 265);
	--surface-sidebar: oklch(0.975 0.006 265);
	--surface-elevation-1: oklch(1 0.002 264);
	--surface-elevation-2: oklch(1 0.002 264);
	--surface-elevation-3: oklch(1 0.002 264);

	/* -------------------------------------------------------------------- ink
	   gray-5 = `--muted-foreground`, gray-8 = `--secondary-foreground`,
	   gray-9 = `--foreground`. Those three carry almost all of the LMS's text. */
	--ink-base: oklch(1 0.002 264);
	--ink-gray-1: oklch(0.946 0.012 264);
	--ink-gray-2: oklch(0.913 0.015 264);
	--ink-gray-3: oklch(0.83 0.025 264);
	--ink-gray-4: oklch(0.66 0.032 261);
	--ink-gray-5: oklch(0.48 0.035 260);
	--ink-gray-6: oklch(0.42 0.036 262);
	--ink-gray-7: oklch(0.33 0.038 264);
	--ink-gray-8: oklch(0.255 0.04 265);
	--ink-gray-9: oklch(0.195 0.028 265);

	/* ---------------------------------------------------------------- outlines
	   gray-2 and elevation-1/2 are Jutsu's `--border`; they draw nearly every
	   divider, card edge and input hairline in the app. */
	--outline-base: oklch(1 0.002 264);
	--outline-gray-1: oklch(0.938 0.012 265);
	--outline-gray-2: oklch(0.9 0.015 265);
	--outline-gray-3: oklch(0.845 0.021 264);
	--outline-gray-4: oklch(0.72 0.03 263);
	--outline-gray-5: oklch(0.6 0.034 261);
	--outline-gray-6: oklch(0.455 0.036 262);
	--outline-gray-7: oklch(0.355 0.034 263);
	--outline-gray-8: oklch(0.215 0.03 265);
	--outline-gray-9: oklch(0.175 0.028 265);
	--outline-elevation-1: oklch(0.9 0.015 265);
	--outline-elevation-2: oklch(0.9 0.015 265);

	/* ------------------------------------------------------------------- blue
	   The brand ramp. Step 6 IS #00a2f3; 7 and 8 darken for hover/active, which
	   is the direction frappe's Button already assumes. Jutsu itself hovers by
	   dropping the primary to 80% alpha — same read, but alpha over an unknown
	   backdrop is not reproducible inside a token ramp. */
	--surface-blue-1: oklch(0.972 0.019 242);
	--surface-blue-2: oklch(0.945 0.036 242);
	--surface-blue-3: oklch(0.905 0.062 242);
	--surface-blue-4: oklch(0.845 0.094 242);
	--surface-blue-5: oklch(0.762 0.132 242);
	--surface-blue-6: oklch(0.682 0.162 242);
	--surface-blue-7: oklch(0.622 0.152 243);
	--surface-blue-8: oklch(0.556 0.136 244);
	--surface-blue-9: oklch(0.468 0.115 245);
	--surface-blue-10: oklch(0.386 0.094 246);

	--ink-blue-1: oklch(1 0.002 264);
	--ink-blue-2: oklch(0.945 0.036 242);
	--ink-blue-3: oklch(0.905 0.062 242);
	--ink-blue-4: oklch(0.845 0.094 242);
	--ink-blue-5: oklch(0.682 0.162 242);
	/* One step below the raw brand. Jutsu links are literally `text-brand`, but
	   #00a2f3 on white is 3.0:1 — fine for the 24px+ marks the SIEM uses it on,
	   under AA for the 14px inline links the LMS is full of. 0.585 keeps the
	   same cyan read at 4.6:1. */
	--ink-blue-6: oklch(0.585 0.15 243);
	--ink-blue-7: oklch(0.53 0.135 244);
	--ink-blue-8: oklch(0.468 0.115 245);
	--ink-blue-9: oklch(0.408 0.1 246);
	--ink-blue-10: oklch(0.352 0.088 247);
	--ink-blue-link: oklch(0.585 0.15 243);

	--outline-blue-1: oklch(0.945 0.036 242);
	--outline-blue-2: oklch(0.905 0.062 242);
	--outline-blue-3: oklch(0.845 0.094 242);
	--outline-blue-4: oklch(0.762 0.132 242);
	--outline-blue-5: oklch(0.682 0.162 242);
	--outline-blue-6: oklch(0.622 0.152 243);
	--outline-blue-7: oklch(0.556 0.136 244);
	--outline-blue-8: oklch(0.468 0.115 245);
	--outline-blue-9: oklch(0.386 0.094 246);
	--outline-blue-10: oklch(0.33 0.082 248);

	/* ----------------------------------------------------------------- radius
	   Jutsu's `--radius: 0.625rem` and the sm/md/lg/xl/2xl ladder derived from
	   it. frappe's numeric steps are re-pointed at the nearest Jutsu value —
	   `rounded` and `rounded-4` (buttons, inputs, menu rows) land on 10px,
	   `rounded-lg` / `rounded-6` (cards, dialogs) on 14px. */
	--radius: 0.625rem;
	--radius-1: 4px;
	--radius-2: 6px;
	--radius-3: 8px;
	--radius-4: 10px;
	--radius-5: 10px;
	--radius-6: 14px;
	--radius-7: 18px;
	--radius-8: 22px;
	--radius-sm: 6px;
	/* `rounded-md` is the LMS's card/panel radius (94 call sites) rather than a
	   small-control one, so it maps by role onto Jutsu's card family, not onto
	   Jutsu's like-named 8px step. */
	--radius-md: 12px;
	--radius-lg: 14px;
	--radius-xl: 18px;
	--radius-2xl: 22px;

	/* -------------------------------------------------------------- elevation
	   Jutsu separates cards with a border and a barely-there shadow (`shadow-xs`)
	   and reserves depth for things that actually float. frappe's stack opens
	   with an inset white highlight on every surface, which on a page of cards
	   reads as embossing. Same names, Jutsu's weights. */
	--elevation-sm: 0 1px 2px 0 oklch(0.18 0.04 264 / 0.05);
	--elevation-base: 0 1px 2px -1px oklch(0.18 0.04 264 / 0.08),
		0 1px 3px 0 oklch(0.18 0.04 264 / 0.06);
	--elevation-md: 0 2px 4px -2px oklch(0.18 0.04 264 / 0.08),
		0 6px 14px -6px oklch(0.18 0.04 264 / 0.12);
	--elevation-lg: 0 4px 8px -4px oklch(0.18 0.04 264 / 0.08),
		0 18px 40px -32px oklch(0.18 0.04 264 / 0.16);
	--elevation-xl: 0 6px 12px -6px oklch(0.18 0.04 264 / 0.1),
		0 22px 56px -24px oklch(0.18 0.04 264 / 0.16);
	--elevation-2xl: 0 10px 20px -10px oklch(0.18 0.04 264 / 0.12),
		0 44px 80px -32px oklch(0.18 0.04 264 / 0.2);

	/* ------------------------------------------------------------------ focus
	   Jutsu's `focus-visible:ring-3 focus-visible:ring-ring/50`, where `--ring`
	   is the brand. frappe applies `--focus-outline-default` globally on
	   :focus-visible, so re-pointing it here brands every focus ring at once. */
	--focus-default: 0px 0px 0px 3px oklch(0.682 0.162 242 / 0.5);
	--focus-outline-default: 3px solid oklch(0.682 0.162 242 / 0.5);
	--focus-blue: 0px 0px 0px 3px oklch(0.682 0.162 242 / 0.5);
	--focus-outline-blue: 3px solid oklch(0.682 0.162 242 / 0.5);
	--focus-red: 0px 0px 0px 3px oklch(0.577 0.245 27.325 / 0.24);
	--focus-outline-red: 3px solid oklch(0.577 0.245 27.325 / 0.24);
	--focus-green: 0px 0px 0px 3px oklch(0.6 0.13 155 / 0.35);
	--focus-outline-green: 3px solid oklch(0.6 0.13 155 / 0.35);
	--focus-amber: 0px 0px 0px 3px oklch(0.72 0.12 75 / 0.4);
	--focus-outline-amber: 3px solid oklch(0.72 0.12 75 / 0.4);
	--focus-violet: 0px 0px 0px 3px oklch(0.6 0.12 300 / 0.35);
	--focus-outline-violet: 3px solid oklch(0.6 0.12 300 / 0.35);

	/* =================================================== Jutsu's own token names
	   Republished so SIEM-shaped markup and the Tailwind aliases in
	   tailwind.config.js resolve. Values are the anchors quoted above. */
	--brand: #00a2f3;
	--brand-foreground: oklch(0.985 0 0);
	--ring: var(--brand);

	--background: oklch(0.985 0.004 264);
	--foreground: oklch(0.195 0.028 265);
	--card: oklch(1 0.002 264);
	--card-foreground: oklch(0.195 0.028 265);
	--popover: oklch(1 0.002 264);
	--popover-foreground: oklch(0.195 0.028 265);
	--primary: var(--brand);
	--primary-foreground: oklch(0.985 0 0);
	--secondary: oklch(0.955 0.012 265);
	--secondary-foreground: oklch(0.255 0.04 265);
	--muted: oklch(0.955 0.012 265);
	--muted-foreground: oklch(0.48 0.035 260);
	--accent: oklch(0.935 0.018 262);
	--accent-foreground: oklch(0.255 0.04 265);
	--destructive: oklch(0.577 0.245 27.325);
	--destructive-foreground: oklch(0.985 0 0);
	--border: oklch(0.9 0.015 265);
	--input: oklch(0.9 0.015 265);
	--logo-plate: oklch(0.955 0.012 265 / 0.8);

	/* The canvas html paints, distinct from `--surface-base` (the card white).
	   frappe has no name for "the page behind the cards" because its pages are
	   white; Jutsu's is a tinted, grid-ruled plane. */
	--surface-canvas: var(--background);

	--sidebar: oklch(0.975 0.006 265);
	--sidebar-foreground: oklch(0.195 0.028 265);
	--sidebar-accent: oklch(0.935 0.018 262);
	--sidebar-accent-foreground: oklch(0.255 0.04 265);
	--sidebar-border: oklch(0.9 0.015 265);

	--chart-1: var(--brand);
	--chart-2: oklch(0.65 0.1 180);
	--chart-3: oklch(0.7 0.12 70);
	--chart-4: oklch(0.6 0.12 300);
	--chart-5: oklch(0.64 0.15 15);

	/* Canonical severity palette (verbatim from the SIEM). */
	--sev-critical: oklch(0.55 0.2 27);
	--sev-high: oklch(0.65 0.15 50);
	--sev-medium: oklch(0.72 0.12 75);
	--sev-low: oklch(0.62 0.11 200);
	--sev-info: oklch(0.47 0.04 255);
	--status-ok: oklch(0.6 0.13 155);

	--grid-size: 20px;
	--grid-line: oklch(0.195 0.028 265 / 6%);

	/* Layered surfaces — the chrome/rail/panel/floating family. */
	--surface-panel: oklch(1 0.002 264 / 72%);
	--surface-floating: oklch(1 0.002 264 / 96%);
	--surface-chrome: oklch(0.985 0.004 264 / 82%);
	--surface-rail: oklch(0.975 0.006 265 / 84%);
	--surface-highlight: oklch(1 0 0 / 72%);
	--surface-shadow: oklch(0.18 0.04 264 / 16%);
}

:root:root {

	/* ---------------------------------------------------------------- surfaces
	   base = Jutsu `--card` (0.206), lifted well off the 0.152 canvas so a dense
	   grid of cards reads as cards rather than as one flat plane — that lift is
	   the note the SIEM's dark mode is built on. */
	--surface-base: oklch(0.206 0.027 264);
	--surface-gray-1: oklch(0.239 0.028 264);
	--surface-gray-2: oklch(0.29 0.0325 260);
	--surface-gray-3: oklch(0.33 0.035 260);
	--surface-gray-4: oklch(0.379 0.036 261);
	--surface-gray-5: oklch(0.457 0.036 260);
	--surface-gray-6: oklch(0.58 0.036 259);
	--surface-gray-7: oklch(0.683 0.036 258);
	--surface-gray-8: oklch(0.754 0.03 256);
	--surface-gray-9: oklch(0.885 0.015 252);
	--surface-gray-10: oklch(0.9838 0.0035 247.86);
	--surface-sidebar: oklch(0.195 0.027 264);
	--surface-elevation-1: oklch(0.228 0.027 264);
	--surface-elevation-2: oklch(0.239 0.028 264);
	--surface-elevation-3: oklch(0.29 0.0325 260);

	--ink-base: oklch(0.206 0.027 264);
	--ink-gray-1: oklch(0.26 0.03 262);
	--ink-gray-2: oklch(0.341 0.035 260);
	--ink-gray-3: oklch(0.42 0.036 260);
	--ink-gray-4: oklch(0.6 0.036 259);
	--ink-gray-5: oklch(0.71 0.0355 258);
	--ink-gray-6: oklch(0.775 0.03 256);
	--ink-gray-7: oklch(0.86 0.02 252);
	--ink-gray-8: oklch(0.93 0.01 250);
	--ink-gray-9: oklch(0.9838 0.0035 247.86);

	--outline-base: oklch(0.206 0.027 264);
	--outline-gray-1: oklch(0.26 0.03 262);
	--outline-gray-2: oklch(0.29 0.0325 260);
	--outline-gray-3: oklch(0.34 0.035 260);
	--outline-gray-4: oklch(0.42 0.036 260);
	--outline-gray-5: oklch(0.52 0.036 259);
	--outline-gray-6: oklch(0.66 0.036 258);
	--outline-gray-7: oklch(0.86 0.02 252);
	--outline-gray-8: oklch(0.93 0.01 250);
	--outline-gray-9: oklch(0.9838 0.0035 247.86);
	--outline-elevation-1: oklch(0.29 0.0325 260);
	--outline-elevation-2: oklch(0.29 0.0325 260);

	/* Brand holds at #00a2f3 in both themes — the SIEM never shifts it. Here the
	   ramp climbs rather than falls, so hover/active read as *brighter* against
	   the dark canvas. */
	--surface-blue-1: oklch(0.26 0.055 245);
	--surface-blue-2: oklch(0.3 0.075 244);
	--surface-blue-3: oklch(0.345 0.095 244);
	--surface-blue-4: oklch(0.42 0.115 243);
	--surface-blue-5: oklch(0.55 0.14 243);
	--surface-blue-6: oklch(0.682 0.162 242);
	--surface-blue-7: oklch(0.735 0.14 240);
	--surface-blue-8: oklch(0.8 0.115 236);
	--surface-blue-9: oklch(0.87 0.075 234);
	--surface-blue-10: oklch(0.925 0.045 232);

	--ink-blue-1: oklch(1 0 0);
	--ink-blue-2: oklch(0.345 0.095 244);
	--ink-blue-3: oklch(0.42 0.115 243);
	--ink-blue-4: oklch(0.55 0.14 243);
	--ink-blue-5: oklch(0.63 0.155 242);
	--ink-blue-6: oklch(0.72 0.15 240);
	--ink-blue-7: oklch(0.78 0.125 238);
	--ink-blue-8: oklch(0.84 0.095 235);
	--ink-blue-9: oklch(0.89 0.065 233);
	--ink-blue-10: oklch(0.93 0.04 232);
	--ink-blue-link: oklch(0.72 0.15 240);

	--outline-blue-1: oklch(0.3 0.075 244);
	--outline-blue-2: oklch(0.345 0.095 244);
	--outline-blue-3: oklch(0.42 0.115 243);
	--outline-blue-4: oklch(0.55 0.14 243);
	--outline-blue-5: oklch(0.682 0.162 242);
	--outline-blue-6: oklch(0.735 0.14 240);
	--outline-blue-7: oklch(0.8 0.115 236);
	--outline-blue-8: oklch(0.87 0.075 234);
	--outline-blue-9: oklch(0.925 0.045 232);
	--outline-blue-10: oklch(0.955 0.03 231);

	/* Depth carries further on a dark canvas, so the same shapes go darker and
	   wider rather than being reused from light (which frappe does). */
	--elevation-sm: 0 1px 2px 0 oklch(0.055 0.02 264 / 0.4);
	--elevation-base: 0 1px 2px -1px oklch(0.055 0.02 264 / 0.5),
		0 1px 3px 0 oklch(0.055 0.02 264 / 0.4);
	--elevation-md: 0 2px 4px -2px oklch(0.055 0.02 264 / 0.5),
		0 6px 14px -6px oklch(0.055 0.02 264 / 0.55);
	--elevation-lg: 0 4px 8px -4px oklch(0.055 0.02 264 / 0.5),
		0 18px 40px -24px oklch(0.055 0.02 264 / 0.6);
	--elevation-xl: 0 6px 12px -6px oklch(0.055 0.02 264 / 0.5),
		0 22px 56px -24px oklch(0.055 0.02 264 / 0.62);
	--elevation-2xl: 0 10px 20px -10px oklch(0.055 0.02 264 / 0.55),
		0 44px 80px -32px oklch(0.055 0.02 264 / 0.66);

	--focus-default: 0px 0px 0px 3px oklch(0.682 0.162 242 / 0.5);
	--focus-outline-default: 3px solid oklch(0.682 0.162 242 / 0.5);
	--focus-blue: 0px 0px 0px 3px oklch(0.682 0.162 242 / 0.5);
	--focus-outline-blue: 3px solid oklch(0.682 0.162 242 / 0.5);
	--focus-red: 0px 0px 0px 3px oklch(0.704 0.191 22.216 / 0.4);
	--focus-outline-red: 3px solid oklch(0.704 0.191 22.216 / 0.4);
	--focus-green: 0px 0px 0px 3px oklch(0.7 0.14 160 / 0.4);
	--focus-outline-green: 3px solid oklch(0.7 0.14 160 / 0.4);
	--focus-amber: 0px 0px 0px 3px oklch(0.78 0.12 78 / 0.4);
	--focus-outline-amber: 3px solid oklch(0.78 0.12 78 / 0.4);
	--focus-violet: 0px 0px 0px 3px oklch(0.62 0.12 300 / 0.4);
	--focus-outline-violet: 3px solid oklch(0.62 0.12 300 / 0.4);

	/* ---------------------------------------------------- Jutsu's own names */
	--background: oklch(0.152 0.0245 264);
	--foreground: oklch(0.9838 0.0035 247.86);
	--card: oklch(0.206 0.027 264);
	--card-foreground: oklch(0.9838 0.0035 247.86);
	--popover: oklch(0.228 0.027 264);
	--popover-foreground: oklch(0.9838 0.0035 247.86);
	--secondary: oklch(0.29 0.0325 260);
	--secondary-foreground: oklch(0.9838 0.0035 247.86);
	--muted: oklch(0.29 0.0325 260);
	--muted-foreground: oklch(0.71 0.0355 258);
	--accent: oklch(0.3 0.036 260);
	--accent-foreground: oklch(0.9838 0.0035 247.86);
	--destructive: oklch(0.704 0.191 22.216);
	--border: oklch(0.29 0.0325 260);
	--input: oklch(1 0 0 / 15%);
	--logo-plate: oklch(1 0 0 / 0.75);

	--sidebar: oklch(0.195 0.027 264);
	--sidebar-foreground: oklch(0.9838 0.0035 247.86);
	--sidebar-accent: oklch(0.29 0.0325 260);
	--sidebar-accent-foreground: oklch(0.9838 0.0035 247.86);
	--sidebar-border: oklch(1 0 0 / 10%);

	--chart-2: oklch(0.68 0.1 180);
	--chart-3: oklch(0.72 0.12 70);
	--chart-4: oklch(0.62 0.12 300);
	--chart-5: oklch(0.66 0.15 15);

	--sev-critical: oklch(0.63 0.21 25);
	--sev-high: oklch(0.7 0.15 50);
	--sev-medium: oklch(0.78 0.12 78);
	--sev-low: oklch(0.7 0.11 200);
	--sev-info: oklch(0.62 0.02 255);
	--status-ok: oklch(0.7 0.14 160);

	--grid-line: oklch(0.6 0.02 260 / 5.5%);

	--surface-panel: oklch(0.22 0.028 264 / 45%);
	--surface-floating: oklch(0.207 0.027 264 / 96%);
	--surface-chrome: oklch(0.18 0.027 264 / 76%);
	--surface-rail: oklch(0.195 0.027 264 / 96%);
	--surface-highlight: oklch(1 0 0 / 5.5%);
	--surface-shadow: oklch(0.055 0.02 264 / 48%);
}

:root:root {
	color-scheme: dark;
}

/* Status surfaces.
 *
 * Frappe's alert (`.es-alert`, website.bundle.css) takes its background from
 * `--surface-{green,red,amber,orange}-2` and its icon from `--ink-*-6`. Those
 * tokens are frappe-ui's, and frappe-ui publishes its dark values behind
 * `[data-theme='dark']` on <html> — an attribute the SPA sets and these
 * server-rendered pages never do. jutsuTokens.css redefines the blue ramp but
 * not the other three, so they fell through to the LIGHT definitions while
 * `html body` below had already set the text to near-white `--ink-gray-9`.
 *
 * The visible result was the sign-up confirmation: "Please ask your
 * administrator to verify your sign-up" printed in white on #e4faeb, i.e.
 * invisible, so signing up looked like it had silently done nothing.
 *
 * Values are read off the running app, where `data-theme='dark'` is set, so
 * these pages land on the same greens and reds the SPA uses. To refresh them,
 * read the same custom properties off document.documentElement in the app.
 */
:root:root {
	--surface-green-1: oklch(0.244 0.05 156.367);
	--surface-green-2: oklch(0.295 0.057 157.43);
	--surface-green-3: oklch(0.337 0.071 158.636);
	--surface-red-1: oklch(0.25 0.059 19.081);
	--surface-red-2: oklch(0.333 0.082 22.544);
	--surface-red-3: oklch(0.394 0.105 23.193);
	--surface-amber-1: oklch(0.253 0.049 61.325);
	--surface-amber-2: oklch(0.303 0.062 60.12);
	--surface-amber-3: oklch(0.35 0.081 54.632);
	--surface-orange-1: oklch(0.228 0.041 55.938);
	--surface-orange-2: oklch(0.258 0.051 54.302);
	--surface-orange-3: oklch(0.328 0.078 51.431);

	--ink-green-5: oklch(0.506 0.118 155.358);
	--ink-green-6: oklch(0.536 0.121 157.571);
	--ink-green-7: oklch(0.607 0.116 158.84);
	--ink-red-5: oklch(0.507 0.165 25.286);
	--ink-red-6: oklch(0.547 0.175 25.075);
	--ink-red-7: oklch(0.639 0.196 24.565);
	--ink-amber-5: oklch(0.566 0.133 56.68);
	--ink-amber-6: oklch(0.599 0.141 56.803);
	--ink-amber-7: oklch(0.638 0.14 62.455);
	--ink-orange-5: oklch(0.49 0.128 48.564);
	--ink-orange-6: oklch(0.656 0.171 48.246);
	--ink-orange-7: oklch(0.669 0.167 50.064);
}

/* Frappe paints the older Bootstrap-era alert straight onto the element with
   its own light ramp, so the token block above cannot reach it. The sign-up
   banner carries both class families at once. */
.alert-success,
.alert-info,
.alert-warning,
.alert-danger {
	color: var(--ink-gray-9);
	border-color: transparent;
}

.alert-success {
	background-color: var(--surface-green-2);
}

.alert-info {
	background-color: var(--surface-blue-2);
}

.alert-warning {
	background-color: var(--surface-amber-2);
}

.alert-danger {
	background-color: var(--surface-red-2);
}

html body,
html {
	background-color: var(--surface-canvas);
	background-image: linear-gradient(
			to right,
			var(--grid-line) 1px,
			transparent 1px
		),
		linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
	background-size: var(--grid-size) var(--grid-size);
	color: var(--ink-gray-9);
	font-family: 'Geist Variable', ui-sans-serif, system-ui, -apple-system,
		'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* The sign-in card. Frappe centres `.page-card` on the page; the Jutsu
   treatment is the app's floating surface — a lifted card with a hairline
   border, not a shadowed white sheet. */
.page-card {
	/* Frappe's own rule paints this white on the element itself, so the token
	   override above cannot reach it — this is one of the few places the
	   important flag is the honest tool rather than a shortcut. */
	background-color: var(--surface-base) !important;
	border: 1px solid var(--outline-gray-2);
	border-radius: 14px;
	box-shadow: var(--elevation-lg);
	color: var(--ink-gray-9);
}

.page-card-head-text h4,
.page-card h4 {
	color: var(--ink-gray-9);
	letter-spacing: -0.02em;
}

.page-card-subtitle,
.text-ink-gray-6 {
	color: var(--ink-gray-5);
}

/* The product mark sits on the translucent light plate the app uses for logos,
   so a dark-on-transparent logo stays legible on a dark card. */
.page-card .app-logo {
	background-color: var(--logo-plate);
	border-radius: 8px;
	padding: 4px;
	box-sizing: content-box;
}

/* Inputs: the app's field geometry — 10px radius, card fill, brand focus. */
.form-control,
.form-control:not(:focus),
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
select,
textarea {
	background-color: var(--surface-gray-1);
	border: 1px solid var(--outline-gray-2);
	border-radius: 10px;
	color: var(--ink-gray-9);
}

.form-control::placeholder,
input::placeholder {
	color: var(--ink-gray-4);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
	background-color: var(--surface-gray-1);
	border-color: var(--outline-blue-5);
	color: var(--ink-gray-9);
	outline: var(--focus-outline-blue);
	outline-offset: 0;
	box-shadow: none;
}

/* Frappe's espresso button, given the app's primary. `data-variant="solid"`
   is the submit action; everything else reads as the subtle variant. */
.es-button[data-variant='solid'] {
	background-color: var(--surface-blue-6);
	border-color: transparent;
	border-radius: 10px;
	color: var(--ink-base);
}

.es-button[data-variant='solid']:hover {
	background-color: var(--surface-blue-7);
}

.es-button:not([data-variant='solid']) {
	background-color: var(--surface-gray-2);
	border: 1px solid var(--outline-gray-2);
	border-radius: 10px;
	color: var(--ink-gray-8);
}

.es-button:not([data-variant='solid']):hover {
	background-color: var(--surface-gray-3);
}

a {
	color: var(--ink-blue-link);
}

a.text-ink-gray-5,
a.text-ink-gray-6 {
	color: var(--ink-gray-5);
}

a:hover {
	color: var(--ink-blue-6);
}

/* Frappe paints its own light greys on these; without an override they stay
   white cards on the dark canvas. */
.card,
.web-card,
.page-content-wrapper .page_content > .card {
	background-color: var(--surface-base);
	border-color: var(--outline-gray-2);
	color: var(--ink-gray-9);
}

hr,
.divider {
	border-color: var(--outline-gray-2);
}

::selection {
	background: color-mix(in oklab, var(--brand) 28%, transparent);
	color: var(--ink-gray-9);
}