/* Copied verbatim from localman-next packages/design-tokens/tokens.css on
   2026-10-08. hoandat-auth is a separate repository, so this is an
   intentional copy: keep it in sync by copying the whole file again, never
   by editing values here. Below this header the file is unchanged. */

/* =====================================================================
   LOCALMAN DESIGN TOKENS
   The ONLY file in the repo allowed to hold colour literals and raw px
   spacing values. Every other stylesheet and component references these
   custom properties (enforced by `pnpm check:tokens`).

   Colour source: Radix Colors v3 (@radix-ui/colors@3.0.0, MIT).
     accent violet · neutral slate · secondary accent plum
     success green · warning amber · error red · info blue
   Step usage: 1–2 app background · 3–5 component background ·
   6–8 borders · 9–10 solid fills · 11 low-contrast text and icons ·
   12 high-contrast text. Dark values come from the matching *Dark scale.

   HTTP method / data-viz labels use step 11 of a hue; the semantic
   status tokens stay reserved for alerts, badges and destructive actions:
     GET → --c-viz-green    POST → --c-viz-amber   PUT → --c-viz-blue
     PATCH → --c-viz-violet DELETE → --c-viz-red   HEAD/OPTIONS → --c-viz-grey
     --c-viz-cyan: example rows and environment colour dots only.
   Diff add/remove use viz-green / viz-red tints.

   Soft labels (text on a tinted background: badges, method chips, route
   pills) use the matching *-text token. Light = step 12 of the scale,
   because step 11 drops below 4.5:1 on an 8–12% tint; dark = step 11.
     --c-viz-{green,amber,blue,cyan,violet,red,grey}-text
     --c-{success,warning,error,info}-text
   Plain step-11 text stays on solid surfaces (≥4.6:1 on white). Do not
   put --c-success / --c-warning text on --c-bg or --c-surface-subtle:
   light green-11 / amber-11 drop to 4.49 / 4.38:1 on slate-2.

   Text pairings: --c-on-primary sits on --c-primary-solid; --c-on-tone
   sits on solid step-11 fills (error, success, warning, accent).

   Blocks: [1] light (default) · [2] dark via OS preference unless
   data-theme="light" · [3] dark forced by data-theme="dark".
   Blocks [2] and [3] must stay identical; `pnpm check:tokens` fails
   when they drift apart.
   ===================================================================== */

/* [1] light (default) + theme-independent scales */
:root {
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
		monospace;

	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 999px;

	--dur-fast: 150ms;
	--dur-base: 200ms;
	--dur-slow: 300ms;
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
	--ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
	/* Entrance travel distances: modal slides in from -20px, popovers and
	   toasts from one or two spacing steps. */
	--motion-modal-offset: -20px;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--gutter: 16px;
	--container: 1120px;
	--topbar-h: 64px;
	/* Modals sit this far below the viewport top. */
	--modal-offset-top: min(8vh, 72px);
	/* Tabler outline icons render at this stroke width. */
	--icon-stroke: 1.5;
	/* Signature background grid cell. */
	--grid-size: 100px;

	color-scheme: light;
	--c-bg: #f9f9fb; /* slate-2 */
	--c-grid: #e8e8ec; /* slate-4 */
	--c-surface: #ffffff;
	--c-surface-subtle: #f9f9fb; /* slate-2 */
	--c-text: #1c2024; /* slate-12 */
	--c-text-muted: #60646c; /* slate-11 */
	--c-icon-muted: #60646c; /* slate-11 */
	--c-border-strong: #8b8d98; /* slate-9: form-control outlines, switch track */
	--c-border: #cdced6; /* slate-7 */
	--c-border-subtle: #d9d9e0; /* slate-6 */
	--c-bar-track: #e8e8ec; /* slate-4 */
	--c-primary: #6550b9; /* violet-11: text, icons, borders, tints */
	--c-primary-solid: #6e56cf; /* violet-9 */
	--c-primary-solid-hover: #654dc4; /* violet-10 */
	--c-on-primary: #ffffff;
	--c-accent: #953ea3; /* plum-11 */
	--c-info: #0d74ce; /* blue-11 */
	--c-success: #218358; /* green-11 */
	--c-warning: #ab6400; /* amber-11 */
	--c-error: #ce2c31; /* red-11 */
	--c-on-tone: #ffffff;
	--c-success-text: #193b2d; /* green-12 */
	--c-warning-text: #4f3422; /* amber-12 */
	--c-error-text: #641723; /* red-12 */
	--c-info-text: #113264; /* blue-12 */
	--c-backdrop: rgb(28 32 36 / 0.45); /* slate-12 */
	--shadow-sm: 0 1px 2px rgb(28 32 36 / 0.05), 0 1px 3px rgb(28 32 36 / 0.06);
	--shadow-md: 0 8px 24px -6px rgb(28 32 36 / 0.14);
	--shadow-lg: 0 24px 48px -12px rgb(28 32 36 / 0.3);
	/* Derived from the colour tokens, so they follow the active theme. */
	--shadow-glow-primary: 0 6px 16px -6px
		color-mix(in srgb, var(--c-primary) 60%, transparent);
	--shadow-glow-error: 0 6px 16px -6px
		color-mix(in srgb, var(--c-error) 60%, transparent);
	--shadow-focus-primary: 0 0 0 3px
		color-mix(in srgb, var(--c-primary) 22%, transparent);
	--shadow-focus-error: 0 0 0 3px
		color-mix(in srgb, var(--c-error) 22%, transparent);

	/* data-viz (light, step 11) */
	--c-viz-green: #218358;
	--c-viz-amber: #ab6400;
	--c-viz-blue: #0d74ce;
	--c-viz-violet: #6550b9;
	--c-viz-red: #ce2c31;
	--c-viz-grey: #60646c;
	--c-viz-cyan: #107d98;
	/* soft-label text (light, step 12) */
	--c-viz-green-text: #193b2d;
	--c-viz-amber-text: #4f3422;
	--c-viz-blue-text: #113264;
	--c-viz-cyan-text: #0d3c48;
	--c-viz-violet-text: #2f265f;
	--c-viz-red-text: #641723;
	--c-viz-grey-text: #1c2024;
}

@media (min-width: 768px) {
	:root {
		--gutter: 24px;
	}
}

/* Dark scale map: bg slate-1 · grid slate-3 · surface slate-2 · text slate-12 ·
   muted slate-11 · border-strong slate-9 · border slate-7 · subtle slate-6 ·
   track slate-4 · primary violet-11 · solid violet-9 · solid hover uses the
   light violet-10 (dark violet-10 drops a white label to 4.4:1) ·
   accent plum-11 · info blue-11 · success green-11 · warning amber-11 ·
   error red-11 · on-tone slate-1 · viz cyan-11 ·
   every *-text token = step 11 in dark */

/* [2] dark via OS preference unless the user forced light */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--c-bg: #111113;
		--c-grid: #212225;
		--c-surface: #18191b;
		--c-surface-subtle: #111113;
		--c-text: #edeef0;
		--c-text-muted: #b0b4ba;
		--c-icon-muted: #b0b4ba;
		--c-border-strong: #696e77;
		--c-border: #43484e;
		--c-border-subtle: #363a3f;
		--c-bar-track: #272a2d;
		--c-primary: #baa7ff;
		--c-primary-solid: #6e56cf;
		--c-primary-solid-hover: #654dc4;
		--c-on-primary: #ffffff;
		--c-accent: #e796f3;
		--c-info: #70b8ff;
		--c-success: #3dd68c;
		--c-warning: #ffca16;
		--c-error: #ff9592;
		--c-on-tone: #111113;
		--c-success-text: #3dd68c;
		--c-warning-text: #ffca16;
		--c-error-text: #ff9592;
		--c-info-text: #70b8ff;
		--c-backdrop: rgb(0 0 0 / 0.65);
		--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
		--shadow-md: 0 8px 24px -6px rgb(0 0 0 / 0.6);
		--shadow-lg: 0 24px 48px -12px rgb(0 0 0 / 0.8);
		--c-viz-green: #3dd68c;
		--c-viz-amber: #ffca16;
		--c-viz-blue: #70b8ff;
		--c-viz-violet: #baa7ff;
		--c-viz-red: #ff9592;
		--c-viz-grey: #b0b4ba;
		--c-viz-cyan: #4ccce6;
		--c-viz-green-text: #3dd68c;
		--c-viz-amber-text: #ffca16;
		--c-viz-blue-text: #70b8ff;
		--c-viz-cyan-text: #4ccce6;
		--c-viz-violet-text: #baa7ff;
		--c-viz-red-text: #ff9592;
		--c-viz-grey-text: #b0b4ba;
	}
}

/* [3] dark forced by data-theme="dark" (keep identical to [2]) */
:root[data-theme="dark"] {
	color-scheme: dark;
	--c-bg: #111113;
	--c-grid: #212225;
	--c-surface: #18191b;
	--c-surface-subtle: #111113;
	--c-text: #edeef0;
	--c-text-muted: #b0b4ba;
	--c-icon-muted: #b0b4ba;
	--c-border-strong: #696e77;
	--c-border: #43484e;
	--c-border-subtle: #363a3f;
	--c-bar-track: #272a2d;
	--c-primary: #baa7ff;
	--c-primary-solid: #6e56cf;
	--c-primary-solid-hover: #654dc4;
	--c-on-primary: #ffffff;
	--c-accent: #e796f3;
	--c-info: #70b8ff;
	--c-success: #3dd68c;
	--c-warning: #ffca16;
	--c-error: #ff9592;
	--c-on-tone: #111113;
	--c-success-text: #3dd68c;
	--c-warning-text: #ffca16;
	--c-error-text: #ff9592;
	--c-info-text: #70b8ff;
	--c-backdrop: rgb(0 0 0 / 0.65);
	--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
	--shadow-md: 0 8px 24px -6px rgb(0 0 0 / 0.6);
	--shadow-lg: 0 24px 48px -12px rgb(0 0 0 / 0.8);
	--c-viz-green: #3dd68c;
	--c-viz-amber: #ffca16;
	--c-viz-blue: #70b8ff;
	--c-viz-violet: #baa7ff;
	--c-viz-red: #ff9592;
	--c-viz-grey: #b0b4ba;
	--c-viz-cyan: #4ccce6;
	--c-viz-green-text: #3dd68c;
	--c-viz-amber-text: #ffca16;
	--c-viz-blue-text: #70b8ff;
	--c-viz-cyan-text: #4ccce6;
	--c-viz-violet-text: #baa7ff;
	--c-viz-red-text: #ff9592;
	--c-viz-grey-text: #b0b4ba;
}

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

/* Reduced motion: every duration token collapses to 1ms so components that
   read the tokens stop animating without per-component overrides. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 1ms;
		--dur-base: 1ms;
		--dur-slow: 1ms;
	}
}