/*
  ДИЗАЙН-СИСТЕМА / DESIGN TOKENS
  ------------------------------------------------------------------
  Централизованные semantic-переменные цвета, отступов, радиусов и теней.
  Компоненты НЕ должны использовать произвольные HEX-цвета напрямую —
  только переменные из этого файла. Это позволяет:
   - поддерживать Light/Dark темы без дублирования стилей;
   - легко менять фирменный цвет в одном месте;
   - в будущем перейти на CSS-in-JS/Tailwind theme без переписывания логики.

  Фирменный цвет: turquoise / teal (#14B8A6 и его оттенки).
*/

:root {
  /* ---------- Brand scale (не меняется между темами) ---------- */
  --brand-50:  #effbf9;
  --brand-100: #ccf4ec;
  --brand-200: #9ee8db;
  --brand-300: #64d5c4;
  --brand-400: #33bcac;
  --brand-500: #14b8a6; /* основной фирменный */
  --brand-600: #0d9488;
  --brand-700: #0f766e;
  --brand-800: #115e56;
  --brand-900: #124e48;
  --brand-glow: rgba(20, 184, 166, 0.35);

  /* ---------- Typography ---------- */
  --font-sans: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* ---------- Spacing scale ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* ---------- Radius scale ---------- */
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-full: 999px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

  /* ---------- Z-index scale ---------- */
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/*
  LIGHT THEME (по умолчанию)
  Белая чистая поверхность + бирюзовые акценты.
*/
:root,
[data-theme='light'] {
  color-scheme: light;

  --color-background: #ffffff;
  --color-background-soft: #f7fafa; /* очень лёгкий бирюзово-серый оттенок секций */
  --color-foreground: #0f172a;
  --color-foreground-muted: #475569;

  --color-surface: #ffffff;
  --color-surface-secondary: #f1f5f4;
  --color-surface-raised: #ffffff;

  --color-border: #e2e8e7;
  --color-border-strong: #cbd5d3;

  --color-muted: #64748b;
  --color-muted-foreground: #94a3b8;

  --color-primary: var(--brand-500);
  --color-primary-hover: var(--brand-600);
  --color-primary-active: var(--brand-700);
  --color-primary-foreground: #ffffff;
  --color-primary-subtle: var(--brand-50);
  --color-primary-subtle-border: var(--brand-200);

  --color-danger: #e11d48;
  --color-danger-subtle: #fef2f4;
  --color-success: #16a34a;
  --color-success-subtle: #f0fdf4;
  --color-warning: #d97706;

  --color-star: #f59e0b;

  --shadow-color: 220deg 25% 45%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.06), 0 1px 1px hsl(var(--shadow-color) / 0.04);
  --shadow-md: 0 8px 24px -8px hsl(var(--shadow-color) / 0.14), 0 2px 6px -2px hsl(var(--shadow-color) / 0.08);
  --shadow-lg: 0 20px 48px -16px hsl(var(--shadow-color) / 0.20), 0 4px 12px -2px hsl(var(--shadow-color) / 0.08);
  --shadow-glow: 0 0 0 rgba(0,0,0,0);

  --map-tile-filter: none;
  --map-bg: #eef5f4;
  --map-grid: rgba(15, 23, 42, 0.06);
  --map-land: #e7f1ef;
}

/*
  DARK THEME
  Глубокий тёмный фон + карточки чуть светлее + бирюзовый остаётся ярким акцентом.
  Это не простая инверсия: тени заменены на едва заметные turquoise glow,
  поверхности разделены по яркости, чтобы сохранить иерархию.
*/
[data-theme='dark'] {
  color-scheme: dark;

  --color-background: #0f172a;
  --color-background-soft: #0b1424;
  --color-foreground: #f1f5f9;
  --color-foreground-muted: #b6c2d1;

  --color-surface: #16213a;
  --color-surface-secondary: #1b2941;
  --color-surface-raised: #1b2941;

  --color-border: #26344d;
  --color-border-strong: #33455f;

  --color-muted: #93a3b8;
  --color-muted-foreground: #7284a0;

  --color-primary: var(--brand-500);
  --color-primary-hover: #2dd4bf;
  --color-primary-active: var(--brand-400);
  --color-primary-foreground: #05201c;
  --color-primary-subtle: rgba(20, 184, 166, 0.12);
  --color-primary-subtle-border: rgba(20, 184, 166, 0.35);

  --color-danger: #fb7185;
  --color-danger-subtle: rgba(251, 113, 133, 0.1);
  --color-success: #4ade80;
  --color-success-subtle: rgba(74, 222, 128, 0.12);
  --color-warning: #fbbf24;

  --color-star: #fbbf24;

  --shadow-color: 220deg 60% 3%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.4);
  --shadow-md: 0 8px 24px -8px hsl(var(--shadow-color) / 0.55), 0 2px 6px -2px hsl(var(--shadow-color) / 0.4);
  --shadow-lg: 0 20px 48px -16px hsl(var(--shadow-color) / 0.65), 0 4px 12px -2px hsl(var(--shadow-color) / 0.4);
  --shadow-glow: 0 0 32px -4px var(--brand-glow);

  --map-tile-filter: brightness(0.68) saturate(1.15) invert(1) hue-rotate(180deg) contrast(0.92);
  --map-bg: #0c1a22;
  --map-grid: rgba(45, 212, 191, 0.14);
  --map-land: #10222a;
}