/* =============================================
   DESIGN TOKENS — IEEJ Site
   ============================================= */

:root {
  /* ── Cores Primárias ── */
  --bg-primary: #06060b;
  --bg-secondary: #0d0d16;
  --bg-tertiary: #13131f;
  --bg-card: #16162a;
  --bg-card-hover: #1c1c36;
  --bg-glass: rgba(22, 22, 42, 0.6);
  --bg-glass-strong: rgba(22, 22, 42, 0.85);

  /* ── Accent ── */
  --accent: #bf0000;
  --accent-light: #e61919;
  --accent-dark: #8c0000;
  --accent-glow: rgba(191, 0, 0, 0.35);
  --accent-glow-strong: rgba(191, 0, 0, 0.55);

  /* ── Secondary Accent ── */
  --accent-secondary: #8c0000;
  --accent-secondary-light: #ff4d4d;
  --accent-secondary-glow: rgba(140, 0, 0, 0.3);

  /* ── Gradient ── */
  --gradient-accent: linear-gradient(135deg, #e61919, #8c0000);
  --gradient-accent-hover: linear-gradient(135deg, #ff4d4d, #bf0000);
  --gradient-bg: linear-gradient(180deg, #06060b 0%, #0d0d16 50%, #13131f 100%);
  --gradient-card: linear-gradient(145deg, rgba(191, 0, 0, 0.08), rgba(140, 0, 0, 0.08));
  --gradient-text: linear-gradient(135deg, #ffffff 0%, #a0a0b0 100%);

  /* ── Texto ── */
  --text-primary: #ffffff;
  --text-secondary: #a0a0b8;
  --text-tertiary: #6b6b80;
  --text-accent: #bf0000;

  /* ── Bordas ── */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-light: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(230, 57, 70, 0.3);

  /* ── Tipografia ── */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Outfit', 'Inter', sans-serif;

  --fs-xs: clamp(0.7rem, 0.8vw, 0.8rem);
  --fs-sm: clamp(0.8rem, 0.9vw, 0.9rem);
  --fs-base: clamp(0.9rem, 1vw, 1rem);
  --fs-md: clamp(1rem, 1.15vw, 1.15rem);
  --fs-lg: clamp(1.15rem, 1.35vw, 1.35rem);
  --fs-xl: clamp(1.4rem, 1.8vw, 1.8rem);
  --fs-2xl: clamp(1.8rem, 2.5vw, 2.5rem);
  --fs-3xl: clamp(2.2rem, 3.5vw, 3.5rem);
  --fs-hero: clamp(2.8rem, 5vw, 4.5rem);

  /* ── Espaçamento ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-section: clamp(4rem, 8vw, 8rem);

  /* ── Bordas ── */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* ── Sombras ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--accent-glow);
  --shadow-glow-strong: 0 0 40px var(--accent-glow-strong);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 var(--border-subtle);

  /* ── Transições ── */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --container-max: 1200px;
  --container-wide: 1400px;
  --header-height: 80px;

  /* ── Z-index ── */
  --z-back: -1;
  --z-normal: 1;
  --z-tooltip: 10;
  --z-sticky: 100;
  --z-header: 1000;
  --z-overlay: 2000;
  --z-modal: 3000;
}