/* =====================================================================
   Acena360 — Design Tokens (CSS Custom Properties)
   Paleta extraída dos logos oficiais (pixels): #FCC006 (gold) + #189C5A (green)
   DNA visual herdado da análise do Cerebrium, adaptado à marca Acena360.
   Use: @import url('./tokens.css'); depois consuma var(--token).
   ===================================================================== */

:root {
  /* ---- 1. PRIMITIVES (cores-base) ---------------------------------- */

  /* Marca (extraídas dos logos) */
  --gold-400: #FFD24D;
  --gold-500: #FCC006;   /* cor PRIMÁRIA da marca */
  --gold-600: #E8AE00;   /* hover do CTA */
  --gold-700: #C99600;
  --gold-050: #FFF6D6;   /* tint claro */

  --green-400: #2DBE74;
  --green-500: #189C5A;  /* cor SECUNDÁRIA (crescimento/resultado) */
  --green-600: #138A4E;
  --green-700: #0F7342;
  --green-050: #D8F1E4;

  /* Ink / neutros escuros (seções dark = bg nativo do logo preto) */
  --ink-950: #0B0D10;    /* hero/mais profundo */
  --ink-900: #111216;    /* seção dark padrão (bg nativo do logo) */
  --ink-850: #16191E;
  --ink-800: #1B1F25;    /* card sobre dark */
  --ink-700: #2A2F37;    /* bordas/input sobre dark */

  /* Texto sobre claro */
  --text-strong: #14181D; /* títulos em seção clara */
  --text: #2C333B;        /* corpo */
  --text-muted: #5C6573;  /* secundário */
  --text-faint: #8A93A1;  /* captions */

  /* Neutros claros (levemente quentes p/ harmonizar com o gold) */
  --white: #FFFFFF;
  --surface: #FAF8F3;     /* fundo de seção clara (off-white quente) */
  --surface-2: #F2EFE7;   /* fundo secundário / card claro */
  --surface-3: #EAE6DB;
  --border: #E2DED3;      /* bordas em seção clara */
  --border-strong: #D2CDBE;

  /* ---- 2. SEMANTIC (uso por intenção) ------------------------------ */
  --accent: var(--gold-500);          /* acento quente único */
  --accent-hover: var(--gold-600);
  --accent-contrast: var(--ink-950);  /* texto sobre o gold (contraste alto) */
  --accent-soft: var(--gold-050);

  --success: var(--green-500);        /* resultado/positivo/crescimento */
  --success-hover: var(--green-600);
  --success-soft: var(--green-050);

  --bg-dark: var(--ink-900);          /* banda escura */
  --bg-dark-deep: var(--ink-950);
  --bg-light: var(--surface);         /* banda clara */
  --bg-light-2: var(--surface-2);

  --text-on-dark: var(--white);
  --text-on-dark-muted: #AEB4BD;
  --text-on-light: var(--text-strong);
  --text-on-light-muted: var(--text-muted);

  --border-on-dark: rgba(255,255,255,0.08);
  --border-on-light: var(--border);

  /* ---- 3. TIPOGRAFIA ----------------------------------------------- */
  /* Famílias (todas gratuitas) */
  --font-display: "Clash Display", "Hanken Grotesk", system-ui, sans-serif; /* hero/títulos, peso leve */
  --font-sans:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;    /* corpo/UI */
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;                 /* eyebrows/labels/números */

  /* Escala (fluida, em clamp) */
  --fs-display-xl: clamp(2.75rem, 7vw, 5.5rem);  /* hero H1 ~86px */
  --fs-display-l:  clamp(2.125rem, 4.6vw, 3.6rem);
  --fs-h2:         clamp(1.6rem, 3.2vw, 2.4rem);
  --fs-h3:         clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead:       clamp(1.0625rem, 1.4vw, 1.25rem);
  --fs-body:       1rem;          /* 16px */
  --fs-small:      0.875rem;      /* 14px */
  --fs-mono:       0.8125rem;     /* 13px eyebrow/label */
  --fs-caption:    0.75rem;       /* 12px */

  /* Pesos */
  --fw-light: 300;     /* hero display */
  --fw-regular: 400;
  --fw-medium: 500;    /* corpo/UI */
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line-height */
  --lh-tight: 1.05;    /* display */
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;  /* corpo */

  /* Tracking */
  --tr-tight: -0.03em; /* display */
  --tr-snug: -0.015em;
  --tr-normal: 0;
  --tr-mono: 0.08em;   /* eyebrow uppercase */

  /* ---- 4. RAIO / BORDA --------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius:    8px;     /* padrão (botões, inputs) */
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;    /* cards/painéis grandes */
  --radius-pill: 999px;

  --border-w: 1px;

  /* ---- 5. ESPAÇAMENTO ---------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;    /* padding de seção vertical */

  /* Container */
  --container-max: 1200px;   /* content central */
  --container-wide: 1360px;  /* full bleed interno */
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- 6. SOMBRA / ELEVÇÃO (sutil, flat) --------------------------- */
  --shadow-xs: 0 1px 2px rgba(17, 18, 22, 0.06);
  --shadow-sm: 0 2px 8px rgba(17, 18, 22, 0.08);
  --shadow-md: 0 8px 24px rgba(17, 18, 22, 0.10);
  --shadow-lg: 0 24px 60px rgba(17, 18, 22, 0.16);
  --shadow-gold: 0 8px 30px rgba(252, 192, 6, 0.35);   /* glow do CTA */
  --shadow-green: 0 8px 30px rgba(24, 156, 90, 0.30);

  /* ---- 7. MOVIMENTO ----------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 450ms;

  /* ---- 8. Z-INDEX -------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ---- 9. EFEITOS DE MARCA ---------------------------------------- */
  --glow-gold: radial-gradient(60% 60% at 50% 0%, rgba(252,192,6,0.18) 0%, rgba(252,192,6,0) 70%);
  --gradient-accent: linear-gradient(120deg, var(--gold-500), var(--green-500));
  --grid-line-dark: rgba(255,255,255,0.04);
}

/* =====================================================================
   10. CLASSES UTILITÁRIAS BASE (opcional)
   ===================================================================== */
.section-dark  { background: var(--bg-dark); color: var(--text-on-dark); }
.section-light { background: var(--bg-light); color: var(--text-on-light); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--gold-500);            /* eyebrow sempre no gold da marca */
  font-weight: var(--fw-medium);
}
.section-dark .eyebrow { color: var(--gold-400); }

/* CTA primário: gold com texto ink (contraste alto, igual ao DNA do Cerebrium) */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  padding: 14px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-on-light);
  font-family: var(--font-sans); font-weight: var(--fw-medium);
  text-decoration: none; padding: 10px 4px;
  transition: color var(--dur) var(--ease-out);
}
.btn-secondary:hover { color: var(--green-600); }
.section-dark .btn-secondary { color: var(--text-on-dark); }
.section-dark .btn-secondary:hover { color: var(--gold-400); }

/* Display hero */
.display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}