/* ОптЛист — единственный источник цветов, размеров и времени. Страницы берут значения только отсюда. */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-cyrillic-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  /* примитивы */
  --paper-50: #fbfaf7; --paper-100: #f6f4ef; --paper-200: #efebe3; --paper-300: #e2ddd2; --paper-400: #cdc6b8;
  --ink-900: #1c1a16; --ink-700: #4f4a42; --ink-600: #645e54;
  --persimmon-700: #9a3412; --persimmon-600: #b93c0c; --persimmon-650: #a3350b; --persimmon-100: #fbe7dc;
  --green-700: #166534; --green-100: #dcf3e3;
  --red-700: #b91c1c; --red-800: #991b1b; --red-100: #fde2e2;
  --amber-800: #854d0e; --amber-100: #fbf0d0;
  --blue-700: #1d4ed8; --blue-100: #dde7fd;

  /* семантика */
  --bg: var(--paper-100);
  --surface: #ffffff;
  --surface-2: var(--paper-200);
  --surface-sunk: var(--paper-50);
  --line: var(--paper-300);
  --line-strong: var(--paper-400);
  --text: var(--ink-900);
  --text-2: var(--ink-700);
  --text-3: var(--ink-600);
  --action: var(--persimmon-600);
  --action-hover: var(--persimmon-650);
  --action-active: var(--persimmon-700);
  --on-action: #ffffff;
  --action-soft: var(--persimmon-100);
  --action-soft-text: var(--persimmon-700);
  --destructive: var(--red-700);
  --destructive-hover: var(--red-800);
  --on-destructive: #ffffff;
  --destructive-soft: var(--red-100);
  --success: var(--green-700);
  --success-soft: var(--green-100);
  --warning: var(--amber-800);
  --warning-soft: var(--amber-100);
  --info: var(--blue-700);
  --info-soft: var(--blue-100);
  --focus-ring: var(--blue-700);
  --scrim: rgb(28 26 22 / 0.48);
  --shadow-1: 0 1px 2px rgb(28 26 22 / 0.06), 0 1px 1px rgb(28 26 22 / 0.04);
  --shadow-2: 0 8px 24px rgb(28 26 22 / 0.12), 0 2px 6px rgb(28 26 22 / 0.06);
  --shadow-3: 0 -8px 32px rgb(28 26 22 / 0.16);

  /* типографика */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem;
  --fs-24: 1.5rem; --fs-32: 2rem; --fs-40: 2.5rem; --fs-56: 3.5rem;
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.5;

  /* сетка 4px */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;
  --tap: 44px;
  --content: 1120px;

  /* движение */
  --t-fast: 120ms; --t-med: 200ms; --t-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15130f; --surface: #1e1b16; --surface-2: #29251f; --surface-sunk: #1a1814;
  --line: #3a352d; --line-strong: #504a40;
  --text: #f3efe7; --text-2: #cfc8bb; --text-3: #aca395;
  --action: #f2834a; --action-hover: #f69866; --action-active: #f9ad84; --on-action: #1a0d05;
  --action-soft: #3d2416; --action-soft-text: #fdbb92;
  --destructive: #f07272; --destructive-hover: #f48d8d; --on-destructive: #1d0606; --destructive-soft: #3d1a1a;
  --success: #6fd394; --success-soft: #173323;
  --warning: #f0c55a; --warning-soft: #3a2f12;
  --info: #8fb0ff; --info-soft: #1b2645;
  --focus-ring: #8fb0ff;
  --scrim: rgb(0 0 0 / 0.6);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 8px 24px rgb(0 0 0 / 0.5);
  --shadow-3: 0 -8px 32px rgb(0 0 0 / 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15130f; --surface: #1e1b16; --surface-2: #29251f; --surface-sunk: #1a1814;
    --line: #3a352d; --line-strong: #504a40;
    --text: #f3efe7; --text-2: #cfc8bb; --text-3: #aca395;
    --action: #f2834a; --action-hover: #f69866; --action-active: #f9ad84; --on-action: #1a0d05;
    --action-soft: #3d2416; --action-soft-text: #fdbb92;
    --destructive: #f07272; --destructive-hover: #f48d8d; --on-destructive: #1d0606; --destructive-soft: #3d1a1a;
    --success: #6fd394; --success-soft: #173323;
    --warning: #f0c55a; --warning-soft: #3a2f12;
    --info: #8fb0ff; --info-soft: #1b2645;
    --focus-ring: #8fb0ff;
    --scrim: rgb(0 0 0 / 0.6);
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 8px 24px rgb(0 0 0 / 0.5);
    --shadow-3: 0 -8px 32px rgb(0 0 0 / 0.55);
  }
}