/* ============================================
   LANA AUTOMOTIVA — Design Tokens (Figma)
   ============================================ */

:root {
  /* ── Blue Brand ── */
  --color-blue-brand-50: #e6effe;
  --color-blue-brand-100: #b0cefc;
  --color-blue-brand-400: #0062f4;
  --color-blue-brand-500: #004ab7;
  --color-blue-brand-600: #002255;

  /* ── Blue Dark ── */
  --color-blue-dark-50: #e6eaed;
  --color-blue-dark-100: #b2bfc8;
  --color-blue-dark-200: #08314d;
  --color-blue-dark-400: #06253a;
  --color-blue-dark-500: #051d2e;
  --color-blue-dark-600: #03111b;

  /* ── Red Brand ── */
  --color-red-brand-400: #d12128;
  --color-red-brand-500: #9d191e;

  /* ── Green Brand ── */
  --color-green-brand-50: #c1f8bc;
  --color-green-brand-400: #32ac26;
  --color-green-brand-500: #1b6414;
  --color-green-brand-600: #0d3109;

  /* ── Neutral ── */
  --color-neutral-50: #f5f6f6;
  --color-neutral-100: #e0e2e4;
  --color-neutral-200: #9ba3a7;
  --color-neutral-400: #747a7d;
  --color-neutral-600: #36393a;

  /* ── Gray ── */
  --color-gray-25: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f2f4f7;
  --color-gray-400: #98a2b3;
  --color-gray-500: #667085;

  /* ── Static ── */
  --color-static-white: #ffffff;

  /* ── Semantic aliases ── */
  --color-background: var(--color-static-white);
  --color-foreground: var(--color-blue-dark-600);
  --color-primary: var(--color-blue-brand-500);
  --color-primary-hover: var(--color-blue-brand-400);
  --color-accent: var(--color-red-brand-400);
  --color-accent-hover: var(--color-red-brand-500);
  --color-success: var(--color-green-brand-400);
  --color-muted: var(--color-neutral-400);
  --color-surface: var(--color-neutral-50);
  --color-border: var(--color-neutral-100);

  /* ── Typography — Font Families ── */
  --font-body: "Inter", sans-serif;
  --font-heading: "Epilogue", sans-serif;
  --font-button: "Epilogue", sans-serif;

  /* ── Typography — Font Sizes ── */
  --text-xs: 0.75rem;
  /* 12px */
  --text-sm: 0.875rem;
  /* 14px */
  --text-base: 1rem;
  /* 16px */
  --text-lg: 1.125rem;
  /* 18px */
  --text-xl: 1.25rem;
  /* 20px */
  --text-2xl: 1.5rem;
  /* 24px */
  --text-3xl: 1.875rem;
  /* 30px */
  --text-4xl: 2.25rem;
  /* 36px */
  --text-5xl: 3rem;
  /* 48px */

  /* ── Typography — Font Weights ── */
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ── Typography — Line Heights ── */
  --leading-tight: 1.25;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  /* ── Spacing ── */
  --space-1: 0.25rem;
  /* 4px  */
  --space-2: 0.5rem;
  /* 8px  */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */
  --space-5: 1.25rem;
  /* 20px */
  --space-6: 1.5rem;
  /* 24px */
  --space-8: 2rem;
  /* 32px */
  --space-10: 2.5rem;
  /* 40px */
  --space-12: 3rem;
  /* 48px */
  --space-16: 4rem;
  /* 64px */
  --space-20: 5rem;
  /* 80px */
  --space-24: 6rem;
  /* 96px */

  /* ── Border Radius ── */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ── Container ── */
  --container-max: 1216px;
}