/*
  Vasavan design system  ·  /shared/vasavan.css
  Theme pack: gui/themes/vasavan.md (tokens) + vasavan-components.md (component assignments).
  Local overrides: Labil Grotesk (400 only) for every sans role, Geist Mono for mono, Lucide outlined icons,
  four per-app "feels" chosen with one attribute: <html data-feel="airy|quiet|bold|compact">.
  Colour mode follows the system; <html data-theme="light|dark"> overrides it. Uses light-dark() (2024+ browsers).

  Layers
    1. Fonts
    2. Theme tokens (static) + colour tokens (light-dark)
    3. Mode-aware surfaces (never change with a feel)
    4. Feel-aware tokens + the four feels  (selector ":root, [data-feel]" so any element can be a feel scope)
    5. Base elements, 6. Layout, 7. Components, 8. Icons, 9. Motion preferences
*/

/* 1. Fonts ------------------------------------------------------------------------------------ */
@font-face {
  font-family: "Labil Grotesk";
  src: url("fonts/LabilGrotesk-Regular.woff2") format("woff2"),
       url("fonts/LabilGrotesk-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 2. Theme tokens ----------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  --theme-name: Vasavan;
  --theme-icon-family: Lucide;
  --theme-icon-style: outlined;
  --toolbar-divider-bleed: 0;
  --focus-ring-outline: initial;
  --icon-stroke-width: 2;
  --icon-light-display: none;
  --icon-regular-display: inline;
  --icon-bold-display: none;

  /* Type. Labil Grotesk is Regular 400 only: every weight token is 400, hierarchy is size/colour/space. */
  --font-ui: "Labil Grotesk", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-brand: var(--font-ui);
  --font-editorial: var(--font-ui);
  --font-data: var(--font-ui);
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --weight-ui-regular: 400;
  --weight-ui-medium: 400;
  --weight-ui-heavy: 400;
  --weight-brand-regular: 400;
  --weight-brand-medium: 400;
  --weight-brand-heavy: 400;
  --weight-editorial-regular: 400;
  --weight-editorial-medium: 400;
  --weight-editorial-heavy: 400;
  --weight-data-regular: 400;
  --weight-data-medium: 400;
  --weight-data-heavy: 400;
  --weight-mono-regular: 400;
  --weight-mono-medium: 500;
  --weight-mono-heavy: 600;

  --size-xxs: 10px;  --line-xxs: 14px;  --letter-spacing-xxs: 0.02em;
  --size-xs: 12px;   --line-xs: 16px;   --letter-spacing-xs: 0.01em;
  --size-s: 14px;    --line-s: 20px;    --letter-spacing-s: 0.01em;
  --size-m: 16px;    --line-m: 24px;    --letter-spacing-m: 0em;
  --size-l: 24px;    --line-l: 32px;    --letter-spacing-l: -0.01em;
  --size-xl: 36px;   --line-xl: 40px;   --letter-spacing-xl: -0.01em;
  --size-xxl: 48px;  --line-xxl: 52px;  --letter-spacing-xxl: -0.02em;

  --tracking-xs: -0.02em;
  --tracking-s: -0.01em;
  --tracking-m: 0em;
  --tracking-l: 0.01em;
  --tracking-xl: 0.02em;

  --space-zero: 0px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  --radius-zero: 0px;
  --radius-xs: 4px;
  --radius-s: 9px;
  --radius-m: 13px;
  --radius-l: 19px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  /* The theme draws no native borders. Edges are box-shadow only. */
  --border-none: 0px;
  --border-s: 0px;
  --border-m: 0px;
  --border-l: 0px;
  --border-shadow-none: 0 0 0 0 transparent;
  --border-shadow-s: 0 0 0 0 transparent;
  --border-shadow-m: 0 0 0 0 transparent;
  --border-shadow-l: 0 0 0 0 transparent;
  --border-default-color: light-dark(#e7e7e733, #3d3d3d33);

  --shadow-none: none;
  --shadow-s: 0px 2px 4px 0px #00000000;
  --shadow-m: 0px 2px 6px 0px #0000000d, 0px 8px 24px 0px #00000013;
  --shadow-l: 0px 16px 48px 0px #00000000;

  --surface-raised-image: none;
  --surface-raised-shadow: 0 0 0 0 transparent;
  --surface-recessed-image: none;
  --surface-recessed-shadow: 0 0 0 0 transparent;

  /* Motion */
  --motion-duration: 200ms;
  --motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-type: easing;
  --motion-visual-duration: 0.2;
  --motion-bounce: 0.2;
  --motion-enabled: 1;
  --motion-small-iterations: infinite;
  --motion-large-duration: 360ms;
  --motion-large-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-large-type: easing;
  --motion-large-visual-duration: 0.36;
  --motion-large-bounce: 0.2;
  --motion-large-iterations: infinite;
  --motion-popup-scale: 0.96;
  --motion-press-distance: 1px;

  /* Colour: palette. Pairs are light-dark(light, dark). */
  --color-none: transparent;
  --color-1: #abff5a;  --color-1-transparent: #abff5a33;
  --color-2: #085e55;  --color-2-transparent: #085e5533;
  --color-3: #ffc0ff;  --color-3-transparent: #ffc0ff33;
  --color-4: #80d8e8;  --color-4-transparent: #80d8e833;

  --neutral-1:  light-dark(#ffffff, #000000);  --neutral-1-transparent:  light-dark(#ffffff33, #00000033);
  --neutral-2:  light-dark(#fbfbfb, #202020);  --neutral-2-transparent:  light-dark(#fbfbfb33, #20202033);
  --neutral-3:  light-dark(#f4f4f4, #2b2b2b);  --neutral-3-transparent:  light-dark(#f4f4f433, #2b2b2b33);
  --neutral-4:  light-dark(#e7e7e7, #3d3d3d);  --neutral-4-transparent:  light-dark(#e7e7e733, #3d3d3d33);
  --neutral-5:  light-dark(#cdcdcd, #565656);  --neutral-5-transparent:  light-dark(#cdcdcd33, #56565633);
  --neutral-6:  light-dark(#a1a1a1, #838383);  --neutral-6-transparent:  light-dark(#a1a1a133, #83838333);
  --neutral-7:  light-dark(#7d7d7d, #ababab);  --neutral-7-transparent:  light-dark(#7d7d7d33, #ababab33);
  --neutral-8:  light-dark(#555555, #cfcfcf);  --neutral-8-transparent:  light-dark(#55555533, #cfcfcf33);
  --neutral-9:  light-dark(#333333, #f4f4f4);  --neutral-9-transparent:  light-dark(#33333333, #f4f4f433);
  --neutral-10: light-dark(#000000, #ffffff);  --neutral-10-transparent: light-dark(#00000033, #ffffff33);

  --success: #00906c;  --success-transparent: #00906c33;
  --warning: #ffea00;  --warning-transparent: #ffea0033;
  --error: #fc032d;    --error-transparent: #fc032d33;

  /* Constants for text that sits on a fixed colour (not part of the theme pack). */
  --white: #ffffff;
  --black: #000000;

  /* Theme emphasis + option roles */
  --option-badge-background: #abff5a;
  --option-badge-foreground: #333333;
  --navigation-active-foreground: #333333;
  --navigation-active-background: #abff5a;
  --emphasis-chart-fill: #abff5a33;
  --emphasis-balance-background: light-dark(#cdcdcd, #565656);
  --emphasis-rewards-background: light-dark(#f4f4f4, #2b2b2b);
  --emphasis-icon-background: light-dark(#f4f4f4, #2b2b2b);
  --emphasis-icon-foreground: light-dark(#000000, #ffffff);
  --emphasis-type-background: light-dark(#f4f4f4, #2b2b2b);
  --emphasis-type-foreground: light-dark(#000000, #ffffff);

  /* Theme "cte" convenience roles */
  --cte-canvas: light-dark(#ffffff, #000000);
  --cte-surface: light-dark(#fbfbfb, #202020);
  --cte-surface-muted: light-dark(#f4f4f4, #2b2b2b);
  --cte-text: light-dark(#000000, #ffffff);
  --cte-text-muted: light-dark(#7d7d7d, #ababab);
  --cte-border: light-dark(#e7e7e733, #3d3d3d33);
  --cte-accent: #abff5a;
  --cte-accent-text: light-dark(#333333, #202020);
  --cte-danger: #fc032d;
  --cte-focus: #abff5a;
  --cte-font: var(--font-ui);
  --cte-font-size: 14px;
  --cte-font-weight: 400;
  --cte-line-height: 20px;
  --cte-letter-spacing: 0.01em;
  --cte-detail-font-size: 12px;
  --cte-detail-line-height: 16px;
  --cte-detail-letter-spacing: 0.01em;

  /* Optional local addition: the width of hairline edges that the theme leaves at 0 (outline button, invalid field). */
  --edge-hairline: 1px;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* 3. Mode-aware surfaces (follow the colour mode only, never a feel) --------------------------- */
:root {
  --surface-canvas: var(--neutral-1);
  --surface-card: light-dark(var(--neutral-3), var(--neutral-2));
  --surface-raised: light-dark(var(--neutral-1), var(--neutral-2));      /* popover, toast, menu */
  --surface-field: var(--neutral-3);                                     /* input, textarea, select */
  --surface-field-on-card: var(--neutral-1);                             /* field sitting inside a card */
  --surface-hover: var(--neutral-3);
  --surface-pressed: var(--neutral-4);
  --surface-selected: var(--neutral-1);                                  /* selected tab on its list */
  --on-accent: light-dark(var(--neutral-9), var(--neutral-2));           /* theme primaryForeground */
  --focus-color: var(--color-1);
  --focus-halo: var(--neutral-10);
}

/* 4. Feel-aware tokens + feels ---------------------------------------------------------------- */
:root, [data-feel] {
  --text: var(--neutral-10);
  --text-muted: var(--neutral-8);        /* theme uses neutral-7 for descriptions; 8 keeps AA contrast in light */
  --text-subtle: var(--neutral-7);       /* placeholders, decorative metadata. Below AA on neutral-3 in light (3.7:1): never use it for content someone has to read */
  --text-disabled: var(--neutral-6);
  --divider: var(--neutral-4);

  --action-bg: var(--color-1);           /* primary button */
  --action-fg: var(--on-accent);
  --nav-active-bg: var(--navigation-active-background);
  --nav-active-fg: var(--navigation-active-foreground);
  --badge-bg: var(--option-badge-background);
  --badge-fg: var(--option-badge-foreground);
  --selection-bg: var(--color-1);
  --selection-fg: var(--black);

  --topbar-bg: var(--surface-canvas);
  --topbar-fg: var(--text);

  --outline-edge: var(--neutral-4);      /* outline button edge */
  --field-edge: var(--neutral-4);        /* field edge colour ... */
  --field-edge-width: 0px;               /* ... drawn only when width > 0 (theme default: none) */

  --page-max: 1120px;
  --page-gutter: var(--space-m);
  --measure: 62ch;

  /* Every feel scope paints its own canvas and type so it can be nested (see /feel/). */
  background-color: var(--surface-canvas);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: var(--weight-ui-regular);
  font-size: var(--size-m);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
}
@media (min-width: 640px) {
  :root, [data-feel] { --page-gutter: var(--space-l); }
}

/* airy: generous spacing, larger body text, more line-height */
[data-feel="airy"] {
  --space-xxs: 8px;  --space-xs: 12px; --space-s: 16px; --space-m: 24px;
  --space-l: 32px;   --space-xl: 48px; --space-xxl: 64px;
  --size-xxs: 11px;  --line-xxs: 16px;
  --size-xs: 13px;   --line-xs: 20px;
  --size-s: 15px;    --line-s: 24px;
  --size-m: 18px;    --line-m: 30px;
  --size-l: 26px;    --line-l: 36px;
  --size-xl: 40px;   --line-xl: 48px;
  --size-xxl: 56px;  --line-xxl: 64px;
  --measure: 58ch;
}

/* quiet: neutral greys only; the accent colour is kept for focus and selection; low-contrast chrome */
[data-feel="quiet"] {
  --action-bg: var(--neutral-9);
  --action-fg: var(--neutral-1);
  --nav-active-bg: var(--neutral-3);
  --nav-active-fg: var(--neutral-10);
  --badge-bg: var(--neutral-4);
  --badge-fg: var(--neutral-9);
  --divider: var(--neutral-3);
  --outline-edge: var(--neutral-4);
  --text-subtle: var(--neutral-7);
}

/* bold: color-1 for primary actions and active nav, bigger display sizes, strong black/white contrast */
[data-feel="bold"] {
  --size-l: 28px;    --line-l: 34px;
  --size-xl: 48px;   --line-xl: 52px;
  --size-xxl: 72px;  --line-xxl: 72px;
  --letter-spacing-xl: -0.02em;
  --letter-spacing-xxl: -0.03em;
  --text-muted: var(--neutral-9);
  --text-subtle: var(--neutral-8);
  --action-bg: var(--color-1);
  --action-fg: var(--black);
  --nav-active-bg: var(--color-1);
  --nav-active-fg: var(--black);
  --badge-bg: var(--color-1);
  --badge-fg: var(--black);
  --divider: var(--neutral-10);
  --outline-edge: var(--neutral-10);
  --field-edge: var(--neutral-10);
  --field-edge-width: var(--edge-hairline);
  --topbar-bg: var(--neutral-10);
  --topbar-fg: var(--neutral-1);
}

/* compact: tighter spacing, 14px base text, denser controls */
[data-feel="compact"] {
  --space-xxs: 2px;  --space-xs: 4px;  --space-s: 8px;  --space-m: 12px;
  --space-l: 16px;   --space-xl: 24px; --space-xxl: 32px;
  --size-xxs: 10px;  --line-xxs: 13px;
  --size-xs: 11px;   --line-xs: 14px;
  --size-s: 13px;    --line-s: 18px;
  --size-m: 14px;    --line-m: 20px;
  --size-l: 20px;    --line-l: 26px;
  --size-xl: 28px;   --line-xl: 34px;
  --size-xxl: 36px;  --line-xxl: 42px;
  --radius-s: 7px;   --radius-m: 10px; --radius-l: 14px;
  --measure: 72ch;
}

/* 5. Base elements ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  text-wrap: pretty;
  scroll-behavior: smooth;
}
body { margin: 0; min-height: 100vh; min-height: 100dvh; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-brand);
  font-weight: var(--weight-brand-regular);
  text-wrap: pretty;
}
h1 { font-size: var(--size-xl);  line-height: var(--line-xl);  letter-spacing: var(--letter-spacing-xl); }
h2 { font-size: var(--size-l);   line-height: var(--line-l);   letter-spacing: var(--letter-spacing-l); }
h3 { font-size: var(--size-m);   line-height: var(--line-m);   letter-spacing: var(--letter-spacing-m); }
h4, h5, h6 { font-size: var(--size-s); line-height: var(--line-s); letter-spacing: var(--letter-spacing-s); }
/* Labil Grotesk ships Regular 400 only. UA styles make these 700, so pin them to the weight token (hierarchy comes from size, colour, space). */
b, strong, th, optgroup, summary { font-weight: var(--weight-ui-heavy); }
a { color: inherit; text-decoration-color: var(--neutral-6); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
/* Native select popups: same family and weight as the control (the popup surface itself stays OS-drawn). */
option, optgroup { font-family: var(--font-ui); background: var(--surface-raised); color: var(--text); }
option { font-weight: var(--weight-ui-regular); }
/* Preformatted text and editable fields keep stable line breaks (text-wrap: pretty is for reading copy). */
pre, textarea, input { text-wrap: wrap; }
button { cursor: pointer; }
hr { margin: 0; }
::selection { background: var(--selection-bg); color: var(--selection-fg); }
::placeholder { color: var(--text-subtle); opacity: 1; }

:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--focus-halo);
}
:focus:not(:focus-visible) { outline: none; }

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-weight: var(--weight-mono-regular);
  font-size: 0.92em;
  letter-spacing: 0;
}
pre { white-space: pre-wrap; }
/* Scroll area: thin scrollbar in the pack's thumb colour (neutral-5 = the pack's hover/focus thumb, visible on cards). */
.scroll-area { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--neutral-5) transparent; }
.mono-strong { font-family: var(--font-mono); font-weight: var(--weight-mono-medium); }
kbd {
  display: inline-block;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-xs);
  background: var(--surface-field);
}

/* Type scale helpers: size, line height and tracking always travel together */
.t-display { font-family: var(--font-brand); font-size: var(--size-xxl); line-height: var(--line-xxl); letter-spacing: var(--letter-spacing-xxl); }
.t-title   { font-family: var(--font-brand); font-size: var(--size-xl);  line-height: var(--line-xl);  letter-spacing: var(--letter-spacing-xl); }
.t-heading { font-family: var(--font-brand); font-size: var(--size-l);   line-height: var(--line-l);   letter-spacing: var(--letter-spacing-l); }
.t-body    { font-size: var(--size-m);  line-height: var(--line-m);  letter-spacing: var(--letter-spacing-m); }
.t-small   { font-size: var(--size-s);  line-height: var(--line-s);  letter-spacing: var(--letter-spacing-s); }
.t-caption { font-size: var(--size-xs); line-height: var(--line-xs); letter-spacing: var(--letter-spacing-xs); }
.t-tiny    { font-size: var(--size-xxs); line-height: var(--line-xxs); letter-spacing: var(--letter-spacing-xxs); }
.text-muted { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); }
.text-error { color: var(--error); }
.measure { max-width: var(--measure); }
.push-end { margin-inline-start: auto; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--space-m); top: -100px; z-index: 2000;
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-s);
  background: var(--action-bg); color: var(--action-fg);
}
.skip-link:focus { top: var(--space-m); }

/* 6. Layout ----------------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }
.stack { display: grid; gap: var(--stack, var(--space-m)); align-content: start; }
.stack--xs { --stack: var(--space-xs); }
.stack--s  { --stack: var(--space-s); }
.stack--l  { --stack: var(--space-l); }
.stack--xl { --stack: var(--space-xl); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--space-xs)); }
.cluster--m { --cluster: var(--space-m); }
.cluster--between { justify-content: space-between; }
.grid-2 { display: grid; gap: var(--space-l); grid-template-columns: 1fr; }
@media (min-width: 960px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.separator { height: 1px; border: 0; background: none; box-shadow: inset 0 -1px 0 var(--divider); }

/* 7. Components ------------------------------------------------------------------------------- */

/* Button: .btn (secondary) + .btn--primary | --outline | --ghost | --danger; sizes --sm | --lg; .btn--icon */
.btn {
  --btn-bg: var(--neutral-3);
  --btn-bg-hover: var(--neutral-4);
  --btn-bg-active: var(--neutral-5);
  --btn-fg: var(--neutral-10);
  --btn-edge: transparent;
  --btn-edge-width: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-l);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: inset 0 0 0 var(--btn-edge-width) var(--btn-edge);
  font-family: var(--font-ui);
  font-weight: var(--weight-ui-medium);
  font-size: var(--size-s);
  line-height: var(--line-s);
  letter-spacing: var(--tracking-l);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--motion-duration) var(--motion-easing),
    color var(--motion-duration) var(--motion-easing),
    box-shadow var(--motion-duration) var(--motion-easing),
    transform var(--motion-duration) var(--motion-easing);
}
.btn:active { background: var(--btn-bg-active); transform: translateY(var(--motion-press-distance)); }
@media (hover: hover) { .btn:hover { background: var(--btn-bg-hover); } }
.btn:focus-visible { box-shadow: inset 0 0 0 var(--btn-edge-width) var(--btn-edge), 0 0 0 1px var(--focus-halo); }
.btn:disabled, .btn[aria-disabled="true"] {
  --btn-bg: var(--neutral-3);
  --btn-bg-hover: var(--neutral-3);
  --btn-bg-active: var(--neutral-3);
  --btn-fg: var(--text-disabled);
  --btn-edge-width: 0px;
  cursor: not-allowed;
  transform: none;
}
.btn--primary {
  --btn-bg: var(--action-bg);
  --btn-bg-hover: color-mix(in srgb, var(--action-bg) 88%, var(--neutral-10));
  --btn-bg-active: color-mix(in srgb, var(--action-bg) 78%, var(--neutral-10));
  --btn-fg: var(--action-fg);
}
.btn--outline {
  --btn-bg: transparent;
  --btn-bg-hover: var(--neutral-3);
  --btn-bg-active: var(--neutral-4);
  --btn-edge: var(--outline-edge);
  --btn-edge-width: var(--edge-hairline);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--neutral-3);
  --btn-bg-active: var(--neutral-4);
}
.btn--danger {
  --btn-bg: var(--error);
  --btn-bg-hover: color-mix(in srgb, var(--error) 88%, var(--neutral-10));
  --btn-bg-active: color-mix(in srgb, var(--error) 78%, var(--neutral-10));
  --btn-fg: var(--black); /* the pack's neutral-1 is white in light mode: 4.1:1 on --error, fails AA. Black is 5.2:1 in both modes. */
}
.btn--sm { padding: var(--space-xs) var(--space-m); }
.btn--lg { padding: var(--space-m) var(--space-xl); font-size: var(--size-m); line-height: var(--line-m); }
.btn--icon { padding: var(--space-s); aspect-ratio: 1; }
.btn--icon.btn--sm { padding: var(--space-xs); }
.btn--icon.btn--lg { padding: var(--space-m); }
.btn--block { display: flex; width: 100%; }
.btn[aria-busy="true"] { pointer-events: none; }

/* Field: label, hint and error around a control */
.field { display: grid; gap: var(--space-xs); min-width: 0; }
.field__label { font-size: var(--size-s); line-height: var(--line-s); letter-spacing: var(--tracking-l); color: var(--text); }
.field__hint  { font-size: var(--size-s); line-height: var(--line-s); letter-spacing: var(--tracking-l); color: var(--text-muted); }
.field__error { font-size: var(--size-xs); line-height: var(--line-xs); letter-spacing: var(--tracking-l); color: var(--error); }
.field:has(:disabled) .field__label,
.field:has(:disabled) .field__hint { color: var(--text-disabled); }

/* Input, textarea, select: filled surface, no native border */
.input, .textarea, .select > select {
  display: block;
  width: 100%;
  min-width: 0;
  padding: var(--space-s) var(--space-m);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--surface-field);
  color: var(--text);
  box-shadow: inset 0 0 0 var(--field-edge-width) var(--field-edge);
  font-family: var(--font-ui);
  font-weight: var(--weight-ui-regular);
  font-size: var(--size-s);
  line-height: var(--line-s);
  letter-spacing: var(--tracking-l);
  -webkit-appearance: none;
  appearance: none;
  transition:
    background-color var(--motion-duration) var(--motion-easing),
    box-shadow var(--motion-duration) var(--motion-easing);
}
@media (hover: hover) {
  .input:hover, .textarea:hover, .select > select:hover {
    background: color-mix(in srgb, var(--surface-field) 94%, var(--neutral-10));
  }
}
.input:focus-visible, .textarea:focus-visible, .select > select:focus-visible {
  box-shadow: inset 0 0 0 var(--field-edge-width) var(--field-edge), 0 0 0 1px var(--focus-halo);
}
.input:disabled, .textarea:disabled, .select > select:disabled { color: var(--text-disabled); cursor: not-allowed; }
.input[readonly], .textarea[readonly] { background: var(--neutral-2); color: var(--neutral-8); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select > select[aria-invalid="true"] {
  background: var(--error-transparent);
  box-shadow: inset 0 0 0 var(--edge-hairline) var(--error);
}
.input[data-state="valid"], .textarea[data-state="valid"] {
  background: var(--success-transparent);
  box-shadow: inset 0 0 0 var(--edge-hairline) var(--success);
}
.input[aria-invalid="true"]:focus-visible, .textarea[aria-invalid="true"]:focus-visible, .select > select[aria-invalid="true"]:focus-visible,
.input[data-state="valid"]:focus-visible, .textarea[data-state="valid"]:focus-visible {
  box-shadow: inset 0 0 0 var(--edge-hairline) var(--status-edge), 0 0 0 1px var(--focus-halo);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select > select[aria-invalid="true"] { --status-edge: var(--error); }
.input[data-state="valid"], .textarea[data-state="valid"] { --status-edge: var(--success); }
.textarea {
  min-height: 8em;
  resize: vertical;
  font-size: var(--size-m);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
}
.textarea--mono { font-family: var(--font-mono); font-size: var(--size-s); line-height: var(--line-m); letter-spacing: 0; }
.select { position: relative; display: block; }
.select > select { padding-right: calc(var(--space-m) + 1.75em); cursor: pointer; }
.select::after {
  content: "";
  position: absolute;
  right: var(--space-m);
  top: 50%;
  width: 1.25em;
  height: 1.25em;
  transform: translateY(-50%);
  background: var(--text-muted);
  -webkit-mask: url("icons/chevron-down.svg") center / contain no-repeat;
  mask: url("icons/chevron-down.svg") center / contain no-repeat;
  pointer-events: none;
}
.card .input, .card .textarea, .card .select > select { background: var(--surface-field-on-card); }

/* Card */
.card {
  display: grid;
  gap: var(--space-m);
  align-content: start;
  min-width: 0;
  padding: var(--space-l);
  border-radius: var(--radius-m);
  background: var(--surface-card);
  color: var(--text);
}
.card__title { font-family: var(--font-brand); font-size: var(--size-m); line-height: var(--line-m); }
.card__body { color: var(--text-muted); font-size: var(--size-s); line-height: var(--line-s); }
.card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }

/* Badge: themed accent by default; --neutral | --success | --warning | --error | --outline */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xxs) var(--space-s);
  border-radius: var(--radius-full);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--size-xs);
  line-height: var(--line-xs);
  letter-spacing: var(--tracking-l);
  white-space: nowrap;
}
.badge--neutral { background: var(--neutral-4); color: var(--neutral-9); }
.badge--outline { background: transparent; color: var(--text); box-shadow: inset 0 0 0 var(--edge-hairline) var(--outline-edge); }
.badge--success { background: var(--success-transparent); color: var(--text); }
.badge--warning { background: var(--warning-transparent); color: var(--text); }
.badge--error   { background: var(--error-transparent);   color: var(--text); }
.badge--success::before, .badge--warning::before, .badge--error::before {
  content: "";
  width: 0.5em; height: 0.5em;
  border-radius: var(--radius-full);
  background: var(--status-color);
}
.badge--success { --status-color: var(--success); }
.badge--warning { --status-color: var(--warning); }
.badge--error   { --status-color: var(--error); }

/* Status: dot + text, for inline state */
.status { display: inline-flex; align-items: center; gap: var(--space-xs); }
.status::before {
  content: "";
  flex: none;
  width: 0.5em; height: 0.5em;
  border-radius: var(--radius-full);
  background: var(--status-color, var(--neutral-7));
}
.status[data-status="success"] { --status-color: var(--success); }
.status[data-status="warning"] { --status-color: var(--warning); }
.status[data-status="error"]   { --status-color: var(--error); }
.status[data-status="info"]    { --status-color: var(--color-4); }

/* Top bar + navigation */
.topbar {
  --hover-bg: var(--surface-hover);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-m);
  padding: var(--space-s) var(--page-gutter);
  background: var(--topbar-bg);
  color: var(--topbar-fg);
  box-shadow: inset 0 -1px 0 var(--divider);
}
[data-feel="bold"] .topbar { --hover-bg: color-mix(in srgb, var(--topbar-fg) 16%, transparent); box-shadow: none; }
.topbar--sticky { position: sticky; top: 0; z-index: 100; }
.topbar__brand {
  padding-block: var(--space-xxs); /* 24px+ tall hit area */
  font-family: var(--font-brand);
  font-size: var(--size-m);
  line-height: var(--line-m);
  letter-spacing: var(--letter-spacing-m);
  color: inherit;
  text-decoration: none;
}
.topbar__nav { flex: 0 1 auto; min-width: 0; }
@media (max-width: 559px) { .topbar__nav { order: 3; flex: 1 0 100%; } }
.topbar__actions { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
.topbar .btn--ghost { --btn-fg: currentColor; --btn-bg-hover: var(--hover-bg); --btn-bg-active: var(--hover-bg); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xxs); }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-s);
  color: inherit;
  font-size: var(--size-s);
  line-height: var(--line-s);
  letter-spacing: var(--tracking-l);
  text-decoration: none;
  transition: background-color var(--motion-duration) var(--motion-easing), color var(--motion-duration) var(--motion-easing);
}
@media (hover: hover) { .nav__link:hover { background: var(--hover-bg, var(--surface-hover)); } }
.nav__link[aria-current="page"], .nav__link[aria-current="true"] { background: var(--nav-active-bg); color: var(--nav-active-fg); }

/* Tabs and segmented control (shared look). Tabs: role=tablist + role=tab[aria-selected]. Segmented: buttons with aria-pressed. */
.tabs, .segmented {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  max-width: 100%;
  padding: var(--space-xxs);
  border-radius: var(--radius-m);
  background: var(--surface-field);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar, .segmented::-webkit-scrollbar { display: none; }
.tab, .segmented__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex: none;
  padding: var(--space-xs) var(--space-s);
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--size-s);
  line-height: var(--line-s);
  letter-spacing: var(--tracking-l);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--motion-duration) var(--motion-easing),
    color var(--motion-duration) var(--motion-easing);
}
@media (hover: hover) { .tab:hover, .segmented__item:hover { color: var(--text); } }
.tab[aria-selected="true"], .segmented__item[aria-pressed="true"], .segmented__item[aria-checked="true"] {
  background: var(--surface-selected);
  color: var(--text);
}
.tab:focus-visible, .segmented__item:focus-visible { outline-offset: -2px; } /* .tabs scrolls (overflow), so an outside ring would be clipped */
.tab:disabled, .segmented__item:disabled { color: var(--text-disabled); cursor: not-allowed; }
.tab-panel { padding-top: var(--space-xs); }
.tab-panel[hidden] { display: none; }

/* Slider (native range). Pack: track neutral-3/4, indicator primary (color-1), thumb neutral-9, radius full.
   The fill is --action-bg so the quiet feel stays grey. JS sets --p (0%..100%) for the WebKit fill; Firefox has ::-moz-range-progress. */
.range {
  --p: 0%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 24px; /* hit area */
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--action-bg) var(--p), var(--neutral-4) var(--p));
}
.range::-moz-range-track { height: 4px; border-radius: var(--radius-full); background: var(--neutral-4); }
.range::-moz-range-progress { height: 4px; border-radius: var(--radius-full); background: var(--action-bg); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--neutral-9);
}
.range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: var(--radius-full); background: var(--neutral-9); }
.range:focus-visible { outline-offset: 0; }
.range:disabled { cursor: not-allowed; }
.range:disabled::-webkit-slider-thumb { background: var(--neutral-6); }
.range:disabled::-moz-range-thumb { background: var(--neutral-6); }

/* Link list: rows that go somewhere (app lists) */
.link-list { display: grid; gap: var(--space-xxs); }
.link-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-xs) var(--space-m);
  padding: var(--space-m);
  margin-inline: calc(var(--space-m) * -1);
  border-radius: var(--radius-m);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--motion-duration) var(--motion-easing);
}
@media (hover: hover) { .link-row:hover { background: var(--surface-hover); } }
.link-row__title { font-family: var(--font-brand); font-size: var(--size-l); line-height: var(--line-l); letter-spacing: var(--letter-spacing-l); }
.link-row__desc { grid-column: 1; color: var(--text-muted); font-size: var(--size-s); line-height: var(--line-s); letter-spacing: var(--tracking-l); max-width: var(--measure); }
.link-row > .icon { grid-column: 2; grid-row: 1 / span 2; color: var(--text-muted); transition: transform var(--motion-duration) var(--motion-easing); }
@media (hover: hover) { .link-row:hover > .icon { transform: translateX(var(--space-xxs)); } }

/* Toast: put .toast elements in .toast-region (or call Vasavan.toast() from vasavan.js) */
.toast-region {
  position: fixed;
  right: var(--space-m);
  bottom: var(--space-m);
  z-index: 1000;
  display: grid;
  gap: var(--space-xs);
  width: min(380px, calc(100vw - var(--space-m) * 2));
  pointer-events: none;
}
.toast {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xxs) var(--space-s);
  align-items: start;
  padding: var(--space-m);
  border-radius: var(--radius-m);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-m), inset 0 0 0 var(--edge-hairline) var(--divider);
  pointer-events: auto;
  animation: v-toast-in var(--motion-large-duration) var(--motion-large-easing) both;
}
.toast[data-state="closing"] { animation: v-toast-out var(--motion-duration) var(--motion-easing) both; }
.toast__title { font-size: var(--size-s); line-height: var(--line-s); letter-spacing: var(--tracking-l); }
.toast__desc { grid-column: 1; color: var(--text-muted); font-size: var(--size-s); line-height: var(--line-s); letter-spacing: var(--tracking-l); }
.toast__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xs); }
.toast__close { grid-column: 2; grid-row: 1; margin: calc(var(--space-xs) * -1) calc(var(--space-xs) * -1) 0 0; }
@keyframes v-toast-in {
  from { opacity: 0; transform: translateY(var(--space-xs)) scale(var(--motion-popup-scale)); }
  to   { opacity: 1; transform: none; }
}
@keyframes v-toast-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(var(--space-xs)) scale(var(--motion-popup-scale)); }
}

/* 8. Icons (Lucide outlined, mask-based so they take currentColor). <span class="icon" data-icon="check" aria-hidden="true"></span> */
.icon {
  display: inline-block;
  flex: none;
  width: var(--icon-size, 1.25em);
  height: var(--icon-size, 1.25em);
  background-color: currentColor;
  -webkit-mask: var(--icon-mask, none) center / contain no-repeat;
  mask: var(--icon-mask, none) center / contain no-repeat;
  vertical-align: -0.25em;
}
.icon--s  { --icon-size: 16px; }
.icon--m  { --icon-size: 20px; }
.icon--l  { --icon-size: 24px; }
.icon--spin { animation: v-spin 1s linear infinite; }
@keyframes v-spin { to { transform: rotate(360deg); } }
/*ICONS:BEGIN*/
.icon[data-icon="arrow-left"] { --icon-mask: url("icons/arrow-left.svg"); }
.icon[data-icon="arrow-right"] { --icon-mask: url("icons/arrow-right.svg"); }
.icon[data-icon="arrow-up-right"] { --icon-mask: url("icons/arrow-up-right.svg"); }
.icon[data-icon="captions"] { --icon-mask: url("icons/captions.svg"); }
.icon[data-icon="check"] { --icon-mask: url("icons/check.svg"); }
.icon[data-icon="chevron-down"] { --icon-mask: url("icons/chevron-down.svg"); }
.icon[data-icon="chevron-right"] { --icon-mask: url("icons/chevron-right.svg"); }
.icon[data-icon="circle-alert"] { --icon-mask: url("icons/circle-alert.svg"); }
.icon[data-icon="circle-check"] { --icon-mask: url("icons/circle-check.svg"); }
.icon[data-icon="copy"] { --icon-mask: url("icons/copy.svg"); }
.icon[data-icon="download"] { --icon-mask: url("icons/download.svg"); }
.icon[data-icon="external-link"] { --icon-mask: url("icons/external-link.svg"); }
.icon[data-icon="file-text"] { --icon-mask: url("icons/file-text.svg"); }
.icon[data-icon="hand"] { --icon-mask: url("icons/hand.svg"); }
.icon[data-icon="house"] { --icon-mask: url("icons/house.svg"); }
.icon[data-icon="info"] { --icon-mask: url("icons/info.svg"); }
.icon[data-icon="loader-circle"] { --icon-mask: url("icons/loader-circle.svg"); }
.icon[data-icon="lock"] { --icon-mask: url("icons/lock.svg"); }
.icon[data-icon="log-out"] { --icon-mask: url("icons/log-out.svg"); }
.icon[data-icon="menu"] { --icon-mask: url("icons/menu.svg"); }
.icon[data-icon="minus"] { --icon-mask: url("icons/minus.svg"); }
.icon[data-icon="monitor"] { --icon-mask: url("icons/monitor.svg"); }
.icon[data-icon="moon"] { --icon-mask: url("icons/moon.svg"); }
.icon[data-icon="notebook-pen"] { --icon-mask: url("icons/notebook-pen.svg"); }
.icon[data-icon="pause"] { --icon-mask: url("icons/pause.svg"); }
.icon[data-icon="pencil"] { --icon-mask: url("icons/pencil.svg"); }
.icon[data-icon="play"] { --icon-mask: url("icons/play.svg"); }
.icon[data-icon="plus"] { --icon-mask: url("icons/plus.svg"); }
.icon[data-icon="search"] { --icon-mask: url("icons/search.svg"); }
.icon[data-icon="settings"] { --icon-mask: url("icons/settings.svg"); }
.icon[data-icon="sun"] { --icon-mask: url("icons/sun.svg"); }
.icon[data-icon="trash-2"] { --icon-mask: url("icons/trash-2.svg"); }
.icon[data-icon="triangle-alert"] { --icon-mask: url("icons/triangle-alert.svg"); }
.icon[data-icon="upload"] { --icon-mask: url("icons/upload.svg"); }
.icon[data-icon="user"] { --icon-mask: url("icons/user.svg"); }
.icon[data-icon="video"] { --icon-mask: url("icons/video.svg"); }
.icon[data-icon="x"] { --icon-mask: url("icons/x.svg"); }
/*ICONS:END*/

/* 9. Motion preferences: zero duration is immediate; loops stop */
@media (prefers-reduced-motion: reduce) {
  :root, [data-feel] {
    --motion-duration: 0ms;
    --motion-large-duration: 0ms;
    --motion-enabled: 0;
    --motion-press-distance: 0px;
    --motion-popup-scale: 1;
  }
  html { scroll-behavior: auto; }
  .icon--spin { animation: none; }
  .toast, .toast[data-state="closing"] { animation: none; }
}