/* Design tokens. GENERATED from design-tokens.json by scripts/build-tokens.mjs. Do not edit. */

/* === PRIMITIVE (raw values; never use directly in components) === */
:root {
  --primitive-color-white: #FFFFFF;
  --primitive-color-neutral-50: #F2F4F3;
  --primitive-color-neutral-100: #E8EBE9;
  --primitive-color-neutral-200: #D6DAD7;
  --primitive-color-neutral-400: #A9B1AD;
  --primitive-color-neutral-500: #808A86;
  --primitive-color-neutral-600: #6D7773;
  --primitive-color-neutral-700: #4A5256;
  --primitive-color-neutral-800: #343C40;
  --primitive-color-neutral-850: #252C30;
  --primitive-color-neutral-900: #1F2426;
  --primitive-color-neutral-925: #1B2124;
  --primitive-color-neutral-950: #121618;
  --primitive-color-green-50: #E6F3EE;
  --primitive-color-green-300: #6FD3B0;
  --primitive-color-green-500: #007D5C;
  --primitive-color-green-550: #008561;
  --primitive-color-green-600: #00694E;
  --primitive-color-green-700: #00523D;
  --primitive-color-green-800: #003D2D;
  --primitive-color-green-950: #0F2A22;
  --primitive-color-amber-100: #FFF3C4;
  --primitive-color-amber-300: #F6CF57;
  --primitive-color-amber-400: #F2B705;
  --primitive-color-amber-700: #6B4F00;
  --primitive-color-amber-900: #3A2C00;
  --primitive-color-amber-950: #3A2F0A;
  --primitive-color-red-50: #FDECEA;
  --primitive-color-red-300: #FFB4AB;
  --primitive-color-red-600: #B3261E;
  --primitive-color-red-950: #4A1B17;
  --primitive-color-blue-300: #8AB8FF;
  --primitive-color-blue-600: #0A58CA;
  --primitive-space-0: 0;
  --primitive-space-1: 0.25rem;
  --primitive-space-2: 0.5rem;
  --primitive-space-3: 0.75rem;
  --primitive-space-4: 1rem;
  --primitive-space-5: 1.25rem;
  --primitive-space-6: 1.5rem;
  --primitive-space-8: 2rem;
  --primitive-space-10: 2.5rem;
  --primitive-space-12: 3rem;
  --primitive-space-16: 4rem;
  --primitive-font-family: "Overpass", "Highway Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --primitive-font-size-xs: 0.8125rem;
  --primitive-font-size-sm: 0.9375rem;
  --primitive-font-size-base: 1.0625rem;
  --primitive-font-size-lg: 1.25rem;
  --primitive-font-size-xl: 1.5rem;
  --primitive-font-size-2xl: 1.875rem;
  --primitive-font-size-3xl: 2.5rem;
  --primitive-font-weight-regular: 400;
  --primitive-font-weight-label: 600;
  --primitive-font-weight-bold: 700;
  --primitive-font-weight-black: 800;
  --primitive-font-leading-tight: 1.1;
  --primitive-font-leading-snug: 1.25;
  --primitive-font-leading-normal: 1.5;
  --primitive-radius-sm: 0.375rem;
  --primitive-radius-md: 0.625rem;
  --primitive-radius-lg: 0.875rem;
  --primitive-radius-xl: 1.25rem;
  --primitive-radius-full: 9999px;
  --primitive-shadow-none: none;
  --primitive-shadow-sm: 0 1px 2px rgb(18 22 24 / 0.08);
  --primitive-shadow-md: 0 4px 12px rgb(18 22 24 / 0.10);
  --primitive-shadow-bar: 0 -4px 16px rgb(18 22 24 / 0.12);
  --primitive-duration-press: 100ms;
  --primitive-duration-fast: 150ms;
  --primitive-duration-normal: 220ms;
  --primitive-duration-slow: 320ms;
  --primitive-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --primitive-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --primitive-size-touch: 2.75rem;
  --primitive-size-control: 3rem;
  --primitive-size-control-lg: 3.5rem;
  --primitive-size-icon: 1.25rem;
  --primitive-size-icon-lg: 1.5rem;
  --primitive-layer-bar: 20;
  --primitive-layer-appbar: 30;
}

/* === SEMANTIC (purpose aliases; themeable) === */
:root {
  color-scheme: light dark;
  --color-background: var(--primitive-color-neutral-50);
  --color-surface: var(--primitive-color-white);
  --color-surface-sunken: var(--primitive-color-neutral-100);
  --color-foreground: var(--primitive-color-neutral-900);
  --color-foreground-muted: var(--primitive-color-neutral-700);
  --color-border: var(--primitive-color-neutral-200);
  --color-border-strong: var(--primitive-color-neutral-600);
  --color-primary: var(--primitive-color-green-600);
  --color-primary-hover: var(--primitive-color-green-700);
  --color-primary-active: var(--primitive-color-green-800);
  --color-primary-foreground: var(--primitive-color-white);
  --color-primary-text: var(--primitive-color-green-600);
  --color-primary-subtle: var(--primitive-color-green-50);
  --color-caution: var(--primitive-color-amber-400);
  --color-caution-foreground: var(--primitive-color-amber-900);
  --color-caution-subtle: var(--primitive-color-amber-100);
  --color-caution-text: var(--primitive-color-amber-700);
  --color-danger-text: var(--primitive-color-red-600);
  --color-danger-subtle: var(--primitive-color-red-50);
  --color-focus-ring: var(--primitive-color-blue-600);
  --color-sign-background: var(--primitive-color-green-600);
  --color-sign-foreground: var(--primitive-color-white);
  --color-status-paid-bg: var(--color-primary);
  --color-status-paid-fg: var(--color-primary-foreground);
  --color-status-prepaid-fg: var(--color-primary-text);
  --color-status-unpaid-bg: var(--color-caution);
  --color-status-unpaid-fg: var(--color-caution-foreground);
  --color-status-quiet-fg: var(--color-foreground-muted);
  --space-inset: var(--primitive-space-4);
  --space-stack: var(--primitive-space-6);
  --space-section: var(--primitive-space-10);
  --layout-content-max: 44rem;
  --layout-wide-max: 64rem;
  --layout-gutter: var(--primitive-space-4);
  --layout-gutter-md: var(--primitive-space-6);
  --layout-gutter-lg: var(--primitive-space-8);
  --type-display: clamp(2rem, 8.2vw, 3.75rem);
  --type-money: clamp(2.75rem, 12vw, 4rem);
}

/* === COMPONENT (per-component knobs; reference semantic tokens) === */
:root {
  --button-height: var(--primitive-size-control);
  --button-height-lg: var(--primitive-size-control-lg);
  --button-padding-x: var(--primitive-space-5);
  --button-radius: var(--primitive-radius-md);
  --button-weight: var(--primitive-font-weight-bold);
  --button-bg: var(--color-primary);
  --button-fg: var(--color-primary-foreground);
  --button-hover-bg: var(--color-primary-hover);
  --button-active-bg: var(--color-primary-active);
  --button-quiet-border: var(--color-border-strong);
  --button-quiet-hover-bg: var(--color-surface-sunken);
  --field-height: var(--primitive-size-control-lg);
  --field-radius: var(--primitive-radius-md);
  --field-bg: var(--color-surface);
  --field-fg: var(--color-foreground);
  --field-border: var(--color-border-strong);
  --panel-bg: var(--color-surface);
  --panel-border: var(--color-border);
  --panel-radius: var(--primitive-radius-xl);
  --panel-padding: var(--primitive-space-5);
  --panel-padding-lg: var(--primitive-space-8);
  --panel-shadow: var(--primitive-shadow-sm);
  --panel-accent: var(--color-primary);
  --chip-height: var(--primitive-size-touch);
  --chip-padding-x: var(--primitive-space-4);
  --chip-radius: var(--primitive-radius-full);
  --pill-padding-x: var(--primitive-space-3);
  --pill-padding-y: var(--primitive-space-1);
  --pill-radius: var(--primitive-radius-full);
  --month-min-height: 4.25rem;
  --month-radius: var(--primitive-radius-md);
  --month-gap: var(--primitive-space-2);
  --sign-bg: var(--color-sign-background);
  --sign-fg: var(--color-sign-foreground);
  --sign-radius: var(--primitive-radius-lg);
  --sign-rim: 0.1875rem;
  --bar-bg: var(--color-surface);
  --bar-border: var(--color-border);
  --bar-shadow: var(--primitive-shadow-bar);
  --bar-padding: var(--primitive-space-3);
  --appbar-height: 3.5rem;
  --appbar-bg: var(--color-background);
  --appbar-border: var(--color-border);
  --row-min-height: var(--primitive-size-control-lg);
}

/* === DARK THEME (system preference; semantic overrides only) === */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--primitive-color-neutral-950);
    --color-surface: var(--primitive-color-neutral-925);
    --color-surface-sunken: var(--primitive-color-neutral-850);
    --color-foreground: var(--primitive-color-neutral-100);
    --color-foreground-muted: var(--primitive-color-neutral-400);
    --color-border: var(--primitive-color-neutral-800);
    --color-border-strong: var(--primitive-color-neutral-500);
    --color-primary: var(--primitive-color-green-500);
    --color-primary-hover: var(--primitive-color-green-550);
    --color-primary-active: var(--primitive-color-green-600);
    --color-primary-text: var(--primitive-color-green-300);
    --color-primary-subtle: var(--primitive-color-green-950);
    --color-caution-subtle: var(--primitive-color-amber-950);
    --color-caution-text: var(--primitive-color-amber-300);
    --color-danger-text: var(--primitive-color-red-300);
    --color-danger-subtle: var(--primitive-color-red-950);
    --color-focus-ring: var(--primitive-color-blue-300);
  }
}