/* Areola. Подключать ПОСЛЕ design-system.css. Тёмная тема по умолчанию. */
:root:root, :root:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #0C0B0B;
  --surface-1: #151313;
  --surface-2: #201C1B;
  --surface-3: #292321;
  --surface-4: #080808;
  --surface-inverse: #F7F2EE;
  --border-subtle: #302A28;
  --border: #5E514C;
  --border-strong: #99857C;
  --text-1: #F7F2EE;
  --text-2: #C8BDB7;
  --text-3: #B9AAA1;
  --text-4: #B9AAA1;
  --text-inverse: #211A17;
  --fill-hover: rgba(255,255,255,.06);
  --fill-active: rgba(255,255,255,.1);
  --fill-selected: rgba(255,150,127,.13);
  --fill-track: #51443E;
  --accent: #FF967F;
  --accent-hover: #FFAD9A;
  --accent-active: #F2836B;
  --accent-on: #211A17;
  --accent-bg: #35221D;
  --accent-border: #A36D5C;
  --accent-fg: #FFAD9A;
  --success: #9DCEAD;
  --success-hover: #9DCEAD;
  --success-active: #9DCEAD;
  --success-on: #211A17;
  --success-bg: #192C20;
  --success-border: #73A882;
  --success-fg: #9DCEAD;
  --danger: #FFA59D;
  --danger-hover: #FFA59D;
  --danger-active: #FFA59D;
  --danger-on: #211A17;
  --danger-bg: #361D1C;
  --danger-border: #B97870;
  --danger-fg: #FFA59D;
  --warning: #EDC078;
  --warning-hover: #EDC078;
  --warning-active: #EDC078;
  --warning-on: #211A17;
  --warning-bg: #322613;
  --warning-border: #AE8140;
  --warning-fg: #EDC078;
  --info: #AAC7DE;
  --info-hover: #AAC7DE;
  --info-active: #AAC7DE;
  --info-on: #211A17;
  --info-bg: #1B2833;
  --info-border: #7798B2;
  --info-fg: #AAC7DE;
  --focus-ring: #FFC357;
  --scrim: rgba(0,0,0,.7);
  --skeleton-base: #302A28;
  --skeleton-sheen: #453B37;
  --link: #FFAD9A;
  --link-hover: #FFC1B3;
  --shadow-1: 0 1px 2px rgba(16, 20, 26, 0.06), 0 1px 1px rgba(16, 20, 26, 0.04);
  --shadow-2: 0 2px 4px -1px rgba(16, 20, 26, 0.07), 0 6px 14px -4px rgba(16, 20, 26, 0.08);
  --shadow-3: 0 4px 10px -3px rgba(16, 20, 26, 0.10), 0 16px 32px -10px rgba(16, 20, 26, 0.14);
  --shadow-4: 0 8px 20px -6px rgba(16, 20, 26, 0.14), 0 32px 64px -20px rgba(16, 20, 26, 0.22);
  --font-sans: "Onest", "Segoe UI", sans-serif;
  --font-mono: Consolas, monospace;
  --fs-12: 0.75rem;
  --lh-12: 1.3333;
  --tr-12: 0.01em;
  --fs-13: 0.8125rem;
  --lh-13: 1.3846;
  --tr-13: 0.005em;
  --fs-14: 0.875rem;
  --lh-14: 1.4286;
  --tr-14: 0em;
  --fs-16: 1rem;
  --lh-16: 1.5;
  --tr-16: -0.005em;
  --fs-20: 1.25rem;
  --lh-20: 1.4;
  --tr-20: -0.01em;
  --fs-24: 1.5rem;
  --lh-24: 1.3333;
  --tr-24: -0.015em;
  --fs-32: 2rem;
  --lh-32: 1.25;
  --tr-32: -0.02em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --sp-0: 0;
  --sp-05: 2px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;
  --focus-w: 2px;
  --focus-offset: 2px;
  --control-h-sm: 28px;
  --control-h-md: 44px;
  --control-h-lg: 48px;
  --row-h: 44px;
  --target-min: 44px;
  --container-max: 1440px;
  --container-narrow: 760px;
  --sidebar-w: 264px;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;
  --z-tooltip: 700;
  --dur-1: 90ms;
  --dur-2: 140ms;
  --dur-3: 220ms;
  --dur-4: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1600px;
  --brand-pink: #F88FB5;
  --brand-coral: #FF7465;
  --brand-orange: #FF9D2D;
  --brand-yellow: #FFC139;
  --brand-black: #080808;
  --brand-gradient: linear-gradient(120deg, #F88FB5, #FF7465 55%, #FFC139);
  --font-display: "Tenor Sans", "Onest", sans-serif;
}
:root:root[data-theme="light"] {
  color-scheme: light;
  --surface-0: #F7F2EE;
  --surface-1: #FFFCFA;
  --surface-2: #EFE5DE;
  --surface-3: #FFFCFA;
  --surface-4: #E8DCD3;
  --surface-inverse: #211A17;
  --border-subtle: #D8C9BE;
  --border: #978174;
  --border-strong: #766052;
  --text-1: #211A17;
  --text-2: #57473E;
  --text-3: #6B5548;
  --text-4: #6B5548;
  --text-inverse: #F7F2EE;
  --accent: #9B3D2B;
  --accent-hover: #863222;
  --accent-active: #70281B;
  --accent-on: #FFFFFF;
  --accent-bg: #F5E2DA;
  --accent-border: #AC6F5B;
  --accent-fg: #883323;
  --focus-ring: #883323;
  --link: #883323;
  --link-hover: #70281B;
  --fill-hover: rgba(33,26,23,.05);
  --fill-active: rgba(33,26,23,.09);
  --fill-selected: rgba(155,61,43,.1);
  --fill-track: #CBB8AA;
  --scrim: rgba(33,26,23,.5);
  --skeleton-base: #D8C9BE;
  --skeleton-sheen: #EFE5DE;
  --success: #2B6440;
  --success-hover: #2B6440;
  --success-active: #2B6440;
  --success-on: #FFFFFF;
  --success-bg: #E4F0E7;
  --success-border: #2B6440;
  --success-fg: #2B6440;
  --warning: #76500E;
  --warning-hover: #76500E;
  --warning-active: #76500E;
  --warning-on: #FFFFFF;
  --warning-bg: #FAEDD4;
  --warning-border: #76500E;
  --warning-fg: #76500E;
  --danger: #A13730;
  --danger-hover: #A13730;
  --danger-active: #A13730;
  --danger-on: #FFFFFF;
  --danger-bg: #FAE6E1;
  --danger-border: #A13730;
  --danger-fg: #A13730;
  --info: #345D7B;
  --info-hover: #345D7B;
  --info-active: #345D7B;
  --info-on: #FFFFFF;
  --info-bg: #E4EDF4;
  --info-border: #345D7B;
  --info-fg: #345D7B;
}