/* ostanautosi — generated by generate.js. DO NOT EDIT BY HAND.
 * Edit ostanautosi.json and regenerate. Project-specific CSS goes in the
 * (custom) layer, which is declared last and always wins.
 * Layer order (low -> high priority): */
@layer reset, primitives, tokens, base, layout, components, utilities, custom;


@layer primitives {
  :root {
    /* OKLCH color ramps — raw palette, not used directly in components */
    --clr-primary-50: oklch(97.2% 0.045 284);
    --clr-primary-100: oklch(94% 0.08 284);
    --clr-primary-200: oklch(87.2% 0.1375 284);
    --clr-primary-300: oklch(78.8% 0.195 284);
    --clr-primary-400: oklch(69.4% 0.235 284);
    --clr-primary-500: oklch(60.2% 0.25 284);
    --clr-primary-600: oklch(52.4% 0.24 284);
    --clr-primary-700: oklch(44.4% 0.21 284);
    --clr-primary-800: oklch(36.6% 0.165 284);
    --clr-primary-900: oklch(28.8% 0.115 284);
    --clr-primary-950: oklch(21.4% 0.075 284);

    --clr-secondary-50: oklch(97.2% 0.0324 288);
    --clr-secondary-100: oklch(94% 0.0576 288);
    --clr-secondary-200: oklch(87.2% 0.099 288);
    --clr-secondary-300: oklch(78.8% 0.1404 288);
    --clr-secondary-400: oklch(69.4% 0.1692 288);
    --clr-secondary-500: oklch(60.2% 0.18 288);
    --clr-secondary-600: oklch(52.4% 0.1728 288);
    --clr-secondary-700: oklch(44.4% 0.1512 288);
    --clr-secondary-800: oklch(36.6% 0.1188 288);
    --clr-secondary-900: oklch(28.8% 0.0828 288);
    --clr-secondary-950: oklch(21.4% 0.054 288);

    --clr-accent-50: oklch(97.2% 0.0324 170);
    --clr-accent-100: oklch(94% 0.0576 170);
    --clr-accent-200: oklch(87.2% 0.099 170);
    --clr-accent-300: oklch(78.8% 0.1404 170);
    --clr-accent-400: oklch(69.4% 0.1692 170);
    --clr-accent-500: oklch(60.2% 0.18 170);
    --clr-accent-600: oklch(52.4% 0.1728 170);
    --clr-accent-700: oklch(44.4% 0.1512 170);
    --clr-accent-800: oklch(36.6% 0.1188 170);
    --clr-accent-900: oklch(28.8% 0.0828 170);
    --clr-accent-950: oklch(21.4% 0.054 170);

    --clr-base-50: oklch(97.2% 0.0081 288);
    --clr-base-100: oklch(94% 0.0144 288);
    --clr-base-200: oklch(87.2% 0.0248 288);
    --clr-base-300: oklch(78.8% 0.0351 288);
    --clr-base-400: oklch(69.4% 0.0423 288);
    --clr-base-500: oklch(60.2% 0.045 288);
    --clr-base-600: oklch(52.4% 0.0432 288);
    --clr-base-700: oklch(44.4% 0.0378 288);
    --clr-base-800: oklch(36.6% 0.0297 288);
    --clr-base-900: oklch(28.8% 0.0207 288);
    --clr-base-950: oklch(21.4% 0.0135 288);

    --clr-success-50: oklch(97.2% 0.0234 150);
    --clr-success-100: oklch(94% 0.0416 150);
    --clr-success-200: oklch(87.2% 0.0715 150);
    --clr-success-300: oklch(78.8% 0.1014 150);
    --clr-success-400: oklch(69.4% 0.1222 150);
    --clr-success-500: oklch(60.2% 0.13 150);
    --clr-success-600: oklch(52.4% 0.1248 150);
    --clr-success-700: oklch(44.4% 0.1092 150);
    --clr-success-800: oklch(36.6% 0.0858 150);
    --clr-success-900: oklch(28.8% 0.0598 150);
    --clr-success-950: oklch(21.4% 0.039 150);

    --clr-warning-50: oklch(97.2% 0.0288 80);
    --clr-warning-100: oklch(94% 0.0512 80);
    --clr-warning-200: oklch(87.2% 0.088 80);
    --clr-warning-300: oklch(78.8% 0.1248 80);
    --clr-warning-400: oklch(69.4% 0.1504 80);
    --clr-warning-500: oklch(60.2% 0.16 80);
    --clr-warning-600: oklch(52.4% 0.1536 80);
    --clr-warning-700: oklch(44.4% 0.1344 80);
    --clr-warning-800: oklch(36.6% 0.1056 80);
    --clr-warning-900: oklch(28.8% 0.0736 80);
    --clr-warning-950: oklch(21.4% 0.048 80);

    --clr-danger-50: oklch(97.2% 0.036 27);
    --clr-danger-100: oklch(94% 0.064 27);
    --clr-danger-200: oklch(87.2% 0.11 27);
    --clr-danger-300: oklch(78.8% 0.156 27);
    --clr-danger-400: oklch(69.4% 0.188 27);
    --clr-danger-500: oklch(60.2% 0.2 27);
    --clr-danger-600: oklch(52.4% 0.192 27);
    --clr-danger-700: oklch(44.4% 0.168 27);
    --clr-danger-800: oklch(36.6% 0.132 27);
    --clr-danger-900: oklch(28.8% 0.092 27);
    --clr-danger-950: oklch(21.4% 0.06 27);

    --clr-info-50: oklch(97.2% 0.0216 240);
    --clr-info-100: oklch(94% 0.0384 240);
    --clr-info-200: oklch(87.2% 0.066 240);
    --clr-info-300: oklch(78.8% 0.0936 240);
    --clr-info-400: oklch(69.4% 0.1128 240);
    --clr-info-500: oklch(60.2% 0.12 240);
    --clr-info-600: oklch(52.4% 0.1152 240);
    --clr-info-700: oklch(44.4% 0.1008 240);
    --clr-info-800: oklch(36.6% 0.0792 240);
    --clr-info-900: oklch(28.8% 0.0552 240);
    --clr-info-950: oklch(21.4% 0.036 240);
  }
}

@layer tokens {
  :root {
    /* ---- color (semantic, ACSS-mirrored) ---- */
    --primary: var(--clr-primary-500);
    --primary-hover: var(--clr-primary-600);
    --primary-ultra-light: var(--clr-primary-50);
    --primary-light: var(--clr-primary-200);
    --primary-dark: var(--clr-primary-700);
    --primary-ultra-dark: var(--clr-primary-900);
    --primary-trans-10: oklch(from var(--primary) l c h / 0.1);
    --primary-trans-20: oklch(from var(--primary) l c h / 0.2);
    --primary-trans-30: oklch(from var(--primary) l c h / 0.3);
    --primary-trans-40: oklch(from var(--primary) l c h / 0.4);
    --primary-trans-50: oklch(from var(--primary) l c h / 0.5);
    --primary-trans-60: oklch(from var(--primary) l c h / 0.6);
    --primary-trans-70: oklch(from var(--primary) l c h / 0.7);
    --primary-trans-80: oklch(from var(--primary) l c h / 0.8);
    --primary-trans-90: oklch(from var(--primary) l c h / 0.9);

    --secondary: var(--clr-secondary-500);
    --secondary-hover: var(--clr-secondary-600);
    --secondary-ultra-light: var(--clr-secondary-50);
    --secondary-light: var(--clr-secondary-200);
    --secondary-dark: var(--clr-secondary-700);
    --secondary-ultra-dark: var(--clr-secondary-900);
    --secondary-trans-10: oklch(from var(--secondary) l c h / 0.1);
    --secondary-trans-20: oklch(from var(--secondary) l c h / 0.2);
    --secondary-trans-30: oklch(from var(--secondary) l c h / 0.3);
    --secondary-trans-40: oklch(from var(--secondary) l c h / 0.4);
    --secondary-trans-50: oklch(from var(--secondary) l c h / 0.5);
    --secondary-trans-60: oklch(from var(--secondary) l c h / 0.6);
    --secondary-trans-70: oklch(from var(--secondary) l c h / 0.7);
    --secondary-trans-80: oklch(from var(--secondary) l c h / 0.8);
    --secondary-trans-90: oklch(from var(--secondary) l c h / 0.9);

    --accent: var(--clr-accent-500);
    --accent-hover: var(--clr-accent-600);
    --accent-ultra-light: var(--clr-accent-50);
    --accent-light: var(--clr-accent-200);
    --accent-dark: var(--clr-accent-700);
    --accent-ultra-dark: var(--clr-accent-900);
    --accent-trans-10: oklch(from var(--accent) l c h / 0.1);
    --accent-trans-20: oklch(from var(--accent) l c h / 0.2);
    --accent-trans-30: oklch(from var(--accent) l c h / 0.3);
    --accent-trans-40: oklch(from var(--accent) l c h / 0.4);
    --accent-trans-50: oklch(from var(--accent) l c h / 0.5);
    --accent-trans-60: oklch(from var(--accent) l c h / 0.6);
    --accent-trans-70: oklch(from var(--accent) l c h / 0.7);
    --accent-trans-80: oklch(from var(--accent) l c h / 0.8);
    --accent-trans-90: oklch(from var(--accent) l c h / 0.9);

    --base: var(--clr-base-500);
    --base-hover: var(--clr-base-600);
    --base-ultra-light: var(--clr-base-50);
    --base-light: var(--clr-base-200);
    --base-dark: var(--clr-base-700);
    --base-ultra-dark: var(--clr-base-900);
    --base-trans-10: oklch(from var(--base) l c h / 0.1);
    --base-trans-20: oklch(from var(--base) l c h / 0.2);
    --base-trans-30: oklch(from var(--base) l c h / 0.3);
    --base-trans-40: oklch(from var(--base) l c h / 0.4);
    --base-trans-50: oklch(from var(--base) l c h / 0.5);
    --base-trans-60: oklch(from var(--base) l c h / 0.6);
    --base-trans-70: oklch(from var(--base) l c h / 0.7);
    --base-trans-80: oklch(from var(--base) l c h / 0.8);
    --base-trans-90: oklch(from var(--base) l c h / 0.9);

    --success: var(--clr-success-500);
    --success-hover: var(--clr-success-600);
    --success-ultra-light: var(--clr-success-50);
    --success-light: var(--clr-success-200);
    --success-dark: var(--clr-success-700);
    --success-ultra-dark: var(--clr-success-900);
    --success-trans-10: oklch(from var(--success) l c h / 0.1);
    --success-trans-20: oklch(from var(--success) l c h / 0.2);
    --success-trans-30: oklch(from var(--success) l c h / 0.3);
    --success-trans-40: oklch(from var(--success) l c h / 0.4);
    --success-trans-50: oklch(from var(--success) l c h / 0.5);
    --success-trans-60: oklch(from var(--success) l c h / 0.6);
    --success-trans-70: oklch(from var(--success) l c h / 0.7);
    --success-trans-80: oklch(from var(--success) l c h / 0.8);
    --success-trans-90: oklch(from var(--success) l c h / 0.9);

    --warning: var(--clr-warning-500);
    --warning-hover: var(--clr-warning-600);
    --warning-ultra-light: var(--clr-warning-50);
    --warning-light: var(--clr-warning-200);
    --warning-dark: var(--clr-warning-700);
    --warning-ultra-dark: var(--clr-warning-900);
    --warning-trans-10: oklch(from var(--warning) l c h / 0.1);
    --warning-trans-20: oklch(from var(--warning) l c h / 0.2);
    --warning-trans-30: oklch(from var(--warning) l c h / 0.3);
    --warning-trans-40: oklch(from var(--warning) l c h / 0.4);
    --warning-trans-50: oklch(from var(--warning) l c h / 0.5);
    --warning-trans-60: oklch(from var(--warning) l c h / 0.6);
    --warning-trans-70: oklch(from var(--warning) l c h / 0.7);
    --warning-trans-80: oklch(from var(--warning) l c h / 0.8);
    --warning-trans-90: oklch(from var(--warning) l c h / 0.9);

    --danger: var(--clr-danger-500);
    --danger-hover: var(--clr-danger-600);
    --danger-ultra-light: var(--clr-danger-50);
    --danger-light: var(--clr-danger-200);
    --danger-dark: var(--clr-danger-700);
    --danger-ultra-dark: var(--clr-danger-900);
    --danger-trans-10: oklch(from var(--danger) l c h / 0.1);
    --danger-trans-20: oklch(from var(--danger) l c h / 0.2);
    --danger-trans-30: oklch(from var(--danger) l c h / 0.3);
    --danger-trans-40: oklch(from var(--danger) l c h / 0.4);
    --danger-trans-50: oklch(from var(--danger) l c h / 0.5);
    --danger-trans-60: oklch(from var(--danger) l c h / 0.6);
    --danger-trans-70: oklch(from var(--danger) l c h / 0.7);
    --danger-trans-80: oklch(from var(--danger) l c h / 0.8);
    --danger-trans-90: oklch(from var(--danger) l c h / 0.9);

    --info: var(--clr-info-500);
    --info-hover: var(--clr-info-600);
    --info-ultra-light: var(--clr-info-50);
    --info-light: var(--clr-info-200);
    --info-dark: var(--clr-info-700);
    --info-ultra-dark: var(--clr-info-900);
    --info-trans-10: oklch(from var(--info) l c h / 0.1);
    --info-trans-20: oklch(from var(--info) l c h / 0.2);
    --info-trans-30: oklch(from var(--info) l c h / 0.3);
    --info-trans-40: oklch(from var(--info) l c h / 0.4);
    --info-trans-50: oklch(from var(--info) l c h / 0.5);
    --info-trans-60: oklch(from var(--info) l c h / 0.6);
    --info-trans-70: oklch(from var(--info) l c h / 0.7);
    --info-trans-80: oklch(from var(--info) l c h / 0.8);
    --info-trans-90: oklch(from var(--info) l c h / 0.9);

    /* surface + text shorthands map onto the neutral 'base' ramp */
    --text: var(--clr-base-900);
    --text-soft: var(--clr-base-700);
    --surface: var(--clr-base-50);
    --surface-raised: oklch(100% 0 0);
    --border: var(--clr-base-200);
    --shade: var(--clr-base-900);

    /* ---- fonts ---- */
    --font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-secondary: 'Montserrat', 'Inter', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
    --line-height: 1.6;
    --line-height-tight: 1.05;

    /* ---- fluid type scale ---- */
    --text-2xs: clamp(0.5787rem, 0.5797rem + -0.0041vw, 0.576rem);
    --text-xs: clamp(0.6944rem, 0.6854rem + 0.0384vw, 0.72rem);
    --text-s: clamp(0.8333rem, 0.8099rem + 0.1002vw, 0.9rem);
    --text-m: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);
    --text-l: clamp(1.2rem, 1.1274rem + 0.3099vw, 1.4063rem);
    --text-xl: clamp(1.44rem, 1.3281rem + 0.4775vw, 1.7578rem);
    --text-2xl: clamp(1.728rem, 1.5628rem + 0.705vw, 2.1973rem);
    --text-3xl: clamp(2.0736rem, 1.8366rem + 1.0111vw, 2.7466rem);

    /* ---- fluid heading scale ---- */
    --h6: clamp(1.22rem, 1.1227rem + 0.415vw, 1.4963rem);
    --h5: clamp(1.4884rem, 1.3118rem + 0.7536vw, 1.99rem);
    --h4: clamp(1.8158rem, 1.5233rem + 1.2483vw, 2.6467rem);
    --h3: clamp(2.2153rem, 1.7559rem + 1.9603vw, 3.5201rem);
    --h2: clamp(2.7027rem, 2.0059rem + 2.9732vw, 4.6818rem);
    --h1: clamp(3.2973rem, 2.2658rem + 4.4011vw, 6.2268rem);

    /* ---- fluid spacing scale ---- */
    --space-3xs: clamp(0.2222rem, 0.2199rem + 0.01vw, 0.2289rem);
    --space-2xs: clamp(0.3333rem, 0.3218rem + 0.0494vw, 0.3662rem);
    --space-xs: clamp(0.5rem, 0.4697rem + 0.1291vw, 0.5859rem);
    --space-s: clamp(0.75rem, 0.684rem + 0.2817vw, 0.9375rem);
    --space-m: clamp(1.125rem, 0.993rem + 0.5634vw, 1.5rem);
    --space-l: clamp(1.6875rem, 1.4366rem + 1.0704vw, 2.4rem);
    --space-xl: clamp(2.5313rem, 2.0704rem + 1.9662vw, 3.84rem);
    --space-2xl: clamp(3.7969rem, 2.9704rem + 3.5262vw, 6.144rem);
    --space-3xl: clamp(5.6953rem, 4.2393rem + 6.2123vw, 9.8304rem);
    --section-space: clamp(3.7969rem, 2.9704rem + 3.5262vw, 6.144rem);

    /* ---- radius ---- */
    --radius-s: 0.5rem;
    --radius-m: 0.875rem;
    --radius-l: 1.5rem;
    --radius-circle: 50%;
    --radius-pill: 100vmax;

    /* ---- widths ---- */
    --width-content: 65ch;
    --width-narrow: 45rem;
    --width-wide: 75rem;
    --width-full: 90rem;
  }
}

@layer tokens {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --text: var(--clr-base-50);
      --text-soft: var(--clr-base-300);
      --surface: var(--clr-base-950);
      --surface-raised: var(--clr-base-900);
      --border: var(--clr-base-800);
    }
  }
  /* Manual override hook: <html data-theme="dark"> or data-theme="light" */
  [data-theme="dark"] {
      --text: var(--clr-base-50);
      --text-soft: var(--clr-base-300);
      --surface: var(--clr-base-950);
      --surface-raised: var(--clr-base-900);
      --border: var(--clr-base-800);
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    min-height: 100svh;
    font-family: var(--font-primary);
    font-size: var(--text-m);
    line-height: var(--line-height);
    color: var(--text);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  a { color: inherit; }
  :target { scroll-margin-block: var(--space-xl); }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  }
}

@layer base {
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    line-height: var(--line-height-tight);
    text-wrap: balance;
    font-weight: 700;
  }
  h1 { font-size: var(--h1); }
  h2 { font-size: var(--h2); }
  h3 { font-size: var(--h3); }
  h4 { font-size: var(--h4); }
  h5 { font-size: var(--h5); }
  h6 { font-size: var(--h6); }
  p { max-width: var(--width-content); text-wrap: pretty; }
  a { color: var(--primary); text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; transition: color 0.15s ease; }
  a:hover { color: var(--primary-hover); }
  code, pre, kbd { font-family: var(--font-mono); }
  hr { border: none; border-top: 1px solid var(--border); margin-block: var(--space-l); }
  :where(:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
}

@layer layout {
  .container { width: min(100% - (var(--space-l) * 2), var(--width-wide)); margin-inline: auto; }
  .container--narrow { --width-wide: var(--width-narrow); }
  .container--full { --width-wide: var(--width-full); }
  .section { padding-block: var(--section-space); }
  .stack > * + * { margin-block-start: var(--flow, var(--space-m)); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--space-s)); align-items: center; }
  .grid-auto { display: grid; gap: var(--gap, var(--space-l)); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 16rem), 100%), 1fr)); }
  .center { display: grid; place-items: center; }
}

@layer components {
  .button {
    display: inline-flex; align-items: center; gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-m);
    background: var(--primary); color: oklch(100% 0 0);
    border: 1px solid transparent; border-radius: var(--radius-m);
    font-weight: 600; line-height: 1.2; cursor: pointer;
    transition: background 0.15s ease;
  }
  .button:hover { background: var(--primary-hover); }
  .button--ghost { background: transparent; color: var(--primary); border-color: var(--border); }
  .button--ghost:hover { background: var(--primary-trans-10); }
  .card {
    background: var(--surface-raised); border: 1px solid var(--border);
    border-radius: var(--radius-l); padding: var(--space-l);
  }
}

@layer utilities {
  .p-0 { padding: 0; }
  .px-0 { padding-inline: 0; }
  .py-0 { padding-block: 0; }
  .m-0 { margin: 0; }
  .my-0 { margin-block: 0; }
  .gap-0 { gap: 0; }
  .p-3xs { padding: var(--space-3xs); }
  .px-3xs { padding-inline: var(--space-3xs); }
  .py-3xs { padding-block: var(--space-3xs); }
  .m-3xs { margin: var(--space-3xs); }
  .my-3xs { margin-block: var(--space-3xs); }
  .gap-3xs { gap: var(--space-3xs); }
  .p-2xs { padding: var(--space-2xs); }
  .px-2xs { padding-inline: var(--space-2xs); }
  .py-2xs { padding-block: var(--space-2xs); }
  .m-2xs { margin: var(--space-2xs); }
  .my-2xs { margin-block: var(--space-2xs); }
  .gap-2xs { gap: var(--space-2xs); }
  .p-xs { padding: var(--space-xs); }
  .px-xs { padding-inline: var(--space-xs); }
  .py-xs { padding-block: var(--space-xs); }
  .m-xs { margin: var(--space-xs); }
  .my-xs { margin-block: var(--space-xs); }
  .gap-xs { gap: var(--space-xs); }
  .p-s { padding: var(--space-s); }
  .px-s { padding-inline: var(--space-s); }
  .py-s { padding-block: var(--space-s); }
  .m-s { margin: var(--space-s); }
  .my-s { margin-block: var(--space-s); }
  .gap-s { gap: var(--space-s); }
  .p-m { padding: var(--space-m); }
  .px-m { padding-inline: var(--space-m); }
  .py-m { padding-block: var(--space-m); }
  .m-m { margin: var(--space-m); }
  .my-m { margin-block: var(--space-m); }
  .gap-m { gap: var(--space-m); }
  .p-l { padding: var(--space-l); }
  .px-l { padding-inline: var(--space-l); }
  .py-l { padding-block: var(--space-l); }
  .m-l { margin: var(--space-l); }
  .my-l { margin-block: var(--space-l); }
  .gap-l { gap: var(--space-l); }
  .p-xl { padding: var(--space-xl); }
  .px-xl { padding-inline: var(--space-xl); }
  .py-xl { padding-block: var(--space-xl); }
  .m-xl { margin: var(--space-xl); }
  .my-xl { margin-block: var(--space-xl); }
  .gap-xl { gap: var(--space-xl); }
  .p-2xl { padding: var(--space-2xl); }
  .px-2xl { padding-inline: var(--space-2xl); }
  .py-2xl { padding-block: var(--space-2xl); }
  .m-2xl { margin: var(--space-2xl); }
  .my-2xl { margin-block: var(--space-2xl); }
  .gap-2xl { gap: var(--space-2xl); }
  .p-3xl { padding: var(--space-3xl); }
  .px-3xl { padding-inline: var(--space-3xl); }
  .py-3xl { padding-block: var(--space-3xl); }
  .m-3xl { margin: var(--space-3xl); }
  .my-3xl { margin-block: var(--space-3xl); }
  .gap-3xl { gap: var(--space-3xl); }
  .text-2xs { font-size: var(--text-2xs); }
  .text-xs { font-size: var(--text-xs); }
  .text-s { font-size: var(--text-s); }
  .text-m { font-size: var(--text-m); }
  .text-l { font-size: var(--text-l); }
  .text-xl { font-size: var(--text-xl); }
  .text-2xl { font-size: var(--text-2xl); }
  .text-3xl { font-size: var(--text-3xl); }
  .color-primary { color: var(--primary); }
  .bg-primary { background-color: var(--primary); }
  .color-secondary { color: var(--secondary); }
  .bg-secondary { background-color: var(--secondary); }
  .color-accent { color: var(--accent); }
  .bg-accent { background-color: var(--accent); }
  .color-base { color: var(--base); }
  .bg-base { background-color: var(--base); }
  .color-success { color: var(--success); }
  .bg-success { background-color: var(--success); }
  .color-warning { color: var(--warning); }
  .bg-warning { background-color: var(--warning); }
  .color-danger { color: var(--danger); }
  .bg-danger { background-color: var(--danger); }
  .color-info { color: var(--info); }
  .bg-info { background-color: var(--info); }
  .color-text { color: var(--text); }
  .bg-surface { background-color: var(--surface); }
  .radius-s { border-radius: var(--radius-s); }
  .radius-m { border-radius: var(--radius-m); }
  .radius-l { border-radius: var(--radius-l); }
  .text-center { text-align: center; }
  .flow-tight { --flow: var(--space-s); }
  .flow-loose { --flow: var(--space-xl); }
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
}

@layer custom {
  /* Your project-specific overrides live here, or in a separate file. */
}