/* =============================================================
   GELCAM — Design Tokens
   Proteção contra descargas atmosféricas (SPDA / Para-Raios)
   Marca: vermelho + preto/branco · estética high-tech / elétrica
   Light & Dark via [data-theme]
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@400;500;600;700;800;900&family=Saira:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- BRAND (constant across themes) ---------- */
  --g-red:        #E51B23;   /* primary brand red */
  --g-red-bright: #FF3A44;   /* glow / hover-light / electric edge */
  --g-red-deep:   #AE0F16;   /* press / deep */
  --g-red-ember:  #FF6B4A;   /* warm spark accent */
  --g-spark:      #FFE8C2;   /* hot lightning core */

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-sans:    'Saira', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* fluid-ish scale */
  --t-xs:   0.75rem;    /* 12 */
  --t-sm:   0.8125rem;  /* 13 */
  --t-base: 1rem;       /* 16 */
  --t-md:   1.125rem;   /* 18 */
  --t-lg:   1.375rem;   /* 22 */
  --t-xl:   1.75rem;    /* 28 */
  --t-2xl:  2.25rem;    /* 36 */
  --t-3xl:  clamp(2.5rem, 4vw, 3.25rem);
  --t-4xl:  clamp(3rem, 6vw, 4.75rem);
  --t-5xl:  clamp(3rem, 6.4vw, 6rem);

  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-normal: 1.4;
  --lh-relaxed: 1.65;
  --track-eyebrow: 0.26em;
  --track-display: -0.01em;

  /* ---------- SPACING (8pt) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 168px;

  /* ---------- RADII ---------- */
  --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* ---------- LAYOUT ---------- */
  --content: 1240px;
  --content-narrow: 820px;
  --header-h: 76px;
  --bar-h: 38px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

/* =============================================================
   DARK THEME (default)
   ============================================================= */
:root,
[data-theme="dark"] {
  --bg:         #0A0B0D;
  --bg-2:       #0E1014;
  --surface:    #14171D;
  --surface-2:  #1A1E26;
  --surface-3:  #232833;
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --text:       #F3F5F8;
  --text-muted: #9AA1AC;
  --text-dim:   #646A75;
  --on-red:     #FFFFFF;
  --grid-line:  rgba(255,255,255,0.04);
  --red-tint:   rgba(229,27,35,0.12);
  --red-tint-2: rgba(229,27,35,0.20);
  --shadow:     0 24px 60px -28px rgba(0,0,0,0.75);
  --shadow-red: 0 18px 50px -18px rgba(229,27,35,0.45);
  --hero-from:  #0C0D10;
  --hero-to:    #060708;
  --scrim:      linear-gradient(180deg, rgba(6,7,8,0) 0%, rgba(6,7,8,0.55) 60%, rgba(6,7,8,0.92) 100%);
  color-scheme: dark;
}

/* =============================================================
   LIGHT THEME
   ============================================================= */
[data-theme="light"] {
  --bg:         #FFFFFF;
  --bg-2:       #F4F6F9;
  --surface:    #FFFFFF;
  --surface-2:  #F6F8FB;
  --surface-3:  #ECEFF4;
  --border:        rgba(12,15,20,0.10);
  --border-strong: rgba(12,15,20,0.20);
  --text:       #12151A;
  --text-muted: #565C66;
  --text-dim:   #8A9099;
  --on-red:     #FFFFFF;
  --grid-line:  rgba(12,15,20,0.05);
  --red-tint:   rgba(229,27,35,0.08);
  --red-tint-2: rgba(229,27,35,0.14);
  --shadow:     0 22px 50px -28px rgba(20,28,40,0.30);
  --shadow-red: 0 18px 44px -18px rgba(229,27,35,0.30);
  /* hero stays dramatic-dark in both themes */
  --hero-from:  #0C0D10;
  --hero-to:    #060708;
  --scrim:      linear-gradient(180deg, rgba(6,7,8,0) 0%, rgba(6,7,8,0.5) 60%, rgba(6,7,8,0.9) 100%);
  color-scheme: light;
}