/* Design tokens — Касса-Терминал design system
   Navy / orange palette, Onest type, flat surfaces, 1px borders.
   Source: Касса-Терминал — знак и основа дизайн-системы. */

:root {
  /* ---- Касса-Терминал palette (canonical names, use these in new code) ---- */
  --kt-blue:            #2C4A7C;   /* основной: заголовки, знак, корпуса иллюстраций */
  --kt-blue-deep:       #1C3055;   /* тёмные плашки: футер, hero, шапка на скролле */
  --kt-blue-bright:     #3767BE;   /* ссылки, hover */
  --kt-blue-tint:       #EAEFF7;   /* фон синих бейджей */
  --kt-blue-pale:       #AEBFDB;   /* вторичный текст/подписи на синих плашках */
  --kt-orange:          #F5821F;   /* акцент: только заливка, никогда текст */
  --kt-orange-deep:     #C0570C;   /* оранжевый текстом — единственный допустимый вариант */
  --kt-orange-tint:     #FDF0E3;   /* фон оранжевых бейджей */
  --kt-ink:             #1E1B17;   /* основной текст */
  --kt-ink-2:           #4A443B;   /* вторичный текст */
  --kt-grey:            #8B8377;   /* подписи, метки */
  --kt-sand:            #FAF7F2;   /* фон страницы */
  --kt-white:           #FFFFFF;   /* карточки */
  --kt-line:            #E8E1D6;   /* границы */
  --kt-success:         #1E7A4B;
  --kt-error:           #B0453A;

  --kt-font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --kt-h1: 800 44px/1.1 var(--kt-font);
  --kt-h2: 800 32px/1.15 var(--kt-font);
  --kt-h3: 800 22px/1.25 var(--kt-font);
  --kt-body-l: 400 18px/1.55 var(--kt-font);
  --kt-body: 400 16px/1.6 var(--kt-font);
  --kt-small: 400 14px/1.5 var(--kt-font);
  --kt-caption: 600 12px/1.4 var(--kt-font);
  --kt-overline: 800 11px/1.3 var(--kt-font);

  --kt-space-1: 4px;  --kt-space-2: 8px;  --kt-space-3: 12px; --kt-space-4: 16px;
  --kt-space-5: 24px; --kt-space-6: 32px; --kt-space-7: 48px; --kt-space-8: 64px;
  --kt-space-9: 96px;
  --kt-container: 1160px;
  --kt-radius-sm: 10px;   /* кнопки, поля */
  --kt-radius-md: 16px;   /* карточки */
  --kt-radius-lg: 20px;   /* модалки, hero */
  --kt-radius-pill: 999px;
  --kt-border: 1px solid var(--kt-line);
  --kt-shadow-hover: 0 6px 20px rgba(30, 27, 23, .08);
  --kt-control-h: 48px;

  /* ---- Legacy aliases — styles.css and page-level markup across the site
     reference these names directly; keep them mapped onto the palette above
     so every existing page restyles without per-page edits. ---- */
  --teal-900: var(--kt-blue-deep);
  --teal-700: var(--kt-blue);
  --teal-600: var(--kt-blue);
  --teal-500: var(--kt-blue-bright);
  --teal-300: var(--kt-blue-tint);
  --teal-100: var(--kt-blue-tint);

  --blue-900: var(--kt-blue-deep);
  --blue-700: var(--kt-blue);

  --amber-600: var(--kt-orange-deep);
  --amber-500: var(--kt-orange);
  --amber-400: var(--kt-orange);
  --amber-100: var(--kt-orange-tint);
  --amber-ink: var(--kt-orange-deep);
  --amber-ink-dark: var(--kt-orange-deep);

  --ink-900: var(--kt-ink);
  --ink-800: var(--kt-ink);
  --ink-700: var(--kt-ink-2);
  --ink-600: var(--kt-ink-2);
  --slate-500: var(--kt-grey);
  --slate-400: var(--kt-grey);

  --surface-0: var(--kt-white);
  --surface-50: var(--kt-sand);
  --surface-100: var(--kt-sand);
  --surface-150: var(--kt-sand);
  --surface-200: var(--kt-line);
  --surface-250: var(--kt-line);
  --surface-300: var(--kt-line);
  --surface-350: var(--kt-line);

  --color-primary: var(--kt-blue-bright);
  --color-primary-dark: var(--kt-blue);
  --color-primary-deep: var(--kt-blue-deep);
  --color-secondary: var(--kt-blue);
  --color-accent: var(--kt-orange);
  --color-text: var(--kt-ink);
  --color-text-muted: var(--kt-grey);
  --color-text-on-dark: var(--kt-white);
  --color-bg: var(--kt-sand);
  --color-bg-alt: var(--kt-sand);
  --color-border: var(--kt-line);

  --font-family: var(--kt-font);
  --fs-h1: var(--kt-h1-size, 44px);
  --fs-h2: 32px;
  --fs-h3: 22px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-xs: 12px;

  --fw-regular: 400;
  --fw-medium: 600;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  --r-sm: var(--kt-radius-sm);
  --r-md: var(--kt-radius-md);
  --r-lg: var(--kt-radius-lg);
  --r-xl: var(--kt-radius-lg);
  --r-2xl: var(--kt-radius-lg);
  --r-pill: var(--kt-radius-pill);
  --r-circle: 50%;

  --shadow-sm: var(--kt-shadow-hover);
  --shadow-md: var(--kt-shadow-hover);
  --shadow-lg: 0 12px 32px rgba(30, 27, 23, .12);
  --shadow-xl: 0 20px 48px rgba(30, 27, 23, .16);

  --container-max: var(--kt-container);
  --space-1: var(--kt-space-1);
  --space-2: var(--kt-space-2);
  --space-3: var(--kt-space-3);
  --space-4: var(--kt-space-4);
  --space-5: var(--kt-space-5);
  --space-6: var(--kt-space-6);
  --space-7: var(--kt-space-7);
  --space-8: var(--kt-space-8);
  --space-9: var(--kt-space-9);
}