:root {
  /* Borders / radii — slightly tighter than soft-SaaS defaults,
     closer to x.ai's crisp panel edges; pills stay full. */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 0.875rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.75rem;
  --radius-full: 9999px;
  /* Shadows — quiet elevation on pure black (less mush, more edge) */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #000 45%, transparent);
  --shadow-md: 0 4px 8px -1px color-mix(in srgb, #000 50%, transparent);
  --shadow-lg: 0 12px 24px -4px color-mix(in srgb, #000 55%, transparent);
  --shadow-xl: 0 24px 40px -8px color-mix(in srgb, #000 65%, transparent);
  --shadow-lift: 0 16px 32px color-mix(in srgb, #000 50%, transparent);
  --shadow-ticket: 0 4px 10px color-mix(in srgb, #000 45%, transparent);
  --shadow-text: 0 2px 20px var(--color-scrim-text);
  /* Brand-derived glows (recolor with --color-accent) */
  --shadow-accent-soft: 0 0 80px -20px var(--color-accent-soft);
  --shadow-accent-glow: 0 0 24px var(--color-accent-glow);
  --shadow-highlight-glow: 0 0 70px -30px var(--color-highlight-glow);
  --shadow-highlight-line: 0 0 22px var(--color-highlight-glow);
  /* Emphasis spectrum glows (recolor with --color-emphasis-*) */
  --shadow-emphasis-line: 0 0 12px var(--color-emphasis-glow);
  --shadow-emphasis-soft:
    0 0 28px -4px var(--color-emphasis-glow-from),
    0 0 36px -6px var(--color-emphasis-glow),
    0 0 28px -4px var(--color-emphasis-glow-to);
  --shadow-emphasis-glow:
    0 0 20px var(--color-emphasis-glow-from),
    0 0 36px var(--color-emphasis-glow),
    0 0 28px var(--color-emphasis-glow-mid),
    0 0 22px var(--color-emphasis-glow-to);
  /* Primary CTA halo: tight rim, not a cloud */
  --btn-emphasis-inset-block: -18%;
  --btn-emphasis-inset-inline: -10%;
  --btn-emphasis-blur: 16px;
  --btn-emphasis-opacity: 0.36;
  --btn-emphasis-opacity-hover: 0.5;
  /* Animation — snappy ease matching polished marketing sites */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-reveal: 600ms;
  /* Nav chip: slide + small settle overshoot (unitless seconds / GSAP back) */
  --nav-indicator-duration: 0.55;
  --nav-indicator-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Reveal / motion offsets */
  --reveal-offset: 1.5rem;
  --hero-word-offset: 1.25rem;
  /* Hero phrase cycle + entrance (unitless seconds for JS parseFloat;
     CSS uses calc(var(--token) * 1s). Lift in rem so GSAP can parse. */
  --hero-phrase-hold: 3.2;
  --hero-phrase-out: 0.45;
  --hero-phrase-in: 0.7;
  --hero-phrase-lift: 1.125rem;
  --hero-phrase-blur: 0.375rem;
  --hero-phrase-pad-end: 0.14em;
  --hero-accent-inset: 0.02em;
  --hero-phrase-fallback-y: 0.35em;
  --hero-word-pad-block: 0.08em;
  --hero-word-line-height: 1.1;
  --hero-entrance-y: 1.5rem;
  --hero-entrance-y-sm: 1rem;
  --hero-scroll-fade-y: -6;
  --hero-scroll-fade-scale: 0.99;
  --hero-scroll-fade-opacity: 0.35;
  --hero-scroll-scrub: 0.6;
  --hero-word-duration: 0.55;
  --hero-word-stagger: 0.035;
  --hero-underline-duration: 0.65;
  --hero-trust-duration: 0.35;
  --hero-bento-stagger: 0.06;
  --hero-icon-size: var(--text-base);
  /* Ask AI pill — product .ai-assistant__launcher, scaled + marketing motion */
  --hero-ask-ai-bg-duration: 8s;
  --hero-ask-ai-float-duration: 3.6s;
  --hero-ask-ai-ring-duration: 4.5s;
  --hero-ask-ai-glow-duration: 2.8s;
  --hero-ask-ai-orb-duration: 7s;
  --hero-ask-ai-icon-twinkle: 2.4s;
  --hero-ask-ai-pill-pad-block: var(--space-5);
  --hero-ask-ai-pill-pad-inline: var(--space-8);
  --hero-ask-ai-pill-pad-block-lg: var(--space-6);
  --hero-ask-ai-pill-pad-inline-lg: var(--space-10);
  --hero-ask-ai-icon-size: 1.75rem;
  --hero-ask-ai-icon-size-lg: 2.25rem;
  --hero-ask-ai-label-size: var(--text-2xl);
  --hero-ask-ai-label-size-lg: var(--text-3xl);
  --hero-ask-ai-kbd-size: var(--text-base);
  --hero-ask-ai-gap: var(--space-4);
  --hero-ask-ai-ring-width: 3px;
  /* Product: sky/cyan sparkle + near-black face (dark admin launcher) */
  --hero-ask-ai-accent: #38bdf8;
  --hero-ask-ai-accent-hot: #22d3ee;
  --hero-ask-ai-accent-soft: color-mix(in srgb, var(--hero-ask-ai-accent) 28%, transparent);
  --hero-ask-ai-surface: #0a0a0b;
  --hero-ask-ai-surface-soft: color-mix(in srgb, var(--hero-ask-ai-surface) 92%, var(--hero-ask-ai-accent) 8%);
  --hero-ask-ai-kbd-bg: color-mix(in srgb, #fff 8%, transparent);
  --hero-ask-ai-kbd-color: color-mix(in srgb, #fff 62%, transparent);
  --hero-ask-ai-kbd-border: color-mix(in srgb, #fff 12%, transparent);
  /* One grayscale for every bento media surface; hover / in-focus clears it. */
  --hero-bento-media-filter: grayscale(1);
  --hero-bento-media-filter-clear: grayscale(0);
  --hero-bento-focus-fade: 0.7s;
  /* Live View globe — product analytics_live_controller + analytics.css */
  --hero-globe-phi-step: 0.0015;
  --hero-globe-theta: 0.18;
  /* Inset orb, not full-bleed — match SpaceXAI Voice tile. */
  --hero-globe-scale: 0.84;
  --hero-globe-session: #2ea8ff;
  --hero-globe-order: #c76bff;
  --hero-globe-land: #0e172b;
  --hero-globe-glow: #142e61;
  /* Seating stage: inset product window on the same ambient family */
  --hero-stage-inset: var(--space-6);
  --hero-stage-inset-bottom: var(--space-12);
  --hero-stage-zoom: 1.36;
  --hero-stage-focus-x: 8%;
  --hero-stage-focus-y: 36%;
  --hero-stage-shop-zoom: 1;
  --hero-stage-shop-focus-x: 50%;
  --hero-stage-shop-focus-y: 50%;
  --hero-stage-shop-focus-x-tight: 0%;
  --hero-stage-shop-focus-y-tight: 42%;
  --hero-shop-card-max: 17rem;
  --hero-shop-live-size: 0.375rem;

  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;
}