/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — variables.css
   Fonte única de verdade para todas as cores, espaçamentos,
   tipografia, sombras e efeitos visuais do projeto.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Accent (sobrescrito por [data-theme-color]) ── */
  --color-accent:          #2563eb;              /* blue-600 */
  --color-accent-dark:     #1d4ed8;              /* blue-700 */
  --color-accent-text:     #2563eb;
  --color-accent-border:   #2563eb;
  --color-accent-bg-light: rgba(37, 99, 235, 0.08);
  --color-accent-ring:     rgba(37, 99, 235, 0.5);

  /* ── Status ── */
  --color-warning: #f97316;  /* orange-500 — Aviso */
  --color-purple:  #9333ea;  /* purple-600 — Novidade */
  --color-success: #22c55e;  /* green-500 */
  --color-error:   #ef4444;  /* red-500 */
  --color-error-dark: #b91c1c; /* red-700 */

  /* ── Superfícies (light mode) ── */
  --color-bg:         #ffffff;
  --color-bg-subtle:  #f9fafb;  /* gray-50 */
  --color-bg-muted:   #f3f4f6;  /* gray-100 */
  --color-surface:    #ffffff;
  --color-surface-alt: #f9fafb;

  /* ── Texto (light mode) ── */
  --color-text-primary:     #111827;  /* gray-900 */
  --color-text-secondary:   #4b5563;  /* gray-600 */
  --color-text-muted:       #9ca3af;  /* gray-400 */
  --color-text-placeholder: #9ca3af;

  /* ── Bordas (light mode) ── */
  --color-border:       #e5e7eb;  /* gray-200 */
  --color-border-light: #f3f4f6;  /* gray-100 */

  /* ── Footer (sempre escuro, independente do tema) ── */
  --color-footer-bg:      #0f172a;  /* slate-900 */
  --color-footer-text:    #d1d5db;  /* gray-300 */
  --color-footer-muted:   #9ca3af;  /* gray-400 */
  --color-footer-border:  #1e293b;  /* slate-800 */
  --color-footer-surface: #1e293b;
  --color-footer-accent:  rgba(255, 255, 255, 0.1);

  /* ── Glassmorphism (light) ── */
  --glass-bg:           rgba(255, 255, 255, 0.8);
  --glass-border:       rgba(229, 231, 235, 1);
  --glass-blur:         12px;

  /* ── Overlays ── */
  --overlay-hero:     rgba(0, 0, 0, 0.6);
  --overlay-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  --overlay-card:     linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  --overlay-modal:    rgba(0, 0, 0, 0.7);

  /* ── Tipografia ── */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;

  /* ── Tamanhos de fonte ── */
  --text-hero:    clamp(2.25rem, 5vw, 3.75rem);  /* text-4xl → text-6xl */
  --text-section: 1.875rem;   /* text-3xl */
  --text-xl:      1.25rem;    /* text-xl */
  --text-lg:      1.125rem;   /* text-lg */
  --text-base:    1rem;       /* text-base */
  --text-sm:      0.875rem;   /* text-sm */
  --text-xs:      0.75rem;    /* text-xs */
  --text-2xs:     0.625rem;   /* text-[10px] */

  /* ── Espaçamento ── */
  --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-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Container ── */
  --container-max: 80rem;   /* max-w-7xl = 1280px */
  --container-pad: 1rem;    /* px-4 */

  /* ── Border-radius ── */
  --radius-sm:   0.375rem;   /* rounded */
  --radius-md:   0.5rem;     /* rounded-lg */
  --radius-lg:   0.75rem;    /* rounded-xl */
  --radius-xl:   1rem;       /* rounded-2xl */
  --radius-2xl:  1.5rem;     /* rounded-3xl */
  --radius-3xl:  2rem;       /* rounded-[2rem] */
  --radius-4xl:  2.5rem;     /* rounded-[2.5rem] */
  --radius-pill: 9999px;     /* rounded-full */

  /* ── Sombras ── */
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ── Transições ── */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease;
  --transition-theme:  background-color var(--transition-base),
                       color var(--transition-base),
                       border-color var(--transition-base);

  /* ── Z-index ── */
  --z-base:    1;
  --z-overlay: 10;
  --z-navbar:  50;
  --z-modal:   100;
  --z-tooltip: 200;
}

/* ═══════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════ */
[data-theme="dark"] {
  --color-bg:         #0f172a;   /* slate-900 */
  --color-bg-subtle:  rgba(15, 23, 42, 0.5);
  --color-bg-muted:   #020617;   /* slate-950 */
  --color-surface:    #1e293b;   /* slate-800 */
  --color-surface-alt: #1e293b;

  --color-text-primary:   #ffffff;
  --color-text-secondary: #d1d5db;  /* gray-300 */
  --color-text-muted:     #9ca3af;  /* gray-400 */

  --color-border:       #334155;  /* slate-700 */
  --color-border-light: #1e293b;  /* slate-800 */

  --glass-bg:     rgba(15, 23, 42, 0.8);
  --glass-border: #334155;

  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.4);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════
   COLOR THEMES
   ═══════════════════════════════════════ */
[data-theme-color="blue"] {
  --color-accent:          #2563eb;
  --color-accent-dark:     #1d4ed8;
  --color-accent-text:     #2563eb;
  --color-accent-border:   #2563eb;
  --color-accent-bg-light: rgba(37, 99, 235, 0.08);
  --color-accent-ring:     rgba(37, 99, 235, 0.5);
}

[data-theme-color="red"] {
  --color-accent:          #dc2626;
  --color-accent-dark:     #b91c1c;
  --color-accent-text:     #dc2626;
  --color-accent-border:   #dc2626;
  --color-accent-bg-light: rgba(220, 38, 38, 0.08);
  --color-accent-ring:     rgba(220, 38, 38, 0.5);
}

[data-theme-color="green"] {
  --color-accent:          #059669;
  --color-accent-dark:     #047857;
  --color-accent-text:     #059669;
  --color-accent-border:   #059669;
  --color-accent-bg-light: rgba(5, 150, 105, 0.08);
  --color-accent-ring:     rgba(5, 150, 105, 0.5);
}

/* Combinações dark + color-theme para melhor contraste */
[data-theme="dark"][data-theme-color="blue"] {
  --color-accent-bg-light: rgba(37, 99, 235, 0.15);
}
[data-theme="dark"][data-theme-color="red"] {
  --color-accent-bg-light: rgba(220, 38, 38, 0.15);
}
[data-theme="dark"][data-theme-color="green"] {
  --color-accent-bg-light: rgba(5, 150, 105, 0.15);
}