/* Собрано из systems/sandbox/tokens скриптом scripts/build-css.mjs. Руками не править. */

:root {
  --color-white: #FFFFFF;
  --color-gray-50: #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-150: #E9EEF4;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-750: #273449;
  --color-gray-800: #1E293B;
  --color-gray-850: #162032;
  --color-gray-900: #0F172A;
  --color-red-50: #FEF2F2;
  --color-red-400: #F87171;
  --color-red-700: #B91C1C;
  --color-red-950: #450A0A;
  --color-green-50: #F0FDF4;
  --color-green-400: #4ADE80;
  --color-green-700: #15803D;
  --color-green-950: #052E16;
  --color-amber-50: #FFFBEB;
  --color-amber-400: #FBBF24;
  --color-amber-700: #B45309;
  --color-amber-950: #451A03;
  --color-sky-50: #F0F9FF;
  --color-sky-400: #38BDF8;
  --color-sky-700: #0369A1;
  --color-sky-950: #082F49;
  --space-0: 0px;
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;
  --size-16: 16px;
  --size-20: 20px;
  --size-24: 24px;
  --size-32: 32px;
  --size-40: 40px;
  --size-48: 48px;
  --size-56: 56px;
  --font-line-height-heading: 1.2;
  --font-line-height-body: 1.5;
  --shadow-sm-offset-y: 1px;
  --shadow-sm-blur: 2px;
  --shadow-sm-spread: 0px;
  --shadow-md-offset-y: 4px;
  --shadow-md-blur: 12px;
  --shadow-md-spread: -2px;
  --shadow-lg-offset-y: 12px;
  --shadow-lg-blur: 24px;
  --shadow-lg-spread: -4px;
  --shadow-xl-offset-y: 24px;
  --shadow-xl-blur: 48px;
  --shadow-xl-spread: -8px;
  --opacity-disabled: 0.4;
  --border-width-default: 1px;
  --border-width-strong: 2px;
  --focus-width: 2px;
  --duration-base: 200ms;
  --easing-standard: cubic-bezier(0, 0, 0.58, 1);
}

:root {
  --brand-primary-light: #2563EB;
  --brand-primary-dark: #60A5FA;
  --brand-accent-light: #1D4ED8;
  --brand-accent-dark: #93C5FD;
  --brand-bg-light: #EFF6FF;
  --brand-bg-dark: #0C1A36;
  --brand-bg-strong-light: #DBEAFE;
  --brand-bg-strong-dark: #13284F;
}

:root {
  --shadow-sm: 0 var(--shadow-sm-offset-y) var(--shadow-sm-blur) var(--shadow-sm-spread) var(--color-shadow);
  --shadow-md: 0 var(--shadow-md-offset-y) var(--shadow-md-blur) var(--shadow-md-spread) var(--color-shadow);
  --shadow-lg: 0 var(--shadow-lg-offset-y) var(--shadow-lg-blur) var(--shadow-lg-spread) var(--color-shadow);
  --shadow-xl: 0 var(--shadow-xl-offset-y) var(--shadow-xl-blur) var(--shadow-xl-spread) var(--color-shadow);
}

:root, [data-theme="light"] {
  --color-bg-default: var(--color-white);
  --color-bg-subtle: var(--color-gray-50);
  --color-bg-muted: var(--color-gray-100);
  --color-bg-strong: var(--color-gray-150);
  --color-bg-inverse: var(--color-gray-900);
  --color-bg-brand: var(--brand-bg-light);
  --color-bg-brand-strong: var(--brand-bg-strong-light);
  --color-bg-primary: var(--brand-primary-light);
  --color-bg-accent: var(--brand-accent-light);
  --color-bg-success: var(--color-green-50);
  --color-bg-warning: var(--color-amber-50);
  --color-bg-error: var(--color-red-50);
  --color-bg-info: var(--color-sky-50);
  --color-text-default: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-disabled: var(--color-gray-400);
  --color-text-primary: var(--brand-primary-light);
  --color-text-accent: var(--brand-accent-light);
  --color-text-on-primary: var(--color-white);
  --color-text-on-accent: var(--color-white);
  --color-text-on-inverse: var(--color-white);
  --color-text-success: var(--color-green-700);
  --color-text-warning: var(--color-amber-700);
  --color-text-error: var(--color-red-700);
  --color-text-info: var(--color-sky-700);
  --color-border-subtle: var(--color-gray-100);
  --color-border-default: var(--color-gray-200);
  --color-border-strong: var(--color-gray-500);
  --color-border-brand: var(--brand-bg-strong-light);
  --color-border-primary: var(--brand-primary-light);
  --color-border-success: var(--color-green-700);
  --color-border-warning: var(--color-amber-700);
  --color-border-error: var(--color-red-700);
  --color-border-info: var(--color-sky-700);
  --color-icon-default: var(--color-gray-700);
  --color-icon-secondary: var(--color-gray-500);
  --color-icon-primary: var(--brand-primary-light);
  --color-focus-ring: var(--brand-primary-light);
  --color-shadow: #0F172A1F;
  --color-overlay: #0F172A80;
}

[data-theme="dark"] {
  --color-bg-default: var(--color-gray-900);
  --color-bg-subtle: var(--color-gray-850);
  --color-bg-muted: var(--color-gray-800);
  --color-bg-strong: var(--color-gray-750);
  --color-bg-inverse: var(--color-gray-50);
  --color-bg-brand: var(--brand-bg-dark);
  --color-bg-brand-strong: var(--brand-bg-strong-dark);
  --color-bg-primary: var(--brand-primary-dark);
  --color-bg-accent: var(--brand-accent-dark);
  --color-bg-success: var(--color-green-950);
  --color-bg-warning: var(--color-amber-950);
  --color-bg-error: var(--color-red-950);
  --color-bg-info: var(--color-sky-950);
  --color-text-default: var(--color-gray-50);
  --color-text-secondary: var(--color-gray-300);
  --color-text-disabled: var(--color-gray-600);
  --color-text-primary: var(--brand-primary-dark);
  --color-text-accent: var(--brand-accent-dark);
  --color-text-on-primary: var(--color-gray-900);
  --color-text-on-accent: var(--color-gray-900);
  --color-text-on-inverse: var(--color-gray-900);
  --color-text-success: var(--color-green-400);
  --color-text-warning: var(--color-amber-400);
  --color-text-error: var(--color-red-400);
  --color-text-info: var(--color-sky-400);
  --color-border-subtle: var(--color-gray-800);
  --color-border-default: var(--color-gray-700);
  --color-border-strong: var(--color-gray-400);
  --color-border-brand: var(--brand-bg-strong-dark);
  --color-border-primary: var(--brand-primary-dark);
  --color-border-success: var(--color-green-400);
  --color-border-warning: var(--color-amber-400);
  --color-border-error: var(--color-red-400);
  --color-border-info: var(--color-sky-400);
  --color-icon-default: var(--color-gray-300);
  --color-icon-secondary: var(--color-gray-400);
  --color-icon-primary: var(--brand-primary-dark);
  --color-focus-ring: var(--brand-primary-dark);
  --color-shadow: #00000080;
  --color-overlay: #000000B3;
}

:root, [data-layout="desktop"] {
  --grid-viewport: 1600px;
  --grid-margin-x: 32px;
  --grid-margin-y: var(--space-128);
  --grid-container: 1536px;
  --grid-gutter: 24px;
  --grid-columns: 12;
  --grid-column-2: 756px;
  --grid-column-3: 496px;
  --grid-column-4: 366px;
  --grid-column-5: 288px;
  --grid-column-6: 236px;
  --grid-column-12: 106px;
  --grid-column-base: var(--grid-column-12);
  --size-control-sm: var(--size-32);
  --size-control-md: var(--size-40);
  --size-control-lg: var(--size-48);
  --size-control-xl: var(--size-56);
  --size-icon-sm: var(--size-16);
  --size-icon-md: var(--size-20);
  --size-icon-lg: var(--size-24);
  --size-icon-xl: var(--size-32);
  --font-size-h1: 64px;
  --font-size-h2: 48px;
  --font-size-h3: 40px;
  --font-size-h4: 32px;
  --font-size-h5: 24px;
  --font-size-h6: 20px;
  --font-size-body-lg: 20px;
  --font-size-body-lead: 18px;
  --font-size-body-md: 16px;
  --font-size-body-sm: 14px;
  --font-size-body-xs: 12px;
}

[data-layout="tablet"] {
  --grid-viewport: 768px;
  --grid-margin-x: 32px;
  --grid-margin-y: var(--space-96);
  --grid-container: 704px;
  --grid-gutter: 16px;
  --grid-columns: 6;
  --grid-column-2: 344px;
  --grid-column-3: 224px;
  --grid-column-4: 164px;
  --grid-column-5: 128px;
  --grid-column-6: 104px;
  --grid-column-12: 44px;
  --grid-column-base: var(--grid-column-6);
  --size-control-sm: var(--size-32);
  --size-control-md: var(--size-40);
  --size-control-lg: var(--size-48);
  --size-control-xl: var(--size-56);
  --size-icon-sm: var(--size-16);
  --size-icon-md: var(--size-20);
  --size-icon-lg: var(--size-24);
  --size-icon-xl: var(--size-32);
  --font-size-h1: 64px;
  --font-size-h2: 48px;
  --font-size-h3: 40px;
  --font-size-h4: 32px;
  --font-size-h5: 24px;
  --font-size-h6: 20px;
  --font-size-body-lg: 20px;
  --font-size-body-lead: 18px;
  --font-size-body-md: 16px;
  --font-size-body-sm: 14px;
  --font-size-body-xs: 12px;
}

[data-layout="mobile"] {
  --grid-viewport: 376px;
  --grid-margin-x: 16px;
  --grid-margin-y: var(--space-64);
  --grid-container: 344px;
  --grid-gutter: 16px;
  --grid-columns: 2;
  --grid-column-2: 164px;
  --grid-column-3: 104px;
  --grid-column-4: 74px;
  --grid-column-5: 56px;
  --grid-column-6: 44px;
  --grid-column-12: 14px;
  --grid-column-base: var(--grid-column-2);
  --size-control-sm: var(--size-32);
  --size-control-md: var(--size-40);
  --size-control-lg: var(--size-48);
  --size-control-xl: var(--size-56);
  --size-icon-sm: var(--size-16);
  --size-icon-md: var(--size-20);
  --size-icon-lg: var(--size-24);
  --size-icon-xl: var(--size-32);
  --font-size-h1: 40px;
  --font-size-h2: 32px;
  --font-size-h3: 28px;
  --font-size-h4: 24px;
  --font-size-h5: 20px;
  --font-size-h6: 18px;
  --font-size-body-lg: 18px;
  --font-size-body-lead: 16px;
  --font-size-body-md: 16px;
  --font-size-body-sm: 14px;
  --font-size-body-xs: 12px;
}

@media (max-width: 1279px) {
  :root:not([data-layout]) {
    --grid-viewport: 768px;
    --grid-margin-x: 32px;
    --grid-margin-y: var(--space-96);
    --grid-container: 704px;
    --grid-gutter: 16px;
    --grid-columns: 6;
    --grid-column-2: 344px;
    --grid-column-3: 224px;
    --grid-column-4: 164px;
    --grid-column-5: 128px;
    --grid-column-6: 104px;
    --grid-column-12: 44px;
    --grid-column-base: var(--grid-column-6);
    --size-control-sm: var(--size-32);
    --size-control-md: var(--size-40);
    --size-control-lg: var(--size-48);
    --size-control-xl: var(--size-56);
    --size-icon-sm: var(--size-16);
    --size-icon-md: var(--size-20);
    --size-icon-lg: var(--size-24);
    --size-icon-xl: var(--size-32);
    --font-size-h1: 64px;
    --font-size-h2: 48px;
    --font-size-h3: 40px;
    --font-size-h4: 32px;
    --font-size-h5: 24px;
    --font-size-h6: 20px;
    --font-size-body-lg: 20px;
    --font-size-body-lead: 18px;
    --font-size-body-md: 16px;
    --font-size-body-sm: 14px;
    --font-size-body-xs: 12px;
  }
}

@media (max-width: 767px) {
  :root:not([data-layout]) {
    --grid-viewport: 376px;
    --grid-margin-x: 16px;
    --grid-margin-y: var(--space-64);
    --grid-container: 344px;
    --grid-gutter: 16px;
    --grid-columns: 2;
    --grid-column-2: 164px;
    --grid-column-3: 104px;
    --grid-column-4: 74px;
    --grid-column-5: 56px;
    --grid-column-6: 44px;
    --grid-column-12: 14px;
    --grid-column-base: var(--grid-column-2);
    --size-control-sm: var(--size-32);
    --size-control-md: var(--size-40);
    --size-control-lg: var(--size-48);
    --size-control-xl: var(--size-56);
    --size-icon-sm: var(--size-16);
    --size-icon-md: var(--size-20);
    --size-icon-lg: var(--size-24);
    --size-icon-xl: var(--size-32);
    --font-size-h1: 40px;
    --font-size-h2: 32px;
    --font-size-h3: 28px;
    --font-size-h4: 24px;
    --font-size-h5: 20px;
    --font-size-h6: 18px;
    --font-size-body-lg: 18px;
    --font-size-body-lead: 16px;
    --font-size-body-md: 16px;
    --font-size-body-sm: 14px;
    --font-size-body-xs: 12px;
  }
}

[data-radius="large"] {
  --radius-button: 16px;
  --radius-block: 24px;
  --radius-container: 32px;
}

:root, [data-radius="medium"] {
  --radius-button: 8px;
  --radius-block: 16px;
  --radius-container: 24px;
}

[data-radius="none"] {
  --radius-button: 0px;
  --radius-block: 0px;
  --radius-container: 0px;
}

[data-radius="round"] {
  --radius-button: 24px;
  --radius-block: 32px;
  --radius-container: 40px;
}

[data-radius="small"] {
  --radius-button: 4px;
  --radius-block: 8px;
  --radius-container: 12px;
}

:root, [data-typography="anton-inter"] {
  --font-family-heading: "Anton";
  --font-family-body: "Inter";
  --font-weight-heading: 400;
  --font-weight-body: 400;
  --font-weight-body-strong: 700;
}

[data-typography="inter"] {
  --font-family-heading: "Inter";
  --font-family-body: "Inter";
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --font-weight-body-strong: 700;
}

[data-typography="montserrat-open-sans"] {
  --font-family-heading: "Montserrat";
  --font-family-body: "Open Sans";
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --font-weight-body-strong: 700;
}

[data-typography="pt-sans"] {
  --font-family-heading: "PT Sans";
  --font-family-body: "PT Sans";
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --font-weight-body-strong: 700;
}

:root {
  --button-primary-bg-default: var(--color-bg-primary);
  --button-primary-bg-hover: var(--color-bg-accent);
  --button-primary-bg-pressed: var(--color-bg-accent);
  --button-primary-bg-focus: var(--color-bg-primary);
  --button-primary-bg-disabled: var(--color-bg-muted);
  --button-primary-text-default: var(--color-text-on-primary);
  --button-primary-text-hover: var(--color-text-on-accent);
  --button-primary-text-pressed: var(--color-text-on-accent);
  --button-primary-text-focus: var(--color-text-on-primary);
  --button-primary-text-disabled: var(--color-text-disabled);
  --button-secondary-bg-default: var(--color-bg-default);
  --button-secondary-bg-hover: var(--color-bg-subtle);
  --button-secondary-bg-pressed: var(--color-bg-muted);
  --button-secondary-bg-focus: var(--color-bg-default);
  --button-secondary-bg-disabled: var(--color-bg-muted);
  --button-secondary-text-default: var(--color-text-default);
  --button-secondary-text-hover: var(--color-text-default);
  --button-secondary-text-pressed: var(--color-text-default);
  --button-secondary-text-focus: var(--color-text-default);
  --button-secondary-text-disabled: var(--color-text-disabled);
  --button-secondary-border-default: var(--color-border-strong);
  --button-ghost-bg-hover: var(--color-bg-brand);
  --button-ghost-bg-pressed: var(--color-bg-brand-strong);
  --button-ghost-text-default: var(--color-text-primary);
  --button-ghost-text-hover: var(--color-text-primary);
  --button-ghost-text-pressed: var(--color-text-accent);
  --button-ghost-text-focus: var(--color-text-primary);
  --button-ghost-text-disabled: var(--color-text-disabled);
  --button-soft-bg-default: var(--color-bg-brand);
  --button-soft-bg-hover: var(--color-bg-brand-strong);
  --button-soft-bg-pressed: var(--color-bg-brand-strong);
  --button-soft-bg-focus: var(--color-bg-brand);
  --button-soft-bg-disabled: var(--color-bg-muted);
  --button-soft-text-default: var(--color-text-primary);
  --button-soft-text-hover: var(--color-text-accent);
  --button-soft-text-pressed: var(--color-text-accent);
  --button-soft-text-focus: var(--color-text-primary);
  --button-soft-text-disabled: var(--color-text-disabled);
  --button-soft-border-default: var(--color-border-brand);
  --button-size-sm-height: var(--size-control-sm);
  --button-size-sm-padding-x: var(--space-16);
  --button-size-sm-icon: var(--size-icon-sm);
  --button-size-md-height: var(--size-control-md);
  --button-size-md-padding-x: var(--space-24);
  --button-size-md-icon: var(--size-icon-md);
  --button-size-lg-height: var(--size-control-lg);
  --button-size-lg-padding-x: var(--space-32);
  --button-size-lg-icon: var(--size-icon-md);
  --button-size-xl-height: var(--size-control-xl);
  --button-size-xl-padding-x: var(--space-40);
  --button-size-xl-icon: var(--size-icon-lg);
  --button-gap: var(--space-8);
  --button-radius: var(--radius-button);
  --button-border-width: var(--border-width-default);
  --button-focus-ring: var(--color-focus-ring);
  --button-focus-width: var(--focus-width);
}