/**
 * tokens.css — Единый источник дизайн-токенов «ТОЧКА ПЛАВЛЕНИЯ» (Editorial Lab / Blueprint)
 *
 * Все цвета, типографика, радиусы, тени и сетка определены здесь.
 * Tailwind CSS и ручные стилевые файлы ссылаются на эти переменные.
 */

:root {
  /* --- 60% ЦВЕТОВЫЕ ПОВЕРХНОСТИ (Чистый белый холст #ffffff) --- */
  --color-bg: #ffffff;
  --color-paper: #ffffff;
  --color-paper-subtle: #f7f5ef;
  --color-paper-border: #e4e0d7;
  --color-paper-border-dark: #1A1A1A;
  --color-card: #ffffff;
  --color-card-solid: #ffffff;
  --color-callout: #f7f5ef;
  --dot-color: #eeeae1;

  /* --- 30% ТЕКСТ И СТРУКТУРА (Графит #1A1A1A) --- */
  --color-ink: #1A1A1A;
  --color-ink-muted: #575249;
  --color-ink-faint: #666159;

  /* --- 10% АКЦЕНТ И ДЕЙСТВИЕ (Медно-янтарный #eb5211) --- */
  --color-accent: #eb5211;
  --color-accent-text: #c23f06;
  --color-accent-hover: #d2450a;
  --color-accent-subtle: rgba(235, 82, 17, 0.12);
  --color-accent-border: rgba(235, 82, 17, 0.4);

  /* Алиасы семантики */
  --accent: var(--color-accent);
  --color-primary: var(--color-accent);
  --color-primary-hover: var(--color-accent-hover);
  --color-surface: var(--color-paper);
  --color-surface-subtle: var(--color-paper-subtle);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-muted);
  --color-text-faint: var(--color-ink-faint);

  /* Поверхности браузера */
  --color-scrollbar-thumb: var(--color-paper-border);
  --color-scrollbar-thumb-hover: var(--color-ink-faint);
  --color-scrollbar-track: transparent;

  /* Статусные цвета */
  --color-danger: #b3261e;
  --color-danger-bg: #fdecec;
  --color-danger-border: #f8b4b4;
  --color-success: #1a7f4c;
  --color-success-bg: #e6f4ea;
  --color-success-border: #a8dab5;
  --color-warning: #d97706;
  --color-warning-bg: #fef3c7;
  --color-warning-border: #fcd34d;

  /* Инженерные скетч-маркеры */
  --color-sketch-yellow: #fde047;
  --color-sketch-yellow-bg: #fffdf5;
  --color-sketch-tape: rgba(235, 222, 179, 0.85);

  /* --- ТИПОГРАФИКА: IBM Plex Sans доминанта (DESIGN.md) --- */
  --font-sans: "IBM Plex Sans", "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-serif: Newsreader, Georgia, serif;
  --font-mono: "JetBrains Mono", monospace;
  --font-hand: Caveat, cursive;

  /* Шкала размеров текста (Typographic Scale) */
  --text-display: clamp(2rem, 4vw, 2.75rem); /* 32px–44px */
  --text-h1: clamp(1.75rem, 3.2vw, 2.25rem); /* 28px–36px */
  --text-h2: clamp(1.375rem, 2.2vw, 1.625rem); /* 22px–26px */
  --text-h3: 1.25rem;                          /* 20px */
  --text-h4: 1.0625rem;                        /* 17px */
  --text-lead: 1.125rem;                       /* 18px */
  --text-body: 1rem;                           /* 16px */
  --text-sm: 0.875rem;                         /* 14px */
  --text-xs: 0.75rem;                          /* 12px */

  --font-size-body: 17px;
  --line-height-body: 1.7;

  /* Оптический интерлиньяж (Line Heights) */
  --leading-tight: 1.18;
  --leading-snug: 1.32;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Оптический трекинг (Letter Spacing) */
  --tracking-tight: -0.025em;
  --tracking-snug: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.07em;

  /* --- ФОРМА, СКРУГЛЕНИЯ, СЕТКА 8px И ЛЁГКАЯ БУМАЖНАЯ ПЛАСТИКА --- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;

  --border-sketch: 1px solid var(--color-paper-border);
  --shadow-sketch: 0 1px 3px rgba(20, 20, 20, 0.03);
  --shadow-card: 0 1px 3px rgba(20, 20, 20, 0.03);
  --shadow-card-hover: 0 2px 6px rgba(20, 20, 20, 0.05);

  /* Анимация и микровзаимодействия (Motion Tokens) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-deliberate: 300ms;

  /* Шаг сетки: 8, 16, 32, 64 */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;

  --container-width: 1140px;
  --touch-target-min: 48px;
}

/* ТЁМНАЯ ТЕМА: #242424 карточка, #E8E0D4 текст */
html.dark {
  --color-bg: #141414;
  --color-paper: #242424;
  --color-paper-subtle: #1c1c1c;
  --color-paper-border: #383838;
  --color-paper-border-dark: #4a4a4a;
  --color-card: #242424;
  --color-card-solid: #242424;
  --color-callout: #1c1c1c;
  --dot-color: #202020;

  --color-ink: #E8E0D4;
  --color-ink-muted: #A39B8E;
  --color-ink-faint: #7A7367;

  --color-accent: #f97316;
  --color-accent-text: #fb923c;
  --color-accent-hover: #ffa066;
  --color-accent-subtle: rgba(249, 115, 22, 0.18);
  --color-accent-border: rgba(249, 115, 22, 0.45);

  --color-danger: #ef4444;
  --color-danger-bg: rgba(179, 38, 30, 0.25);
  --color-danger-border: rgba(248, 180, 180, 0.35);
  --color-success: #22c55e;
  --color-success-bg: rgba(26, 127, 76, 0.25);
  --color-success-border: rgba(168, 218, 181, 0.35);
  --color-warning: #f59e0b;
  --color-warning-bg: rgba(217, 119, 6, 0.25);
  --color-warning-border: rgba(252, 211, 77, 0.35);

  --color-sketch-yellow-bg: rgba(202, 138, 4, 0.18);
  --color-sketch-tape: rgba(120, 106, 72, 0.7);

  --border-sketch: 1px solid var(--color-paper-border);
  --shadow-sketch: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 2px 6px rgba(0, 0, 0, 0.3);
}