/*
 * Дизайн-токены — светлая тема в стиле Linear.
 * Значения сняты с CSS linear.app ([data-theme=light], октябрь 2026).
 * Все цвета, размеры и отступы в интерфейсе — только через эти переменные.
 * Живая витрина: /design (src/pages/DesignPage.tsx).
 */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ===== Фоны: от белого к серому ===== */
  --color-bg-primary: #ffffff;    /* карточки, поля ввода, основной фон */
  --color-bg-secondary: #f9f8f9;  /* подложка страницы */
  --color-bg-tertiary: #f4f2f4;   /* hover, приглушённые блоки */
  --color-bg-quaternary: #eeedef; /* active, нажатие */
  --color-bg-translucent: #00000005;

  /* ===== Текст ===== */
  --color-text-primary: #282a30;
  --color-text-secondary: #3c4149;
  --color-text-tertiary: #6f6e77;
  --color-text-quaternary: #86848d; /* плейсхолдеры, неактивное */
  --color-text-on-accent: #ffffff;

  /* ===== Тёмные поверхности и затемнение ===== */
  --color-bg-inverted: #282a30;      /* тосты, подсказки */
  --color-text-inverted: #f7f8f8;
  --color-backdrop: #0000001f;       /* под боковой панелью */
  --color-backdrop-strong: #00000047; /* под модальным окном */

  /* ===== Границы ===== */
  --color-border-primary: #e9e8ea;
  --color-border-secondary: #e4e2e4;
  --color-border-tertiary: #dcdbdd; /* hover полей */
  --color-border-translucent: #0000000d;

  /* ===== Акцент ===== */
  --color-accent: #7170ff;
  --color-accent-hover: color-mix(in lch, var(--color-accent), black 8%);
  --color-accent-active: color-mix(in lch, var(--color-accent), black 16%);
  --color-accent-tint: #f1f1ff;
  --color-link: var(--color-accent);
  --color-selection: color-mix(in lch, var(--color-accent), transparent 64%);

  /* ===== Статусы (палитра Linear) ===== */
  --color-red: #eb5757;
  --color-green: #27a644;
  --color-yellow: #f0bf00;
  --color-orange: #fc7840;
  --color-blue: #4ea7fc;
  --color-teal: #00b8cc;
  --color-gray: #95949c;
  /* Для текста на светлом фоне — затемнённые, для подложек — разбавленные */
  --color-danger-text: color-mix(in lch, var(--color-red), black 22%);
  --color-danger-bg: color-mix(in lch, var(--color-red), white 92%);
  --color-danger-border: color-mix(in lch, var(--color-red), white 60%);
  --color-success-text: color-mix(in lch, var(--color-green), black 18%);
  --color-success-bg: color-mix(in lch, var(--color-green), white 92%);
  --color-success-border: color-mix(in lch, var(--color-green), white 60%);
  --color-warning-text: color-mix(in lch, var(--color-orange), black 30%);
  --color-warning-bg: color-mix(in lch, var(--color-yellow), white 90%);
  --color-warning-border: color-mix(in lch, var(--color-yellow), white 50%);
  --color-info-text: color-mix(in lch, var(--color-accent), black 25%);
  --color-info-bg: var(--color-accent-tint);
  --color-info-border: color-mix(in lch, var(--color-accent), white 70%);

  /* ===== Шрифт ===== */
  --font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-features: "cv01", "ss03"; /* как у Linear: прямая «1», однотипные кавычки */

  /* Веса — «промежуточные», фирменные для Linear */
  --font-weight-normal: 400;
  --font-weight-medium: 510;
  --font-weight-semibold: 590;
  --font-weight-bold: 680;

  /* Текст: размер / межстрочный / трекинг */
  --text-tiny-size: 10px;    --text-tiny-line: 1.5;    --text-tiny-tracking: -0.015em;
  --text-micro-size: 12px;   --text-micro-line: 1.4;   --text-micro-tracking: 0;
  --text-mini-size: 13px;    --text-mini-line: 1.5;    --text-mini-tracking: -0.01em;
  --text-small-size: 14px;   --text-small-line: 1.5;   --text-small-tracking: -0.013em;
  --text-regular-size: 15px; --text-regular-line: 1.6; --text-regular-tracking: -0.011em;
  --text-large-size: 17px;   --text-large-line: 1.6;   --text-large-tracking: 0;

  /* Заголовки (все — semibold) */
  --title-1-size: 17px; --title-1-line: 1.4;   --title-1-tracking: -0.012em;
  --title-2-size: 20px; --title-2-line: 1.33;  --title-2-tracking: -0.012em;
  --title-3-size: 24px; --title-3-line: 1.33;  --title-3-tracking: -0.012em;
  --title-4-size: 32px; --title-4-line: 1.125; --title-4-tracking: -0.022em;

  /* ===== Отступы (шаг 4px) ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ===== Скругления ===== */
  --radius-4: 4px;
  --radius-6: 6px;   /* кнопки, поля */
  --radius-8: 8px;   /* выноски, мелкие карточки */
  --radius-12: 12px; /* карточки */
  --radius-full: 9999px;

  /* ===== Тени (светлая тема Linear) ===== */
  --shadow-tiny: 0 1px 1px 0 #00000017;
  --shadow-low: 0 1px 4px -1px #00000017;
  --shadow-medium: 0 3px 12px #00000017;
  --shadow-high: 0 7px 24px #0000000f;

  /* ===== Фокус ===== */
  --focus-ring: 0 0 0 1px var(--color-accent), 0 0 0 4px color-mix(in lch, var(--color-accent), transparent 80%);

  /* ===== Размеры контролов ===== */
  --control-height-sm: 28px;
  --control-height-md: 32px;
  --control-height-lg: 40px;

  /* ===== Слои ===== */
  --z-drawer: 20;
  --z-modal: 30;
  --z-toast: 40;

  /* ===== Анимация ===== */
  --speed-quick: 0.1s;
  --speed-regular: 0.25s;
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}