/**
 * CarDelta Design Tokens
 *
 * Централизованная система дизайна на основе брендбука из Figma
 * Импортируется во все HTML страницы
 */

:root {
  /* ===== PRIMARY COLORS ===== */
  --primary-50: #EFF6FF;    /* Background tint */
  --primary-100: #DBEAFE;   /* Badge / Surface */
  --primary-600: #2563EB;   /* Primary — buttons, links, icons */
  --primary-700: #1D4ED8;   /* Hover / Dark state */
  --primary-800: #1E40AF;   /* Deep accent */

  /* Aliases для совместимости с текущим кодом */
  --primary: var(--primary-600);
  --primary-light: var(--primary-600);
  --primary-dark: var(--primary-800);

  /* ===== NEUTRAL COLORS ===== */
  --neutral-50: #F8FAFC;    /* Page background */
  --neutral-100: #F1F5F9;   /* Subtle surface */
  --neutral-300: #CBD5E1;   /* Border / Divider */
  --neutral-500: #64748B;   /* Muted / Meta text */
  --neutral-700: #334155;   /* Body text */
  --neutral-900: #0F172A;   /* Heading text / Dark bg */

  /* Aliases для совместимости */
  --gray-50: var(--neutral-50);
  --gray-100: var(--neutral-100);
  --gray-200: #E2E8F0;      /* Дополнительный оттенок */
  --gray-300: var(--neutral-300);
  --gray-400: #94A3B8;      /* Дополнительный оттенок */
  --gray-500: var(--neutral-500);
  --gray-700: var(--neutral-700);
  --gray-800: #1E293B;      /* Дополнительный оттенок */
  --gray-900: var(--neutral-900);

  /* ===== SEMANTIC COLORS ===== */
  --success: #16A34A;
  --success-surface: #F0FDF4;

  --warning: #D97706;
  --warning-surface: #FEF3C7;

  --error: #EF4444;
  --error-surface: #FEF2F2;

  /* Aliases для совместимости */
  --danger: var(--error);

  /* ===== GRADIENTS ===== */
  --gradient-main: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);

  /* ===== TYPOGRAPHY ===== */
  /* Font Family */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* Font Sizes (px) */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 18px;
  --text-lg: 24px;
  --text-xl: 36px;
  --text-display: 52px;

  /* Line Heights */
  --leading-tight: 1;
  --leading-snug: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  /* Letter Spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* ===== SPACING (px) ===== */
  --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;
  --space-20: 80px;

  /* ===== BORDER RADIUS (px) ===== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
}

/* ===== BASE STYLES ===== */
body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--neutral-700);
  background-color: var(--neutral-50);
  letter-spacing: var(--tracking-normal);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-bold);
  color: var(--neutral-900);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

/* Links */
a {
  color: var(--primary-600);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--primary-700);
}

/* Buttons */
button, .btn {
  font-family: var(--font-primary);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-md);
  transition: all 0.2s;
}

/* Inputs */
input, textarea, select {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
  border: 1px solid var(--neutral-300);
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px var(--primary-50);
}

/* Cards */
.card {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s, transform 0.2s;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}