/**
 * Hangare AI Design System — Production Tokens CSS
 * File: staging/design-system/tokens.css -> css/tokens.css
 * Client: hangare-ai | Job: site-hangare-ia | Revision: R01 | Gate: G6 (Checkpoint 13)
 * Scope Hash: 36b6fe80f6a306aea1f03ce597fe10d08cb92341de019525e8e4f08bad4f5e87
 * 
 * Stack: HTML5 + CSS Variables + Tailwind CSS 3 (prefix: tw-) + Vanilla JS + GSAP 3.9.1
 * Note: Pure CSS Variables compatible with Tailwind 3; strictly NO Tailwind 4 @theme or Nuxt.
 */

/* ==========================================================================
   1. ROOT VARIABLES — DARK TECH-LUXURY (FLAGSHIP DEFAULT THEME)
   ========================================================================== */
:root,
[data-theme="dark"],
.theme-dark {
  /* Surface Hierarchies & Canvas */
  --hg-canvas: #030D18;
  --hg-bg-canvas: #030D18;
  --bg-canvas: #030D18;

  --hg-surface-1: #04233E;
  --hg-bg-surface-1: #04233E;
  --bg-surface-1: #04233E;

  --hg-surface-2: #082F52;
  --hg-bg-surface-2: #082F52;
  --bg-surface-2: #082F52;

  --hg-surface-3: #0D3B66;
  --hg-bg-surface-3: #0D3B66;
  --bg-surface-3: #0D3B66;

  --hg-bg-bezel-outer: rgba(255, 255, 255, 0.03);
  --bg-bezel-outer: rgba(255, 255, 255, 0.03);

  --hg-bg-glass-header: rgba(3, 13, 24, 0.78);
  --bg-glass-header: rgba(3, 13, 24, 0.78);
  --hg-header-backdrop: blur(16px) saturate(160%);

  /* Ink Hierarchy (Text & Foreground) */
  --hg-ink-primary: #F8FAFC;
  --hg-text-primary: #F8FAFC;
  --text-primary: #F8FAFC;

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

  --hg-ink-muted: #94A3B8;
  --hg-text-muted: #94A3B8;
  --text-muted: #94A3B8;

  --hg-ink-on-accent: #030D18;
  --hg-text-on-accent: #030D18;
  --text-on-accent: #030D18;

  /* Brand Foundation & Accents */
  --hg-brand-primary: #00A094;
  --brand-primary: #00A094;

  --hg-accent-luminous: #00E5CC;
  --hg-brand-accent-bright: #00E5CC;
  --brand-accent-bright: #00E5CC;

  /* CTA Button Invariants */
  --hg-cta-primary-bg: #00E5CC;
  --hg-cta-primary-hover: #5EEAD4;
  --hg-cta-primary-text: #030D18;
  --hg-cta-orb-bg: rgba(3, 13, 24, 0.14);

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

  --hg-border-strong: rgba(148, 163, 184, 0.26);
  --border-strong: rgba(148, 163, 184, 0.26);

  --hg-border-accent: rgba(0, 229, 204, 0.28);
  --border-accent: rgba(0, 229, 204, 0.28);

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

  --hg-shadow-elevated: 0 24px 48px -12px rgba(2, 8, 16, 0.72), 0 0 24px -4px rgba(0, 160, 148, 0.12);
  --shadow-elevated: 0 24px 48px -12px rgba(2, 8, 16, 0.72), 0 0 24px -4px rgba(0, 160, 148, 0.12);

  --hg-focus-ring: 0 0 0 2px #030D18, 0 0 0 4px #00E5CC;
  --focus-ring: 0 0 0 2px #030D18, 0 0 0 4px #00E5CC;

  /* FX Canvas & Neural Mesh Synchronized Variables */
  --hg-fx-node-core: #00A094;
  --fx-node-core: #00A094;

  --hg-fx-node-primary: #00E5CC;
  --fx-node-primary: #00E5CC;

  --hg-fx-edge-line: rgba(0, 229, 204, 0.14);
  --fx-edge-line: rgba(0, 229, 204, 0.14);

  --hg-fx-hub-glow: rgba(0, 160, 148, 0.24);
  --fx-hub-glow: rgba(0, 160, 148, 0.24);

  /* Semantic Alerts */
  --hg-color-success: #10B981;
  --hg-color-warning: #F59E0B;
  --hg-color-danger: #EF4444;
  --hg-color-info: #38BDF8;

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

/* ==========================================================================
   2. LIGHT EDITORIAL THEME (DAYLIGHT EXECUTIVE & ORIGINAL LOGO GROUND)
   ========================================================================== */
[data-theme="light"],
.theme-light {
  /* Surface Hierarchies & Canvas */
  --hg-canvas: #F8FAFC;
  --hg-bg-canvas: #F8FAFC;
  --bg-canvas: #F8FAFC;

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

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

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

  --hg-bg-bezel-outer: rgba(4, 35, 62, 0.03);
  --bg-bezel-outer: rgba(4, 35, 62, 0.03);

  --hg-bg-glass-header: rgba(248, 250, 252, 0.85);
  --bg-glass-header: rgba(248, 250, 252, 0.85);
  --hg-header-backdrop: blur(16px) saturate(160%);

  /* Ink Hierarchy (Text & Foreground) */
  --hg-ink-primary: #04233E;
  --hg-text-primary: #04233E;
  --text-primary: #04233E;

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

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

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

  /* Brand Foundation & Accents */
  --hg-brand-primary: #00A094;
  --brand-primary: #00A094;

  --hg-accent-luminous: #007A70;
  --hg-brand-accent-bright: #007A70;
  --brand-accent-bright: #007A70;
  --hg-brand-accent-text-light: #006B62;

  /* CTA Button Invariants */
  --hg-cta-primary-bg: #04233E;
  --hg-cta-primary-hover: #082F52;
  --hg-cta-primary-text: #FFFFFF;
  --hg-cta-orb-bg: #00A094;

  /* Borders & Micro-Elevation */
  --hg-border-subtle: #E2E8F0;
  --border-subtle: #E2E8F0;

  --hg-border-strong: #CBD5E1;
  --border-strong: #CBD5E1;

  --hg-border-accent: rgba(0, 160, 148, 0.35);
  --border-accent: rgba(0, 160, 148, 0.35);

  --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 20px 40px -15px rgba(4, 35, 62, 0.08), 0 4px 12px -2px rgba(4, 35, 62, 0.04);
  --shadow-elevated: 0 20px 40px -15px rgba(4, 35, 62, 0.08), 0 4px 12px -2px rgba(4, 35, 62, 0.04);

  --hg-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #007A70;
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #007A70;

  /* FX Canvas & Neural Mesh Synchronized Variables */
  --hg-fx-node-core: #00A094;
  --fx-node-core: #00A094;

  --hg-fx-node-primary: #007A70;
  --fx-node-primary: #007A70;

  --hg-fx-edge-line: rgba(4, 35, 62, 0.12);
  --fx-edge-line: rgba(4, 35, 62, 0.12);

  --hg-fx-hub-glow: rgba(0, 160, 148, 0.14);
  --fx-hub-glow: rgba(0, 160, 148, 0.14);

  /* Semantic Alerts */
  --hg-color-success: #047857;
  --hg-color-warning: #B45309;
  --hg-color-danger: #B91C1C;
  --hg-color-info: #0369A1;

  /* 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: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --hg-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Plus Jakarta Sans', 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 (Apple Physical Physics & Emil Kowalski Damping) */
  --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: Never outline: none without replacement */
: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 & CORE COMPONENT STYLES
   ========================================================================== */

/* Concentric Double-Bezel Architecture */
.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;
}

.hg-bezel-inner {
  border-radius: var(--hg-radius-bezel-inner);
  background-color: var(--hg-bg-surface-1);
  border: 1px solid var(--hg-border-subtle);
  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-border-subtle);
  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 10px 30px -10px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   6. VESTIBULAR & ACCESSIBILITY OVERRIDES (V08 STANDARDS)
   ========================================================================== */

/* Prefers-Reduced-Motion Guard: Zero Spatial Movement, Instant Comprehension */
@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: #030D18;
    --hg-bg-bezel-outer: #04233E;
  }

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

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