/* Арка — дизайн-токены. СГЕНЕРИРОВАНО platform/brand/build/build.mjs из src/tokens.json (W3C DTCG). Руками не править.
   Подключение: tokens.css, затем fonts.css. <html lang="ru"> обязателен на каждой странице.
   Тема: по умолчанию системная; принудительно — <html lang="ru" data-theme="light|dark">. */

:root {
  color-scheme: light;

  /* Цвет — светлая тема */
  --color-bg: #DFE1DA;
  --color-bg-page: #ECEDE8;
  --color-bg-section-dark: #1F4B42;
  --color-surface: #F3F4F0;
  --color-text: #222826;
  --color-text-secondary: #56605A;
  --color-text-on-section-dark: #E6E7E1;
  --color-text-secondary-on-section-dark: #ACB4AC;
  --color-text-on-lit: #222826;
  --color-line: #B9BDB5;
  --color-line-control: #56605A;
  --color-focus: #222826;
  --color-key: #A9552F;
  --color-key-on-lit: #A9552F;
  --color-key-on-section-dark: #D4825A;
  --color-light-top: #FFF3DC;
  --color-light-bottom: #FFE2A8;
  --color-portal-idle: #F3F4F0;
  --color-action-primary-bg: #222826;
  --color-action-primary-bg-hover: #2E3432;
  --color-action-primary-bg-pressed: #191E1C;
  --color-action-primary-text: #F3F4F0;
  --color-action-secondary-border: #222826;
  --color-action-secondary-text: #222826;
  --color-action-disabled-bg: #F3F4F0;
  --color-action-disabled-text: #56605A;
  --color-action-disabled-border: #B9BDB5;
  --color-link: #222826;
  --color-status-works: #2E6B57;
  --color-status-works-on-section-dark: #7DB89F;
  --color-status-degraded: #222826;
  --color-status-offline: #222826;
  --color-status-paused: #56605A;
  --gradient-light: linear-gradient(180deg, var(--color-light-top) 0%, var(--color-light-bottom) 100%);
  --shadow-soft: 0 4px 16px -4px rgb(34 40 38 / 0.12);

  /* Расширение для site.css (src/tokens-site.json): освещённая карточка, одинаково в обеих темах */
  --color-lit-action-primary-bg: #222826;
  --color-lit-action-primary-bg-hover: #2E3432;
  --color-lit-action-primary-bg-pressed: #191E1C;
  --color-lit-action-primary-text: #F3F4F0;
  --color-lit-surface: rgb(255 255 255 / 0.4);
  --color-lit-line: rgb(34 40 38 / 0.25);
  --color-qr-bg: #FFFFFF;

  /* Шрифты */
  --font-sans: "Sofia Sans", "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-price: "Sofia Sans Semi Condensed", "Sofia Sans", "Onest", sans-serif;
  --font-text-reserve: "Onest", system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-34: 34px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  --font-size-57: 57px;
  --font-size-68: 68px;
  --font-size-81: 81px;
  --font-size-96: 96px;
  --line-height-display: 1.05;
  --line-height-heading: 1.1;
  --line-height-title: 1.15;
  --line-height-subtitle: 1.25;
  --line-height-body: 1.45;
  --line-height-image: 1.3;
  --line-height-caption: 1.4;
  --line-height-tight: 1.2;
  --tracking-logo: -0.01em;
  --tracking-display: -0.01em;
  --tracking-none: 0em;
  --tracking-body: 0.005em;
  --tracking-caps: 0.04em;

  /* Составные стили: --type-<имя> — шорткат для font; трекинг и регистр отдельно */
  --type-display-size: 96px;
  --type-display: 700 var(--type-display-size)/1.05 var(--font-sans);
  --type-display-tracking: -0.01em;
  --type-h1-size: 81px;
  --type-h1: 700 var(--type-h1-size)/1.05 var(--font-sans);
  --type-h1-tracking: -0.01em;
  --type-h2-size: 40px;
  --type-h2: 700 var(--type-h2-size)/1.1 var(--font-sans);
  --type-h2-tracking: 0em;
  --type-h3-size: 28px;
  --type-h3: 600 var(--type-h3-size)/1.15 var(--font-sans);
  --type-h3-tracking: 0em;
  --type-title-size: 24px;
  --type-title: 600 var(--type-title-size)/1.25 var(--font-sans);
  --type-title-tracking: 0em;
  --type-lead-size: 20px;
  --type-lead: 400 var(--type-lead-size)/1.45 var(--font-sans);
  --type-lead-tracking: 0.005em;
  --type-body-size: 18px;
  --type-body: 400 var(--type-body-size)/1.45 var(--font-sans);
  --type-body-tracking: 0.005em;
  --type-body-sm-size: 17px;
  --type-body-sm: 400 var(--type-body-sm-size)/1.45 var(--font-sans);
  --type-body-sm-tracking: 0.005em;
  --type-button-size: 18px;
  --type-button: 600 var(--type-button-size)/1.2 var(--font-sans);
  --type-button-tracking: 0em;
  --type-caption-size: 14px;
  --type-caption: 400 var(--type-caption-size)/1.4 var(--font-sans);
  --type-caption-tracking: 0.005em;
  --type-footnote-size: 12px;
  --type-footnote: 400 var(--type-footnote-size)/1.4 var(--font-sans);
  --type-footnote-tracking: 0.005em;
  --type-mono-data-size: 17px;
  --type-mono-data: 400 var(--type-mono-data-size)/1.45 var(--font-mono);
  --type-mono-data-tracking: 0em;
  --type-mono-address-size: 17px;
  --type-mono-address: 500 var(--type-mono-address-size)/1.2 var(--font-mono);
  --type-mono-address-tracking: 0em;
  --type-mono-label-size: 14px;
  --type-mono-label: 500 var(--type-mono-label-size)/1.2 var(--font-mono);
  --type-mono-label-tracking: 0.04em;  /* + text-transform: uppercase */
  --type-mono-drawing-size: 14px;
  --type-mono-drawing: 400 var(--type-mono-drawing-size)/1.2 var(--font-mono);
  --type-mono-drawing-tracking: 0em;
  --type-price-size: 57px;
  --type-price: 700 var(--type-price-size)/1.05 var(--font-price);
  --type-price-tracking: -0.01em;
  --type-img1080-headline-size: 81px;
  --type-img1080-headline: 700 var(--type-img1080-headline-size)/1.05 var(--font-sans);
  --type-img1080-headline-tracking: -0.01em;
  --type-img1080-text-size: 48px;
  --type-img1080-text: 400 var(--type-img1080-text-size)/1.3 var(--font-sans);
  --type-img1080-text-tracking: 0em;
  --type-img1080-label-size: 34px;
  --type-img1080-label: 500 var(--type-img1080-label-size)/1.2 var(--font-mono);
  --type-img1080-label-tracking: 0.04em;  /* + text-transform: uppercase */
  --type-img1080-address-size: 40px;
  --type-img1080-address: 500 var(--type-img1080-address-size)/1.2 var(--font-mono);
  --type-img1080-address-tracking: 0em;
  --type-img640-headline-size: 57px;
  --type-img640-headline: 700 var(--type-img640-headline-size)/1.05 var(--font-sans);
  --type-img640-headline-tracking: -0.01em;
  --type-img640-text-size: 28px;
  --type-img640-text: 400 var(--type-img640-text-size)/1.3 var(--font-sans);
  --type-img640-text-tracking: 0em;
  --type-img640-label-size: 28px;
  --type-img640-label: 500 var(--type-img640-label-size)/1.2 var(--font-mono);
  --type-img640-label-tracking: 0em;

  /* Отступы, база 4 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Радиусы: почти прямоугольно. Единственная кривая на экране — свод */
  --radius-none: 0;
  --radius-control: 2px;
  --radius-card: 4px;
  --radius-portal: 50% 50% 4px 4px / 40% 40% 4px 4px;  /* только гостевой ключ, aspect-ratio: 4 / 5 */

  /* Линии */
  --border-hairline: 1px;
  --border-stroke: 1.5px;
  --border-focus: 2px;
  --dash-free-slot: 3 2;  /* stroke-dasharray */
  --dash-drawing: 4 4;  /* stroke-dasharray */

  /* Размеры */
  --size-control-height: 52px;
  --size-touch-min: 48px;
  --size-icon: 24px;
  --size-icon-key-min: 20px;
  --size-status-dot: 12px;
  --size-mark-min: 16px;
  --size-mark-nav: 36px;
  --size-mark-nav-mobile: 32px;
  --size-mark-small-max: 32px;
  --size-measure: 648px;
  --measure: 36em;  /* ≈ 70 знаков при 18 px, = --size-measure */

  /* Сетка */
  --layout-max: 1440px;
  --layout-margin: 96px;
  --layout-gutter: 24px;
  --layout-column: 82px;
  --layout-columns: 12;
  --baseline: 8px;

  /* Движение: подключение = ключ встаёт + свет снизу вверх */
  --motion-connect: 600ms;
  --motion-key-settle: 240ms;
  --motion-light-fill: 360ms;
  --motion-light-out: 320ms;
  --motion-ui-fast: 120ms;
  --motion-ui: 200ms;
  --motion-light-fill-delay: 240ms;
  --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-light: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-ui: cubic-bezier(0.2, 0, 0, 1);
  --ease-linear: cubic-bezier(0, 0, 1, 1);
  --motion-key-offset: 0.5;  /* в модулях t: translateY(calc(var(--mark-t) * -0.5)) → 0 */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #191E1C;
    --color-bg-page: #191E1C;
    --color-bg-section-dark: #1F3B33;
    --color-surface: #232927;
    --color-text: #E6E7E1;
    --color-text-secondary: #A5ACA5;
    --color-text-on-section-dark: #E6E7E1;
    --color-text-secondary-on-section-dark: #A5ACA5;
    --color-text-on-lit: #222826;
    --color-line: #39413D;
    --color-line-control: #A5ACA5;
    --color-focus: #E6E7E1;
    --color-key: #D4825A;
    --color-key-on-lit: #A9552F;
    --color-key-on-section-dark: #D4825A;
    --color-light-top: #FFF3DC;
    --color-light-bottom: #FFE2A8;
    --color-portal-idle: #A5ACA5;
    --color-action-primary-bg: #E6E7E1;
    --color-action-primary-bg-hover: #F3F4F0;
    --color-action-primary-bg-pressed: #DFE1DA;
    --color-action-primary-text: #191E1C;
    --color-action-secondary-border: #E6E7E1;
    --color-action-secondary-text: #E6E7E1;
    --color-action-disabled-bg: #232927;
    --color-action-disabled-text: #A5ACA5;
    --color-action-disabled-border: #39413D;
    --color-link: #E6E7E1;
    --color-status-works: #7DB89F;
    --color-status-works-on-section-dark: #7DB89F;
    --color-status-degraded: #E6E7E1;
    --color-status-offline: #E6E7E1;
    --color-status-paused: #A5ACA5;
    --gradient-light: linear-gradient(180deg, var(--color-light-top) 0%, var(--color-light-bottom) 100%);
    --shadow-soft: none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #191E1C;
  --color-bg-page: #191E1C;
  --color-bg-section-dark: #1F3B33;
  --color-surface: #232927;
  --color-text: #E6E7E1;
  --color-text-secondary: #A5ACA5;
  --color-text-on-section-dark: #E6E7E1;
  --color-text-secondary-on-section-dark: #A5ACA5;
  --color-text-on-lit: #222826;
  --color-line: #39413D;
  --color-line-control: #A5ACA5;
  --color-focus: #E6E7E1;
  --color-key: #D4825A;
  --color-key-on-lit: #A9552F;
  --color-key-on-section-dark: #D4825A;
  --color-light-top: #FFF3DC;
  --color-light-bottom: #FFE2A8;
  --color-portal-idle: #A5ACA5;
  --color-action-primary-bg: #E6E7E1;
  --color-action-primary-bg-hover: #F3F4F0;
  --color-action-primary-bg-pressed: #DFE1DA;
  --color-action-primary-text: #191E1C;
  --color-action-secondary-border: #E6E7E1;
  --color-action-secondary-text: #E6E7E1;
  --color-action-disabled-bg: #232927;
  --color-action-disabled-text: #A5ACA5;
  --color-action-disabled-border: #39413D;
  --color-link: #E6E7E1;
  --color-status-works: #7DB89F;
  --color-status-works-on-section-dark: #7DB89F;
  --color-status-degraded: #E6E7E1;
  --color-status-offline: #E6E7E1;
  --color-status-paused: #A5ACA5;
  --gradient-light: linear-gradient(180deg, var(--color-light-top) 0%, var(--color-light-bottom) 100%);
  --shadow-soft: none;
}

/* Мобильная сетка и кегли */
@media (max-width: 767px) {
  :root {
    --type-display-size: 48px;
    --type-h1-size: 40px;
    --type-h1-tracking: 0em;
    --type-h2-size: 28px;
    --type-h2-tracking: 0em;
    --type-h3-size: 24px;
    --type-h3-tracking: 0em;
    --type-price-size: 48px;
    --size-mark-nav: 32px;  /* шапка 64 px: знак 32 px — logo/arka-mark-small.svg */
    --layout-margin: 16px;
    --layout-gutter: 16px;
    --layout-columns: 4;
  }
}

/* Меньше движения: ключ сразу на месте, свет проявляется прозрачностью */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-key-settle: 0ms;
    --motion-key-offset: 0;
    --motion-light-fill: 200ms;
    --motion-light-fill-delay: 0ms;
    --motion-light-out: 200ms;
    --motion-ui: 0ms;
    --motion-ui-fast: 0ms;
  }
}