/*
  Design tokens extraídos de FRAMER_EXTRACTION_AUDIT.md (seções 6, 8, 9, 10).
  REFERENCE DESIGN TOKENS (spacing/radius/breakpoints/motion) e
  TARGET BRAND TOKENS (cores/tipografia) ficam juntos neste arquivo único
  por se tratar de um projeto pequeno (ver react-vite-stack.md §26).
*/

:root {
  /* ---------- Cores (seção 8 da auditoria) ---------- */
  --color-bg: #1b173d;
  --color-overlay-menu: #0f0a4a97;

  --color-accent: #00afff;
  --color-accent-2: #558bfb;

  --color-text-primary: #ffffff;
  --color-text-secondary: #ffffffb3; /* ~70% */
  --color-text-tertiary: #ffffff99;  /* ~60% */
  --color-text-muted: #ffffff80;     /* 50% */
  --color-text-faint: #ffffff40;     /* 25% */
  --color-border-subtle: #ffffff1a;  /* ~10% */

  --color-neutral-100: #f0f0f0;
  --color-neutral-300: #d5d5d5;
  --color-neutral-600: #4d4d4d;
  --color-black: #000000;
  --color-white: #ffffff;

  /* botão primário (pill claro sobre fundo escuro) */
  --color-btn-primary-bg: var(--color-white);
  --color-btn-primary-text: var(--color-bg);

  /* ---------- Tipografia (seção 6) ---------- */
  --font-heading: 'Schibsted Grotesk', 'Schibsted Grotesk Placeholder', sans-serif;
  --font-body: 'Cabin', 'Cabin Placeholder', sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono Placeholder', monospace;
  --font-ui: 'Inter', 'Inter Placeholder', sans-serif;

  --h1-size: 54px;
  --h1-size-mobile: 35px;
  --h1-line-height: 1.1;

  --h2-size: 44px;
  --h2-size-mobile: 32px;
  --h2-line-height: 1.2;

  --h3-size: 19px;
  --h3-line-height: 1.08;

  --eyebrow-size: 14px;
  --eyebrow-line-height: 16px;

  --body-size: 16px;
  --body-line-height: 26px;

  /* ---------- Layout / espaçamento (seções 10, 16) ---------- */
  --container-width: 1200px;
  --section-padding-x: 30px;
  --section-padding-x-tablet: 24px;
  --section-padding-x-mobile: 20px;

  --hero-content-padding: 88px 48px 88px 82px; /* inset esquerdo real medido ao vivo (82px), maior que o direito */
  --hero-content-padding-mobile: 48px 20px;
  --hero-content-gap: 96px;
  --hero-title-gap: 16px;
  --hero-actions-gap: 24px;

  /* ---------- Radius / bordas (seção 9) ---------- */
  --radius-sm: 4px;
  --radius-md: 11px;
  --radius-lg: 16px;

  /* ---------- Breakpoints de referência (confirmados por bisseção ao vivo em
     ejlsystem.framer.website — corte real 767/768px, não 809px como estimado
     na auditoria original; usados manualmente nas media queries) ---------- */
  --bp-desktop: 1200px;
  --bp-tablet: 768px;
  --bp-phone: 390px;

  /* ---------- Service Section: diagrama/cards (aproximado a partir do
     vídeo enviado pelo usuário — tons exatos não confirmados via API) ---------- */
  --color-flow-line: #7c6cff;
  --color-flow-dot: #ff6a3d;
  --color-flow-border: rgba(130, 120, 255, 0.25);
  --color-flow-core-1: #ff9a4d;
  --color-flow-core-2: #ff4d4d;

  /* ---------- z-index ---------- */
  --z-particles-bg: -1;
  --z-hero-bg: 0;
  --z-hero-content: 1;
  --z-header: 10;
  --z-menu-overlay: 50;

  /* ---------- Motion timing (seção 12) ---------- */
  --ease-entry: cubic-bezier(0.44, 0, 0.56, 1);
  --ease-overlay-enter: cubic-bezier(0.5, 0, 0.88, 0.77);
  --ease-overlay-exit: cubic-bezier(0.12, 0.23, 0.5, 1);
  --duration-entry: 0.6s;
  --duration-fast: 0.28s;
  --duration-overlay: 0.4s;
}