/* ====================================================
   LOCK FÁCIL RENT A CAR — Design Tokens
   variables.css — Camada de tokens CSS
   Estrutura: primitivos → semânticos → componentes
   ==================================================== */

:root {
  /* ── PRIMITIVOS: Cores Brand (Azul) ── */
  --color-brand-50:  #e6f0ff;
  --color-brand-100: #b3d1ff;
  --color-brand-200: #80b3ff;
  --color-brand-300: #4d94ff;
  --color-brand-400: #1a75ff;
  --color-brand-500: #0057e7;
  --color-brand-600: #0046bc;
  --color-brand-700: #003491;
  --color-brand-800: #002366;
  --color-brand-900: #00113b;

  /* ── PRIMITIVOS: Cores Accent (Vermelho Lock Fácil) ── */
  --color-accent-400: #ff4040;
  --color-accent-500: #e30613;
  --color-accent-600: #b80510;

  /* ── PRIMITIVOS: Neutros ── */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f8f9fa;
  --color-neutral-100: #f1f3f5;
  --color-neutral-200: #e9ecef;
  --color-neutral-300: #dee2e6;
  --color-neutral-400: #ced4da;
  --color-neutral-500: #adb5bd;
  --color-neutral-600: #6c757d;
  --color-neutral-700: #495057;
  --color-neutral-800: #343a40;
  --color-neutral-900: #212529;
  --color-neutral-950: #0d1117;

  /* ── PRIMITIVOS: Status ── */
  --color-success: #28a745;
  --color-error:   #dc3545;
  --color-warning: #ffc107;
  --color-info:    #17a2b8;

  /* ── SEMÂNTICOS: Light Mode (padrão) ── */
  --bg-primary:    var(--color-neutral-0);
  --bg-secondary:  var(--color-neutral-50);
  --bg-tertiary:   var(--color-neutral-100);
  --bg-inverse:    var(--color-neutral-950);
  --bg-brand:      var(--color-brand-500);
  --bg-accent:     var(--color-accent-500);

  --text-primary:   var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-inverse:   var(--color-neutral-0);
  --text-muted:     var(--color-neutral-500);
  --text-brand:     var(--color-brand-500);
  --text-accent:    var(--color-accent-500);

  --border-color:        var(--color-neutral-200);
  --border-color-strong: var(--color-neutral-300);

  --surface-card:   var(--color-neutral-0);
  --surface-glass:  rgba(255, 255, 255, 0.72);
  --glass-blur:     blur(20px);
  --glass-border:   1px solid rgba(255, 255, 255, 0.3);
  --glass-shadow:   0 8px 32px rgba(0, 87, 231, 0.12);

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.14);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.18);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.22);

  /* ── TIPOGRAFIA ── */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Poppins', var(--font-sans);

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;
  --font-black:     900;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ── ESPAÇAMENTOS (escala 4px) ── */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── BORDAS E RAIOS ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ── TRANSIÇÕES ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-slower: 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-INDEX ── */
  --z-below:    -1;
  --z-base:      0;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-toast:     600;
  --z-tooltip:   700;

  /* ── LAYOUT ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1400px;
  --container-pad: clamp(1rem, 5vw, 2rem);

  /* ── HEADER ── */
  --header-height:        80px;
  --header-height-mobile: 64px;

  /* ── COMPONENTES ESPECÍFICOS ── */
  --card-radius:    var(--radius-xl);
  --card-padding:   var(--space-6);
  --card-shadow:    var(--shadow-md);
  --card-shadow-hover: var(--shadow-xl);

  --btn-height:     48px;
  --btn-radius:     var(--radius-full);
  --btn-padding:    0 var(--space-8);
  --btn-font-size:  var(--text-sm);
  --btn-font-weight: var(--font-semibold);

  --input-height:   52px;
  --input-radius:   var(--radius-lg);
  --input-border:   1px solid var(--border-color);
  --input-padding:  0 var(--space-4);

  /* ── SEÇÕES ── */
  --section-padding-y: clamp(var(--space-16), 6vw, var(--space-24));
}

/* ====================================================
   SEMÂNTICOS: Dark Mode
   ==================================================== */
[data-theme="dark"] {
  --bg-primary:    #0d1117;
  --bg-secondary:  #161b22;
  --bg-tertiary:   #21262d;
  --bg-inverse:    var(--color-neutral-0);

  --text-primary:   #e6edf3;
  --text-secondary: #8b949e;
  --text-inverse:   var(--color-neutral-950);
  --text-muted:     #6e7681;

  --border-color:        #30363d;
  --border-color-strong: #484f58;

  --surface-card:  #161b22;
  --surface-glass: rgba(22, 27, 34, 0.85);
  --glass-border:  1px solid rgba(255, 255, 255, 0.08);
  --glass-shadow:  0 8px 32px rgba(0, 0, 0, 0.4);

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.50);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.60);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.70);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.80);
}

/* ── Detectar preferência do sistema antes do JS ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg-primary:    #0d1117;
    --bg-secondary:  #161b22;
    --bg-tertiary:   #21262d;
    --text-primary:   #e6edf3;
    --text-secondary: #8b949e;
    --text-muted:     #6e7681;
    --border-color:        #30363d;
    --border-color-strong: #484f58;
    --surface-card:  #161b22;
    --surface-glass: rgba(22, 27, 34, 0.85);
    --glass-border:  1px solid rgba(255, 255, 255, 0.08);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.40);
    --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.50);
    --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.60);
    --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.70);
  }
}