/* =========================================================================
 * Design tokens — единый источник стиля (YouTube dark theme inspired).
 * Подключается первым через base.html, доступен во всех CSS.
 * ========================================================================= */

:root {
  /* ---------- Colors ---------- */
  /* Surfaces */
  --color-bg: #0f0f0f;            /* основной фон страницы */
  --color-surface: #1a1a1a;        /* поверхность (карточки, инпуты) */
  --color-surface-2: #272727;      /* приподнятая поверхность (hover, dropdown) */
  --color-surface-3: #3f3f3f;      /* самый высокий уровень (chip, tooltip) */
  --color-overlay: rgba(0, 0, 0, 0.7);

  /* Text */
  --color-text: #f1f1f1;
  --color-text-secondary: #aaaaaa;
  --color-text-tertiary: #717171;
  --color-text-disabled: #555555;

  /* Borders */
  --color-border: #303030;
  --color-border-strong: #404040;
  --color-divider: rgba(255, 255, 255, 0.1);

  /* Brand / accent */
  --color-brand: #ff0033;          /* Clipzy red (близко к YouTube #ff0000) */
  --color-brand-hover: #ff3355;
  --color-accent: #3ea6ff;         /* ссылки, hashtag */
  --color-success: #2ba640;
  --color-warning: #ffaa00;
  --color-danger: #ff4d4d;

  /* ---------- Spacing (8pt grid) ---------- */
  --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;
  --space-16: 64px;

  /* ---------- Radius ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- Typography ---------- */
  --font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;

  --line-height-tight: 1.3;
  --line-height-normal: 1.5;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.5);

  /* ---------- Transitions ---------- */
  --transition-fast: 0.12s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ---------- Layout ---------- */
  --nav-h: 64px;
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 72px;
  --max-content-w: 1800px;

  /* ---------- Z-index scale ---------- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Legacy aliases (обратная совместимость со старым кодом) */
  --bg: var(--color-bg);
  --card: var(--color-surface);
  --text: var(--color-text);
  --muted: var(--color-text-secondary);
  --border: var(--color-border);
  --hover: var(--color-surface-2);
  --gap: var(--space-4);
  --gap-sm: var(--space-3);
  --gap-xs: var(--space-2);
  --radius: var(--radius-md);
}