/**
 * WebStar System — Design Tokens v1.0
 * CSS Custom Properties — Sistema de design canônico.
 * Baseado em: docs/designSystem/colors_and_type.css
 *
 * USO: Carregar ANTES de qualquer CSS de componente ou tema.
 * As fontes NÃO são importadas aqui — carregue via <link> no HTML:
 *   CDN: Inter wght@300;400;500;600 + Montserrat wght@500;600;700;800;900
 */

/* ─── Color Tokens ────────────────────────────────────────── */
:root {
  /* Space — Fundos e superfícies */
  --space-default:   #02040A;   /* body background */
  --space-light:     #0A0F1C;   /* navbar, menu mobile, cards elevados */
  --space-lighter:   #131B2F;   /* base glassmorphism */
  --space-800:       #0D1526;   /* intermediário */

  /* Gold — Marca, botões, destaques */
  --gold-primary:    #D4AF37;   /* cor de marca principal */
  --gold-400:        #FDE047;   /* gradient claro, hover */
  --gold-500:        #EAB308;   /* variação intermediária */
  --gold-600:        #CA8A04;   /* gradient escuro, bordas ativas */

  /* Gold RGB (para rgba()) */
  --gold-primary-rgb: 212, 175, 55;

  /* Space RGB (para rgba()) */
  --space-default-rgb: 2, 4, 10;
  --space-light-rgb:   10, 15, 28;
  --space-lighter-rgb: 19, 27, 47;

  /* Text */
  --text-primary:    #E2E8F0;   /* texto corrido principal */
  --text-secondary:  #94A3B8;   /* texto secundário (gray-400) */
  --text-muted:      #64748B;   /* texto terciário (gray-500) */
  --text-inverse:    #02040A;   /* texto sobre fundo gold */

  /* Status */
  --status-success:  #22C55E;   /* green-500 */
  --status-error:    #EF4444;   /* red-500 */
  --status-warning:  #F59E0B;   /* amber-500 */
  --status-info:     #3B82F6;   /* blue-500 */

  /* ─── Typography ────────────────────────────────────────── */
  --font-sans:    'Inter', sans-serif;
  --font-heading: 'Montserrat', sans-serif;

  /* 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 */
  --text-6xl:  3.75rem;    /* 60px */

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

  /* Line heights */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ─── 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 — navbar height */

  /* ─── Radii ─────────────────────────────────────────────── */
  --radius-sm:   0.375rem;   /* 6px  */
  --radius-md:   0.5rem;     /* 8px  */
  --radius-lg:   0.75rem;    /* 12px — buttons */
  --radius-xl:   1rem;       /* 16px — modais, cards */
  --radius-full: 9999px;     /* pills, badges */

  /* ─── Effects ────────────────────────────────────────────── */
  --blur-glass:      12px;
  --blur-footer:     120px;
  --blur-modal:       5px;   /* light — sutil */
  --blur-modal-dark: 20px;   /* dark — glass intenso */

  /* Glass panel */
  --glass-bg:     rgba(19, 27, 47, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

  /* Input */
  --input-bg:           rgba(255, 255, 255, 0.03);
  --input-border:       rgba(255, 255, 255, 0.1);
  --input-focus-border: #D4AF37;
  --input-focus-ring:   rgba(212, 175, 55, 0.2);

  /* Gradients */
  --gradient-gold:      linear-gradient(to right, #FDE047, #D4AF37);
  --gradient-gold-dark: linear-gradient(to right, #D4AF37, #CA8A04);
  --gradient-space:     linear-gradient(135deg, #05051a 0%, #11072b 50%, #0a0514 100%);

  /* Glow */
  --glow-gold:    0 0 20px rgba(212, 175, 55, 0.4);
  --glow-gold-sm: 0 0 15px rgba(212, 175, 55, 0.3);

  /* ─── Transitions ────────────────────────────────────────── */
  --transition-fast:  all 0.15s ease-out;
  --transition-base:  all 0.3s ease-out;
  --transition-modal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Selection ───────────────────────────────────────────── */
::selection {
  background-color: var(--gold-primary);
  color: var(--space-default);
}

/* ─── Utility Classes ─────────────────────────────────────── */

/* Glass panel */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Gold text gradient */
.text-gold-gradient {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glow text */
.text-glow-gold {
  text-shadow: 0 0 20px rgba(var(--gold-primary-rgb), 0.6);
}

/* Input premium */
.input-premium {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: white;
  border-radius: var(--radius-md);
  padding: 0.625rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  width: 100%;
  transition: var(--transition-base);
  outline: none;
}
.input-premium:focus {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 2px var(--input-focus-ring);
}
.input-premium::placeholder { color: var(--text-muted); }

/* Badge gold */
.badge-gold {
  background: rgba(var(--gold-primary-rgb), 0.15);
  color: var(--gold-primary);
  border: 1px solid rgba(var(--gold-primary-rgb), 0.3);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
}