/* ==========================================================================
   TOKENS — cópia controlada de design-system/tokens.css (não editar aqui;
   overrides de marca vivem em brand.css). Fonte: design-system/tokens.css.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     COR — Fundos
     A referência usa três pretos muito próximos para criar profundidade
     entre seções sem quebrar a continuidade do dark.
     -------------------------------------------------------------------- */
  --color-bg-primary: #050505;     /* fundo padrão do site */
  --color-bg-deep: #030303;        /* seções imersivas / storytelling */
  --color-bg-soft: #070707;        /* respiro intermediário em gradientes */

  /* --------------------------------------------------------------------
     COR — Texto (escala de branco por opacidade, valores reais)
     A hierarquia de texto é feita por alpha, nunca por cinzas sólidos.
     -------------------------------------------------------------------- */
  --color-text-primary: #ffffff;
  --color-text-strong: rgba(255, 255, 255, 0.9);    /* headings de apoio */
  --color-text-secondary: rgba(255, 255, 255, 0.82);/* corpo sobre imagem */
  --color-text-body: rgba(255, 255, 255, 0.65);     /* corpo padrão .60–.68 */
  --color-text-muted: rgba(255, 255, 255, 0.55);    /* apoio .55–.58 */
  --color-text-faint: rgba(255, 255, 255, 0.48);    /* legendas .48–.50 */
  --color-text-ghost: rgba(255, 255, 255, 0.4);     /* labels apagados .40–.42 */

  /* --------------------------------------------------------------------
     COR — Acentos
     -------------------------------------------------------------------- */
  --color-accent-primary: #bfeeff;
  --color-accent-primary-rgb: 191, 238, 255;
  --color-accent-secondary-rgb: 216, 194, 255;
  --color-accent-hover-bg: #effbff;                 /* hover do botão primário */
  --color-on-accent: #000000;

  /* --------------------------------------------------------------------
     COR — Bordas e linhas
     -------------------------------------------------------------------- */
  --color-border-subtle: rgba(255, 255, 255, 0.1);
  --color-border-default: rgba(255, 255, 255, 0.12);
  --color-border-medium: rgba(255, 255, 255, 0.15);
  --color-border-strong: rgba(255, 255, 255, 0.2);
  --color-border-emphasis: rgba(255, 255, 255, 0.3);
  --color-border-accent: rgba(var(--color-accent-primary-rgb), 0.42);
  --color-border-accent-strong: rgba(var(--color-accent-primary-rgb), 0.55);

  /* --------------------------------------------------------------------
     SUPERFÍCIES — gradientes e vidros (valores literais da referência)
     -------------------------------------------------------------------- */
  --surface-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018));
  --surface-glass-accent: linear-gradient(155deg, rgba(var(--color-accent-primary-rgb), 0.085), rgba(255, 255, 255, 0.026));
  --surface-editorial: linear-gradient(155deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.024));
  --surface-card-tint: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  --surface-soft: radial-gradient(ellipse at 50% 0%, rgba(var(--color-accent-primary-rgb), 0.08), transparent 60%), rgba(255, 255, 255, 0.025);
  --surface-raised: rgba(255, 255, 255, 0.04);
  --surface-pressed: rgba(255, 255, 255, 0.1);

  /* --------------------------------------------------------------------
     ELEVAÇÃO — sombras profundas + inset highlight
     -------------------------------------------------------------------- */
  --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --inset-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --shadow-elevation-1: 0 24px 90px rgba(0, 0, 0, 0.35);
  --shadow-elevation-2: 0 30px 90px rgba(0, 0, 0, 0.42);
  --shadow-elevation-3: 0 40px 120px rgba(0, 0, 0, 0.55);
  --shadow-elevation-4: 0 44px 130px rgba(0, 0, 0, 0.58);
  --shadow-hover-lift: 0 38px 110px rgba(0, 0, 0, 0.55), 0 0 60px rgba(var(--color-accent-primary-rgb), 0.08);
  --shadow-focus-glow: 0 0 90px rgba(var(--color-accent-primary-rgb), 0.14);
  --glow-accent-soft: 0 0 42px rgba(var(--color-accent-primary-rgb), 0.28);
  --glow-accent-strong: 0 0 34px rgba(var(--color-accent-primary-rgb), 0.72);

  /* --------------------------------------------------------------------
     BLUR
     -------------------------------------------------------------------- */
  --blur-glass: 18px;         /* cards de vidro */
  --blur-nav: 40px;           /* navegação flutuante */
  --blur-tag: 16px;           /* pills / tags sobre imagem */
  --blur-orb: 22px;           /* orbes de glow decorativos */

  /* --------------------------------------------------------------------
     TIPOGRAFIA — famílias
     -------------------------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Playfair Display", "Georgia", "Times New Roman", serif;

  /* --------------------------------------------------------------------
     TIPOGRAFIA — escala (clamps derivados dos breakpoints reais)
     -------------------------------------------------------------------- */
  --text-display-xl: clamp(3rem, 8vw, 6.6rem);        /* hero */
  --text-display-lg: clamp(2.5rem, 6vw, 4.6rem);      /* manifesto / CTA */
  --text-display-md: clamp(2.25rem, 5vw, 3.75rem);    /* headings de seção */
  --text-title-lg: 2.25rem;                            /* títulos de card display */
  --text-title: 1.875rem;                              /* títulos de bloco */
  --text-title-sm: 1.75rem;                            /* títulos de card editorial */
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: 0.9375rem;
  --text-caption: 0.875rem;
  --text-caption-sm: 0.8125rem;
  --text-label: 11px;
  --text-label-sm: 10px;

  /* --------------------------------------------------------------------
     TIPOGRAFIA — tracking e line-height característicos
     -------------------------------------------------------------------- */
  --tracking-body: -0.02em;         /* aplicado no body inteiro */
  --tracking-heading: -0.055em;     /* headings de seção */
  --tracking-display: -0.075em;     /* displays grandes */
  --tracking-display-tight: -0.08em;/* hero / mega */
  --tracking-mega: -0.12em;         /* palavras gigantes de fundo */
  --tracking-display-serif: -0.055em; /* Playfair itálico em displays */
  --tracking-label: 0.24em;         /* eyebrow / labels padrão (.2–.26em) */
  --tracking-label-wide: 0.26em;
  --tracking-label-max: 0.32em;     /* intro de load */

  --leading-hero: 0.88;
  --leading-display: 0.82;          /* displays cinematográficos .82–.86 */
  --leading-heading: 1.02;          /* headings de seção 1.02–1.05 */
  --leading-title: 1;
  --leading-body: 1.65;             /* corpo 1.55–1.75 */
  --leading-caption: 1.55;

  /* --------------------------------------------------------------------
     LAYOUT — containers e espaçamento de seção
     -------------------------------------------------------------------- */
  --container-max: 72rem;           /* 1152px — largura padrão de seção */
  --container-narrow: 48rem;        /* 768px — FAQ / conteúdo textual */
  --container-wide: 80rem;          /* 1280px — shells de storytelling */
  --container-pad: 20px;
  --container-pad-md: 32px;

  --section-pad-y: clamp(6rem, 10vw, 8rem);       /* py-24 → md:py-32 */
  --section-pad-y-lg: clamp(7rem, 12vw, 10rem);   /* py-28 → md:py-40 */

  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.125rem;   /* gap padrão entre cards: 18px */
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 3.5rem;    /* mt-14: distância header → grid da seção */

  /* --------------------------------------------------------------------
     RAIO
     -------------------------------------------------------------------- */
  --radius-tile: 8px;
  --radius-media: 26px;
  --radius-panel: 28px;
  --radius-card: 30px;
  --radius-card-lg: 32px;
  --radius-card-xl: 36px;
  --radius-hero-panel: 38px;
  --radius-pill: 999px;

  /* --------------------------------------------------------------------
     MOVIMENTO — durações e easings (valores literais)
     -------------------------------------------------------------------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-linear: linear;

  --duration-state: 0.3s;
  --duration-hover: 0.35s;
  --duration-hover-lg: 0.55s;
  --duration-focus: 0.45s;
  --duration-media-hover: 0.7s;
  --duration-reveal: 0.9s;
  --duration-mask: 1s;
  --duration-nav-in: 1.05s;
  --duration-hero-text: 1.1s;
  --duration-media-mask: 1.25s;
  --duration-hero-zoom: 1.8s;
  --duration-hero-load: 2.2s;
  --duration-marquee: 28s;

  --stagger-step: 90ms;

  /* Delays coreografados da entrada do hero (sequência real) */
  --delay-hero-1: 0.18s;  /* eyebrow */
  --delay-hero-2: 0.25s;  /* linha 1 do título */
  --delay-hero-3: 0.42s;  /* linha 2 do título */
  --delay-hero-4: 0.68s;  /* parágrafo + CTAs */
  --delay-hero-5: 0.82s;  /* aside lateral */
  --delay-hero-6: 0.95s;  /* label vertical */

  /* --------------------------------------------------------------------
     ATMOSFERA — grid técnico, noise e glows fixos
     -------------------------------------------------------------------- */
  --grid-line-color: rgba(255, 255, 255, 0.035);
  --grid-size: 88px;
  --grid-size-mobile: 56px;
  --grid-opacity: 0.34;
  --noise-opacity: 0.08;
  --glow-ambient-1: rgba(var(--color-accent-primary-rgb), 0.075);
  --glow-ambient-2: rgba(var(--color-accent-secondary-rgb), 0.055);

  /* --------------------------------------------------------------------
     Z-INDEX
     -------------------------------------------------------------------- */
  --z-content: 1;
  --z-rail: 90;
  --z-nav: 100;
  --z-overlay: 999;

  /* --------------------------------------------------------------------
     FOCO VISÍVEL
     -------------------------------------------------------------------- */
  --focus-ring: 2px solid rgba(var(--color-accent-primary-rgb), 0.85);
  --focus-ring-offset: 3px;
}