/* ═══════════════════════════════════════════════════════════
   GA DESIGN SYSTEM · tokens.css · v1.0
   Fonte da verdade extraída do site-ga-ultra (GA V3 Home).
   Importável no Claude Design (upload direto ou via repo).
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── CORES OFICIAIS (Manual de Identidade GA) ── */
  --ga-azul-escuro: #29166f;   /* âncora da marca */
  --ga-azul: #0093dd;          /* ação e energia */
  --ga-amarelo: #e5c13b;       /* faísca — usar com parcimônia */

  /* ── RAMPAS DE TRABALHO (derivadas ✨) ── */
  --ga-escuro-900: #120a30;
  --ga-escuro-800: #1a0f4a;
  --ga-indigo-500: #3a2597;
  --ga-indigo-400: #4a2fb0;
  --ga-marinho-900: #05224f;
  --ga-azul-700: #0a63a8;
  --ga-azul-400: #34a8ee;
  --ga-azul-300: #7cc7f4;
  --ga-azul-200: #a6dcfa;
  --ga-azul-100: #cbe8fb;
  --ga-azul-50: #e4f3ff;
  --ga-ouro-700: #8a6c00;
  --ga-ouro-300: #f0d050;
  --ga-ouro-50: #fff8dc;
  --ga-ciano-500: #17a9c9;
  --ga-ciano-700: #087f92;

  /* ── NEUTROS (base branca, frios) ── */
  --ga-branco: #ffffff;
  --ga-neutro-2: #f6f8fc;
  --ga-neutro-3: #e7ebf3;
  --ga-tinta: #1a1030;       /* títulos sobre claro (junto com azul-escuro) */
  --ga-texto: #4a4560;       /* corpo */
  --ga-muted: #6b6880;       /* apoio */
  --ga-linha: #e9edf4;       /* hairlines */

  /* ── TIPOGRAFIA · Figtree (variável 300–900, Google Fonts) ── */
  --ga-fonte: 'Figtree', -apple-system, 'Segoe UI', sans-serif;
  --ga-peso-corpo: 400;
  --ga-peso-medio: 600;
  --ga-peso-ui: 700;
  --ga-peso-hero: 750;       /* exclusivo do H1 do hero */
  --ga-peso-titulo: 800;
  --ga-fs-hero: clamp(2.75rem, 6.4vw, 4.75rem);
  --ga-fs-h2: clamp(2.2rem, 4.2vw, 3.3rem);
  --ga-fs-h3: clamp(1.35rem, 2.2vw, 1.75rem);
  --ga-fs-lead: clamp(1.1rem, 1.5vw, 1.28rem);
  --ga-fs-body: 1.02rem;
  --ga-fs-small: .875rem;
  --ga-track-titulo: -.022em; /* até -.03em nos maiores */
  --ga-track-kicker: .16em;   /* rótulos uppercase: .14em (eyebrow/categorias) a .16em (kicker) */

  /* ── FORMA ── */
  --ga-r-sm: 14px;
  --ga-r-md: 20px;
  --ga-r-lg: 26px;
  --ga-r-xl: 30px;
  --ga-r-pill: 999px;

  /* ── SOMBRAS (sempre tingidas de azul-escuro) ── */
  --ga-sombra: 0 24px 60px -28px rgba(41,22,111,.38);
  --ga-sombra-sm: 0 10px 28px -14px rgba(41,22,111,.3);

  /* ── MOTION ── */
  --ga-ease-suave: cubic-bezier(.22, 1, .36, 1);   /* padrão UI/hover */
  --ga-ease-expo: cubic-bezier(.16, 1, .3, 1);     /* reveals (expo.out) */
  --ga-dur-hover: .3s;
  --ga-dur-reveal: 1.1s;
  --ga-dur-hairline: 1.4s;

  /* ── LAYOUT ── */
  --ga-wrap: 1200px;
  --ga-pad-lateral: clamp(20px, 4vw, 44px);
  --ga-sec-y: clamp(72px, 10vw, 120px);
}

/* ═══ RECEITAS PRONTAS ═══ */

/* degradê metálico dourado (títulos/destaques em itálico) */
.ga-metal-ouro {
  font-style: italic;
  background: linear-gradient(105deg,#b8922a 0%,#e5c13b 26%,#fff3c9 48%,#f0d050 62%,#caa11e 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  background-size: 220% 100%;
  animation: ga-sheen 7s ease-in-out infinite alternate;
  padding-right: .07em; margin-right: -.02em; /* evita corte do itálico */
}

/* degradê metálico azul */
.ga-metal-azul {
  font-style: italic; font-weight: var(--ga-peso-titulo); white-space: nowrap;
  background: linear-gradient(105deg,#073a78 0%,#0a63a8 26%,#34a8ee 45%,#7cc7f4 54%,#0093dd 66%,#0a63a8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  background-size: 220% 100%;
  animation: ga-sheen 7s ease-in-out infinite alternate;
  padding-right: .07em; margin-right: -.02em;
}
@keyframes ga-sheen { from { background-position: 0% 0 } to { background-position: 100% 0 } }

/* liquid glass escuro (nav, chips sobre qualquer fundo) */
.ga-glass-escuro {
  background: linear-gradient(115deg,rgba(24,14,58,.72),rgba(16,9,42,.5) 48%,rgba(24,14,58,.66));
  backdrop-filter: blur(22px) saturate(185%);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 36px -8px rgba(10,6,30,.35),
              inset 0 1px 0 rgba(255,255,255,.26),
              inset 0 -1px 0 rgba(255,255,255,.06);
}

/* liquid glass claro (modais, painéis) */
.ga-glass-claro {
  background: linear-gradient(150deg,rgba(255,255,255,.74),rgba(255,255,255,.52) 55%,rgba(255,255,255,.68));
  backdrop-filter: blur(36px) saturate(190%);
  -webkit-backdrop-filter: blur(36px) saturate(190%);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: 0 40px 90px -30px rgba(10,6,30,.55), inset 0 1px 0 rgba(255,255,255,.95);
}

/* scrim de modal */
.ga-scrim {
  background: rgba(14,8,38,.45);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}

/* botões — hierarquia estrita: 1 primário por tela */
.ga-btn-primario {
  font-family: var(--ga-fonte); font-weight: 700; font-size: .98rem; white-space: nowrap;
  background: var(--ga-azul); color: #fff; border: none; border-radius: var(--ga-r-pill);
  padding: 15px 28px; cursor: pointer; transition: background var(--ga-dur-hover) var(--ga-ease-suave);
}
.ga-btn-primario:hover { background: var(--ga-azul-700) }
.ga-btn-ghost {
  font-family: var(--ga-fonte); font-weight: 700; font-size: .98rem; white-space: nowrap;
  background: transparent; color: var(--ga-azul-escuro);
  border: 1.5px solid var(--ga-neutro-3); border-radius: var(--ga-r-pill);
  padding: 14px 26px; cursor: pointer; transition: border-color var(--ga-dur-hover);
}
.ga-btn-ghost:hover { border-color: var(--ga-azul) }
.ga-btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.32) }
.ga-btn-ghost.on-dark:hover { border-color: var(--ga-azul-300) }
.ga-btn-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ga-fonte); font-weight: 700; font-size: .98rem;
  color: var(--ga-azul-700); text-decoration: none;
  border-bottom: 2px solid var(--ga-azul-200); padding-bottom: 3px;
  transition: border-color var(--ga-dur-hover);
}
.ga-btn-link:hover { border-color: var(--ga-azul) }

/* kicker — rótulo uppercase com traço amarelo */
.ga-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: .8rem; letter-spacing: var(--ga-track-kicker);
  text-transform: uppercase; color: var(--ga-azul-700);
}
.ga-kicker::before { content: ""; width: 26px; height: 2px; background: var(--ga-amarelo); border-radius: 2px }

/* hairline editorial (linha azul sutil + traço amarelo) */
.ga-hairline { position: relative; border-top: 1px solid var(--ga-azul-200) }
.ga-hairline::after {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 76px; height: 1px; background: var(--ga-amarelo);
}