/**
 * Hangare AI Design System — Production Tokens CSS (Versão 7 / v7.0.0 — Cubo Itaú Palette Edition)
 * File: css/tokens.css
 * Client: hangare-ai | Job: site-hangare-ia-v7 | Version: 7.0.0
 * 
 * Stack: HTML5 + CSS Variables + Tailwind CSS 3.4 (prefix: tw-) + Three.js WebGL + GSAP 3.9.1 + Lenis
 * Palette Reference: Official Cubo Itaú Design System (https://cubo.itau/)
 *   --Primrias-Preto: #000000
 *   --Primrias-Branco: #FFFFFF
 *   --Primrias-Blue: #4261FF (Hover: #4C6FFF / Bright: #6C87FF)
 *   --Primrias-Pink: #FF50D6 (Deep: #E52397)
 *   --Cubo-Itau-Orange: #E96800 / #FF6201
 *   --Primrias-Grey: #E8E8E8
 *   --Neutral-Medium-2: #B5BDC9
 *   --Apoio-Grafite-5: #F9F9F9
 *   --Apoio-Grafite-90: #272727
 */

/* ==========================================================================
   1. ROOT VARIABLES — CUBO ITAÚ DARK CARBON EDITION (DEFAULT THEME — V7.0.0)
   ========================================================================== */
:root,
[data-theme="dark"],
.theme-dark {
  /* Native Cubo Itaú Tokens (Exact CSS Variables from cubo.itau) */
  --Primrias-Preto: #000000;
  --Primrias-Branco: #FFFFFF;
  --Primrias-Blue: #4261FF;
  --Primrias-Pink: #FF50D6;
  --Primrias-Grey: #E8E8E8;
  --Neutral-Medium-2: #B5BDC9;
  --Apoio-Grafite-5: #F9F9F9;
  --Apoio-Grafite-50: #FFFFFF;
  --Apoio-Grafite-90: #272727;
  --Cubo-Orange: #E96800;
  --Cubo-Orange-Bright: #FF6201;

  /* Surface Hierarchies & Canvas — Cubo Itaú Carbon & Grafite */
  --hg-canvas: #000000;
  --hg-bg-canvas: #000000;
  --bg-canvas: #000000;

  --hg-surface-1: #111111;
  --hg-bg-surface-1: #111111;
  --bg-surface-1: #111111;

  --hg-surface-2: #161616;
  --hg-bg-surface-2: #161616;
  --bg-surface-2: #161616;

  --hg-surface-3: #272727;
  --hg-bg-surface-3: #272727;
  --bg-surface-3: #272727;

  /* V7 Glassmorphism & Double-Bezel Surfaces (Cubo Blue + Pink Rim) */
  --hg-bg-bezel-outer: rgba(66, 97, 255, 0.055);
  --bg-bezel-outer: rgba(66, 97, 255, 0.055);
  --hg-glass-surface: rgba(17, 17, 17, 0.80);
  --hg-glass-surface-elevated: rgba(22, 22, 22, 0.88);
  --hg-glass-border-inner: rgba(66, 97, 255, 0.34);

  --hg-bg-glass-header: rgba(0, 0, 0, 0.84);
  --bg-glass-header: rgba(0, 0, 0, 0.84);
  --hg-header-backdrop: blur(20px) saturate(175%);

  /* Ink Hierarchy (Text & Foreground) — Cubo Itaú Neutrals */
  --hg-ink-primary: #FFFFFF;
  --hg-text-primary: #FFFFFF;
  --text-primary: #FFFFFF;

  --hg-ink-secondary: #B5BDC9;
  --hg-text-secondary: #B5BDC9;
  --text-secondary: #B5BDC9;

  --hg-ink-muted: #919191;
  --hg-text-muted: #919191;
  --text-muted: #919191;

  --hg-ink-on-accent: #FFFFFF;
  --hg-text-on-accent: #FFFFFF;
  --text-on-accent: #FFFFFF;

  /* Brand Foundation & Accents — Cubo Electric Blue #4261FF + Pink #FF50D6 + Orange #E96800 */
  --hg-brand-primary: #4261FF;
  --brand-primary: #4261FF;

  --hg-accent-luminous: #4261FF;
  --hg-brand-accent-bright: #6C87FF;
  --brand-accent-bright: #6C87FF;

  --hg-accent-secondary: #FF50D6;
  --hg-accent-warm: #E96800;

  /* CTA Button Invariants (Cubo Itaú Primary Button: #4261FF bg + #FFFFFF text) */
  --hg-cta-primary-bg: #4261FF;
  --hg-cta-primary-hover: #4C6FFF;
  --hg-cta-primary-text: #FFFFFF;
  --hg-cta-orb-bg: rgba(255, 255, 255, 0.18);

  /* Borders & Micro-Elevation */
  --hg-border-subtle: rgba(232, 232, 232, 0.14);
  --border-subtle: rgba(232, 232, 232, 0.14);

  --hg-border-strong: rgba(232, 232, 232, 0.28);
  --border-strong: rgba(232, 232, 232, 0.28);

  --hg-border-accent: rgba(66, 97, 255, 0.45);
  --border-accent: rgba(66, 97, 255, 0.45);

  --hg-border-pink: rgba(255, 80, 214, 0.42);
  --hg-border-orange: rgba(233, 104, 0, 0.42);

  --hg-highlight-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
  --highlight-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.12);

  --hg-shadow-elevated: 0 24px 48px -12px rgba(0, 0, 0, 0.92), 0 0 28px -4px rgba(66, 97, 255, 0.22);
  --shadow-elevated: 0 24px 48px -12px rgba(0, 0, 0, 0.92), 0 0 28px -4px rgba(66, 97, 255, 0.22);
  --hg-shadow-bezel-glow: 0 28px 60px -12px rgba(0, 0, 0, 0.95), 0 0 36px -6px rgba(66, 97, 255, 0.34), 0 0 22px -8px rgba(255, 80, 214, 0.24);

  --hg-focus-ring: 0 0 0 2px #000000, 0 0 0 4px #4261FF;
  --focus-ring: 0 0 0 2px #000000, 0 0 0 4px #4261FF;

  /* V7 3D WebGL Scene & Neural Mesh Synchronized Variables (Cubo Tri-Chromatic) */
  --hg-3d-ambient-color: #161616;
  --hg-3d-rim-primary: #4261FF;
  --hg-3d-rim-secondary: #FF50D6;
  --hg-3d-rim-tertiary: #E96800;
  --hg-3d-core-surface: #111111;
  --hg-3d-core-wireframe: #4261FF;
  --hg-3d-fog-color: #000000;
  --hg-3d-stage-opacity: 0.92;

  --hg-fx-node-core: #4261FF;
  --fx-node-core: #4261FF;

  --hg-fx-node-primary: #FF50D6;
  --fx-node-primary: #FF50D6;

  --hg-fx-edge-line: rgba(66, 97, 255, 0.22);
  --fx-edge-line: rgba(66, 97, 255, 0.22);

  --hg-fx-hub-glow: rgba(255, 80, 214, 0.26);
  --fx-hub-glow: rgba(255, 80, 214, 0.26);

  /* Semantic Alerts (Cubo Aligned) */
  --hg-color-success: #12F276;
  --hg-color-warning: #E96800;
  --hg-color-danger: #F2545B;
  --hg-color-info: #4261FF;

  /* Color Scheme Indicator */
  color-scheme: dark;
}

/* ==========================================================================
   2. LIGHT EDITORIAL THEME (CUBO ITAÚ DAYLIGHT — #F9F9F9 / #FFFFFF / #E8E8E8)
   ========================================================================== */
[data-theme="light"],
.theme-light {
  /* Surface Hierarchies & Canvas — Cubo Itaú Apoio Grafite 5 & Primrias Grey */
  --hg-canvas: #F9F9F9;
  --hg-bg-canvas: #F9F9F9;
  --bg-canvas: #F9F9F9;

  --hg-surface-1: #FFFFFF;
  --hg-bg-surface-1: #FFFFFF;
  --bg-surface-1: #FFFFFF;

  --hg-surface-2: #F2F2F2;
  --hg-bg-surface-2: #F2F2F2;
  --bg-surface-2: #F2F2F2;

  --hg-surface-3: #E8E8E8;
  --hg-bg-surface-3: #E8E8E8;
  --bg-surface-3: #E8E8E8;

  /* V7 Glassmorphism & Double-Bezel Surfaces (Light) */
  --hg-bg-bezel-outer: rgba(66, 97, 255, 0.05);
  --bg-bezel-outer: rgba(66, 97, 255, 0.05);
  --hg-glass-surface: rgba(255, 255, 255, 0.88);
  --hg-glass-surface-elevated: rgba(242, 242, 242, 0.94);
  --hg-glass-border-inner: rgba(66, 97, 255, 0.28);

  --hg-bg-glass-header: rgba(249, 249, 249, 0.90);
  --bg-glass-header: rgba(249, 249, 249, 0.90);
  --hg-header-backdrop: blur(20px) saturate(160%);

  /* Ink Hierarchy (Text & Foreground — Cubo Itaú Light) */
  --hg-ink-primary: #000000;
  --hg-text-primary: #000000;
  --text-primary: #000000;

  --hg-ink-secondary: #272727;
  --hg-text-secondary: #272727;
  --text-secondary: #272727;

  --hg-ink-muted: #666666;
  --hg-text-muted: #666666;
  --text-muted: #666666;

  --hg-ink-on-accent: #FFFFFF;
  --hg-text-on-accent: #FFFFFF;
  --text-on-accent: #FFFFFF;

  /* Brand Foundation & Accents */
  --hg-brand-primary: #4261FF;
  --brand-primary: #4261FF;

  --hg-accent-luminous: #4261FF;
  --hg-brand-accent-bright: #4C6FFF;
  --brand-accent-bright: #4C6FFF;
  --hg-brand-accent-text-light: #4261FF;

  --hg-accent-secondary: #E52397;
  --hg-accent-warm: #E96800;

  /* CTA Button Invariants */
  --hg-cta-primary-bg: #4261FF;
  --hg-cta-primary-hover: #254A9A;
  --hg-cta-primary-text: #FFFFFF;
  --hg-cta-orb-bg: rgba(255, 255, 255, 0.20);

  /* Borders & Micro-Elevation */
  --hg-border-subtle: rgba(0, 0, 0, 0.10);
  --border-subtle: rgba(0, 0, 0, 0.10);

  --hg-border-strong: rgba(0, 0, 0, 0.22);
  --border-strong: rgba(0, 0, 0, 0.22);

  --hg-border-accent: rgba(66, 97, 255, 0.40);
  --border-accent: rgba(66, 97, 255, 0.40);

  --hg-border-pink: rgba(229, 35, 151, 0.36);
  --hg-border-orange: rgba(233, 104, 0, 0.36);

  --hg-highlight-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.90);
  --highlight-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.90);

  --hg-shadow-elevated: 0 18px 36px -10px rgba(0, 0, 0, 0.08), 0 0 18px -2px rgba(66, 97, 255, 0.14);
  --shadow-elevated: 0 18px 36px -10px rgba(0, 0, 0, 0.08), 0 0 18px -2px rgba(66, 97, 255, 0.14);
  --hg-shadow-bezel-glow: 0 22px 44px -10px rgba(0, 0, 0, 0.12), 0 0 28px -4px rgba(66, 97, 255, 0.22);

  --hg-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #4261FF;
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #4261FF;

  /* V7 3D WebGL Scene & Neural Mesh Synchronized Variables (Light) */
  --hg-3d-ambient-color: #E8E8E8;
  --hg-3d-rim-primary: #4261FF;
  --hg-3d-rim-secondary: #FF50D6;
  --hg-3d-rim-tertiary: #E96800;
  --hg-3d-core-surface: #F2F2F2;
  --hg-3d-core-wireframe: #4261FF;
  --hg-3d-fog-color: #F9F9F9;
  --hg-3d-stage-opacity: 0.76;

  --hg-fx-node-core: #4261FF;
  --fx-node-core: #4261FF;

  --hg-fx-node-primary: #E52397;
  --fx-node-primary: #E52397;

  --hg-fx-edge-line: rgba(66, 97, 255, 0.16);
  --fx-edge-line: rgba(66, 97, 255, 0.16);

  --hg-fx-hub-glow: rgba(255, 80, 214, 0.18);
  --fx-hub-glow: rgba(255, 80, 214, 0.18);

  /* Semantic Alerts */
  --hg-color-success: #216B57;
  --hg-color-warning: #E96800;
  --hg-color-danger: #D64D15;
  --hg-color-info: #4261FF;

  /* Color Scheme Indicator */
  color-scheme: light;
}

/* ==========================================================================
   3. GEOMETRY, RADII & DOUBLE-BEZEL TOKENS (THEME INDEPENDENT)
   ========================================================================== */
:root {
  /* Double-Bezel Geometry */
  --hg-radius-outer: 24px;
  --hg-radius-bezel-outer: 24px;
  --hg-bezel-gap: 6px;
  --hg-radius-inner: 18px;
  --hg-radius-bezel-inner: 18px;
  --hg-radius-inner-compact: 16px;
  --hg-radius-md: 12px;
  --hg-radius-pill: 9999px;

  /* Layout Boundaries & Touch Floors */
  --hg-container-max: 1280px;
  --hg-container-px: 1.25rem;
  --hg-touch-min: 48px;

  /* Typographic Font Stacks */
  --hg-font-display: 'Manrope', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Manrope', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --hg-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --hg-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Fluid Typography Scale */
  --hg-text-h1: clamp(2.35rem, 4.4vw + 1rem, 4.25rem);
  --hg-text-h2: clamp(1.85rem, 3vw + 0.75rem, 3rem);
  --hg-text-h3: clamp(1.25rem, 1.5vw + 0.6rem, 1.65rem);
  --hg-text-kpi: clamp(2rem, 3.2vw + 0.8rem, 3.25rem);
  --hg-text-lead: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  --hg-text-body: 1rem;
  --hg-text-sm: 0.875rem;
  --hg-text-badge: 0.75rem;

  /* Motion Curves */
  --hg-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --hg-ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --hg-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --hg-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Motion Durations */
  --hg-dur-press: 100ms;
  --hg-dur-micro: 160ms;
  --hg-dur-ui: 220ms;
  --hg-dur-drawer: 320ms;
  --hg-dur-reveal: 650ms;
  --hg-dur-ticker: 900ms;
}

@media (min-width: 768px) {
  :root {
    --hg-container-px: 2.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --hg-container-px: 4rem;
  }
}

/* ==========================================================================
   4. ACCESSIBLE FOCUS, THEME TRANSITIONS & BASE SAFEGUARDS
   ========================================================================== */

/* Universal Focus Ring */
:focus-visible {
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  box-shadow: var(--hg-focus-ring) !important;
}

/* Smooth Theme Polarity Crossfade Class */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition: background-color 220ms var(--hg-ease-out),
              border-color 220ms var(--hg-ease-out),
              color 220ms var(--hg-ease-out),
              box-shadow 220ms var(--hg-ease-out) !important;
}

/* Tabular Numbers Enforcement for Financial Precision & KPI Tickers */
.tabular-nums,
[data-tabular-nums="true"],
.hg-kpi-value,
.hg-roi-output {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1, "zero" 1 !important;
}

/* ==========================================================================
   5. DOUBLE-BEZEL V7 & CORE COMPONENT STYLES
   ========================================================================== */

.hg-bezel-outer {
  padding: var(--hg-bezel-gap);
  border-radius: var(--hg-radius-bezel-outer);
  background-color: var(--hg-bg-bezel-outer);
  border: 1px solid var(--hg-border-subtle);
  position: relative;
  overflow: hidden;
  transition: border-color var(--hg-dur-ui) var(--hg-ease-out),
              box-shadow var(--hg-dur-ui) var(--hg-ease-out),
              transform var(--hg-dur-ui) var(--hg-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .hg-bezel-outer:hover {
    border-color: var(--hg-border-accent);
    box-shadow: var(--hg-shadow-bezel-glow);
  }
}

.hg-bezel-inner {
  border-radius: var(--hg-radius-bezel-inner);
  background-color: var(--hg-bg-surface-1);
  border: 1px solid var(--hg-glass-border-inner);
  box-shadow: var(--hg-highlight-top), var(--hg-shadow-elevated);
  position: relative;
  z-index: 1;
}

.hg-bezel-inner-compact {
  border-radius: var(--hg-radius-inner-compact);
  background-color: var(--hg-bg-surface-1);
  border: 1px solid var(--hg-glass-border-inner);
  box-shadow: var(--hg-highlight-top), var(--hg-shadow-elevated);
}

/* Button-in-Button CTA Architecture */
.hg-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  min-height: var(--hg-touch-min);
  padding: 0.5rem 0.625rem 0.5rem 1.5rem;
  border-radius: var(--hg-radius-pill);
  background-color: var(--hg-cta-primary-bg);
  color: var(--hg-cta-primary-text);
  font-family: var(--hg-font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--hg-dur-micro) var(--hg-ease-out),
              background-color var(--hg-dur-micro) var(--hg-ease-out),
              box-shadow var(--hg-dur-micro) var(--hg-ease-out);
  cursor: pointer;
}

.hg-cta-btn:active {
  transform: scale(0.98);
  transition-duration: var(--hg-dur-press);
}

.hg-cta-orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--hg-radius-pill);
  background-color: var(--hg-cta-orb-bg);
  color: inherit;
  transition: transform var(--hg-dur-micro) var(--hg-ease-out);
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .hg-cta-btn:hover {
    background-color: var(--hg-cta-primary-hover);
  }
  .hg-cta-btn:hover .hg-cta-orb {
    transform: translate3d(2px, -2px, 0) scale(1.05);
  }
}

/* Floating Glass Header Navigation Island */
.hg-header-island {
  max-width: var(--hg-container-max);
  border-radius: var(--hg-radius-pill);
  background-color: var(--hg-bg-glass-header);
  border: 1px solid var(--hg-border-subtle);
  backdrop-filter: var(--hg-header-backdrop);
  -webkit-backdrop-filter: var(--hg-header-backdrop);
  box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.55), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   6. VESTIBULAR & ACCESSIBILITY OVERRIDES (WCAG AA + V7 3D SAFEGUARDS)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }

  .hg-reveal,
  .hg-bento-card,
  .hg-bento-visual,
  .hg-cta-btn,
  .hg-cta-orb,
  .hg-origin-pulse,
  .hg-sprint-line {
    transform: none !important;
    animation: none !important;
  }

  .hg-marquee-track {
    animation: none !important;
    transform: none !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.75rem !important;
  }

  .hg-marquee-clone {
    display: none !important;
  }
}

/* Prefers-Reduced-Transparency Guard: High-Contrast Solid Backgrounds */
@media (prefers-reduced-transparency: reduce) {
  :root,
  [data-theme="dark"],
  .theme-dark {
    --hg-bg-glass-header: #000000;
    --hg-bg-bezel-outer: #111111;
    --hg-glass-surface: #111111;
    --hg-glass-surface-elevated: #161616;
  }

  [data-theme="light"],
  .theme-light {
    --hg-bg-glass-header: #FFFFFF;
    --hg-bg-bezel-outer: #E8E8E8;
    --hg-glass-surface: #FFFFFF;
    --hg-glass-surface-elevated: #F2F2F2;
  }

  .hg-header-island,
  .hg-mobile-drawer,
  .hg-telemetry-pill {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}