/* ============================================================
   variables.css — Design Tokens Táticos Militares (FX Concursos)
   Preto Tático Obsidian + Dourado Latão Militar + Verdes de Elite
   ============================================================ */

:root {

  /* ── Cores da Nova Marca FX Concursos (Baseadas na Logo Águia) ── */
  --color-brand-blue:       #0066FF;  /* Azul Elétrico Principal da Logo */
  --color-brand-blue-glow:  rgba(0, 102, 255, 0.4);
  --color-brand-gold:       #FFC700;  /* Dourado Ouro da Águia */
  --color-brand-gold-glow:  rgba(255, 199, 0, 0.35);

  /* ── Cores de Fundo Táticas (Preto Militar / Obsidian / Azul Deep) ── */
  --color-bg-primary:       #05070D;  /* Preto Tático Profundo */
  --color-bg-secondary:     #0A101D;  /* Grafite / Azul Marinho Militar */
  --color-bg-card:          #0F172A;  /* Container de Card Tático */
  --color-bg-card-hover:    #18233C;  /* Card Elevado Hover */
  --color-bg-glass:         rgba(15, 23, 42, 0.85); /* Glassmorphism Tático */
  --color-border-glass:     rgba(0, 102, 255, 0.25); /* Borda Azul Elétrico */
  --color-border-subtle:    rgba(255, 255, 255, 0.08); /* Borda Sutil */

  /* ── Dourado Latão Militar / Ouro Imperial ───────────────────── */
  --color-gold-100:         #FFFDF0;
  --color-gold-200:         #FBEAA8;
  --color-gold-300:         #F5D061;
  --color-gold-400:         #FFC700;
  --color-gold-500:         #D4AF37;  /* Dourado Oficial */
  --color-gold-600:         #B88B22;
  --color-gold-700:         #99751B;
  --color-gold-800:         #6E510F;

  /* ── Gradientes da Nova Marca ────────────────────────────────── */
  --grad-gold-primary: linear-gradient(
    135deg,
    #FFC700 0%,
    #D4AF37 50%,
    #99751B 100%
  );
  --grad-brand-blue: linear-gradient(
    135deg,
    #0088FF 0%,
    #0055FF 50%,
    #0033B3 100%
  );
  --grad-gold-soft: linear-gradient(
    135deg,
    #FFC700 0%,
    #F5D061 50%,
    #C59B27 100%
  );
  --grad-gold-badge: linear-gradient(
    90deg,
    rgba(0, 102, 255, 0.15) 0%,
    rgba(255, 199, 0, 0.15) 100%
  );
  --grad-bg-hero: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    rgba(0, 102, 255, 0.18) 0%,
    rgba(255, 199, 0, 0.08) 40%,
    transparent 75%
  );
  --grad-military-overlay: linear-gradient(
    180deg,
    rgba(5, 7, 11, 0.4) 0%,
    rgba(5, 7, 11, 0.95) 100%
  );

  /* ── Textos ─────────────────────────────────────────────── */
  --color-text-primary:     #F8FAFC;  /* Off-White Tático */
  --color-text-secondary:   #94A3B8;  /* Cinza Prata Subtítulo */
  --color-text-muted:       #64748B;  /* Cinza Escuro de Suporte */
  --color-text-gold:        #F5D061;  /* Destaque Dourado Brilhante */

  /* ── Status & Destaques de Operação ────────────────────────── */
  --color-success:          #10B981;  /* Verde Operacional / Aprovado */
  --color-success-bg:       rgba(16, 185, 129, 0.12);
  --color-urgency:          #EF4444;  /* Alerta de Edital / Escassez */
  --color-urgency-bg:       rgba(239, 68, 68, 0.12);
  --color-military-green:   #1E2E20;  /* Verde Camuflado de Fundo */

  /* ── Tipografia ─────────────────────────────────────────── */
  --font-primary:     'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display:     'Cinzel', Georgia, serif;

  /* Escala Tipográfica */
  --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 */

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ── Espaçamento ────────────────────────────────────────── */
  --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 */

  /* ── Layout & Alinhamento ───────────────────────────────── */
  --container-max:    1140px;
  --container-wide:   1320px;
  --container-narrow: 760px;
  --container-px:     clamp(1rem, 4vw, 2rem);

  /* ── Bordas & Arredondamento ────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* ── Sombras Táticas com Glow Dourado ────────────────────── */
  --shadow-sm:         0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:         0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg:         0 20px 50px rgba(0, 0, 0, 0.8);
  --shadow-gold-glow:  0 0 30px rgba(212, 175, 55, 0.35);
  --shadow-gold-lg:    0 0 60px rgba(212, 175, 55, 0.25);
  --shadow-card:       0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ── Transições ──────────────────────────────────────────── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-Index ─────────────────────────────────────────────── */
  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-modal:      300;
}