/*
 * styles/variables.css
 * Design tokens do sistema ForeSail Auth.
 * Alterar aqui propaga para todos os componentes automaticamente.
 */

:root {
  /* ── Paleta ──────────────────────────────── */
  --color-bg:          #060b17;
  --color-card-bg:     rgba(255, 255, 255, 0.07);

  /* CTAs */
  --color-cta:         #2563eb;
  --color-cta-hover:   #1d4fd8;
  --color-cta-shadow:  rgba(37, 99, 235, 0.35);
  --color-cta-shadow-h:rgba(37, 99, 235, 0.48);

  /* Links */
  --color-link:        #4d9fff;

  /* Texto */
  --color-text-primary:#dde4f0;
  --color-text-muted:  rgba(200, 215, 240, 0.40);
  --color-text-label:  rgba(200, 215, 240, 0.52);
  --color-text-footer: rgba(200, 215, 240, 0.28);

  /* Inputs */
  --color-input-bg:           rgba(255, 255, 255, 0.07);
  --color-input-bg-focus:     rgba(255, 255, 255, 0.11);
  --color-input-border:       rgba(255, 255, 255, 0.13);
  --color-input-border-focus: rgba(77, 159, 255, 0.45);
  --color-input-border-error: rgba(239, 68, 68, 0.55);
  --color-input-shadow-focus: rgba(37, 99, 235, 0.12);
  --color-input-shadow-error: rgba(239, 68, 68, 0.08);

  /* Estado de erro */
  --color-error:       #f87171;
  --color-error-bg:    rgba(239, 68, 68, 0.10);
  --color-error-border:rgba(239, 68, 68, 0.30);

  /* Divisores e bordas */
  --color-divider:     rgba(255, 255, 255, 0.10);
  --color-border:      rgba(255, 255, 255, 0.12);
  --color-border-top:  rgba(255, 255, 255, 0.26);

  /* Social buttons */
  --color-social-bg:      rgba(255, 255, 255, 0.07);
  --color-social-bg-hover:rgba(255, 255, 255, 0.12);
  --color-social-border:  rgba(255, 255, 255, 0.13);
  --color-social-border-h:rgba(255, 255, 255, 0.26);
  --color-social-text:    rgba(220, 228, 245, 0.92);

  /* Dropdown */
  --color-dropdown-bg:     rgba(20, 30, 58, 0.80);
  --color-dropdown-border: rgba(255, 255, 255, 0.15);
  --color-dropdown-opt-h:  rgba(255, 255, 255, 0.08);
  --color-dropdown-active: rgba(37, 99, 235, 0.22);

  /* Topbar */
  --color-topbar-bg:     rgba(255, 255, 255, 0.07);
  --color-topbar-bg-h:   rgba(255, 255, 255, 0.12);
  --color-topbar-border: rgba(255, 255, 255, 0.14);
  --color-topbar-border-h:rgba(255, 255, 255, 0.28);
  --color-topbar-text:   rgba(255, 255, 255, 0.75);

  /* ── Tipografia ─────────────────────────── */
  --font-primary: "Sora", -apple-system, BlinkMacSystemFont, sans-serif;

  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 13px;
  --font-size-md:   13.5px;
  --font-size-lg:   14px;
  --font-size-xl:   18px;
  --font-size-2xl:  21px;

  /* ── Espaçamentos ───────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* ── Bordas ─────────────────────────────── */
  --radius-sm:  8px;
  --radius-md:  9px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-2xl: 20px;

  /* ── Transições ─────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.18s ease;
  --transition-slow:   0.25s ease;

  /* ── Z-indexes ──────────────────────────── */
  --z-background:  0;
  --z-glow:        1;
  --z-content:     10;
  --z-dropdown:    200;
}