/**
 * Дизайн-токены «Считаю» — Liquid Glass Design System
 * 
 * Синхронизировано с мобильным приложением (Flutter):
 * - app_colors.dart
 * - liquid_glass_theme.dart  
 * - app_spacing.dart
 * - app_typography.dart
 */

/* ===== БАЗОВЫЕ ЦВЕТА ===== */
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;
}

/* ===== СВЕТЛАЯ ТЕМА ===== */
:root,
[data-theme="light"] {
  --bg-main: var(--color-white);
  --bg-surface: #f8f9fa;
  --bg-card: var(--color-white);
  --bg-elevated: #f1f3f4;

  --text-main: #1a1a1a;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --text-placeholder: #9ca3af;

  --border-soft: #e5e7eb;
  --border-muted: #d1d5db;

  --accent-primary: #4169E1;
  --accent-primary-hover: #2B6CEE;
  --accent-secondary: #60A5FA;
  --accent-tertiary: #93C5FD;

  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.15);
  --glow-effect: 0 0 12px rgba(65, 105, 225, 0.15);

  /* Glass (light mode — subtle) */
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-bg-hover: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-border-highlight: rgba(0, 0, 0, 0.12);
  --glass-blur: 20px;
  --glass-radius: 20px;
}

/* ===== ТЁМНАЯ ТЕМА — LIQUID GLASS ===== */
[data-theme="dark"] {
  /* Deep black фон (как в мобилке) */
  --bg-main: #000000;
  --bg-surface: #0f0f0f;
  --bg-card: #1a1a1a;
  --bg-elevated: #2a2a2a;

  /* Текст */
  --text-main: #ffffff;
  --text-secondary: #e2e8f0;
  --text-muted: #94a3b8;
  --text-placeholder: #64748b;

  /* Границы */
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-muted: rgba(255, 255, 255, 0.12);

  /* Акценты — Royal Blue (из app_colors.dart) */
  --accent-primary: #4169E1;
  --accent-primary-hover: #2B6CEE;
  --accent-secondary: #60A5FA;
  --accent-tertiary: #93C5FD;
  --accent-teal: #2DD4BF;

  /* Тени */
  --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 0 24px rgba(65, 105, 225, 0.3);
  --glow-effect: 0 0 20px rgba(43, 108, 238, 0.3);

  /* Glass материал (из liquid_glass_theme.dart) */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-hover: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-highlight: rgba(255, 255, 255, 0.18);
  --glass-blur: 20px;
  --glass-radius: 20px;

  /* Ambient gradient blobs (из liquid_glass_theme.dart) */
  --ambient-blue: rgba(65, 105, 225, 0.15);
  --ambient-purple: rgba(100, 50, 250, 0.08);
  --ambient-green: rgba(16, 185, 129, 0.08);
  --ambient-pink: rgba(255, 77, 158, 0.06);

  /* Semantic colors */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;
  --color-info: #3B82F6;

  /* Need/Want */
  --color-need: #10b981;
  --color-want: #f59e0b;
  --color-unsure: #60a5fa;
  --color-resisted: #a78bfa;
}

/* ===== ТИПОГРАФИКА ===== */
:root {
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'Fira Code', 'Cascadia Code', monospace;

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  --font-size-6xl: 3.75rem;   /* 60px */
  --font-size-md: var(--font-size-base);

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}

/* ===== ОТСТУПЫ (модульная шкала 4px из app_spacing.dart) ===== */
:root {
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */
}

/* ===== РАДИУСЫ ===== */
:root {
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;
}

/* ===== ПЕРЕХОДЫ ===== */
:root {
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease-in-out;
  --transition-slow: 400ms ease-in-out;
}

/* ===== КОНТЕЙНЕРЫ ===== */
:root {
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;
}

/* ===== Z-INDEX ===== */
:root {
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-overlay: 1040;
  --z-modal: 1050;
  --z-toast: 1080;
}

/* ===== CHART COLORS ===== */
:root {
  --chart-1: #4169E1;
  --chart-2: #87cefa;
  --chart-3: #facc15;
  --chart-4: #34d399;
  --chart-5: #a78bfa;
  --chart-6: #fb923c;
  --chart-7: #60a5fa;
  --chart-8: #f87171;
}