/* ============================================================
   AvaloHost design tokens — shared across marketing pages.
   Loaded BEFORE per-page stylesheets so per-page rules can
   override via :root or scoped selectors.
   ============================================================ */

:root {
  /* ── Core palette ─────────────────────────────────────────── */
  --bg: #07060b;
  --bg-elev: #0f0c16;
  --purple-core: #7a4dff;
  --purple-glow: #9f6bf5;
  --purple-deep: #4b3de0;
  --purple-trace: #c9b8ff;
  --text: #fafafe;
  --text-body: #cccccc;
  --text-muted: #888888;
  --status-ok: #00ff9d;

  /* ── Backwards-compat aliases (used by hero & nav) ───────── */
  --accent-color: var(--purple-glow);
  --text-white: var(--text);

  /* ── Glass surfaces ──────────────────────────────────────── */
  --glass-fill: rgba(15, 12, 22, 0.4);
  --glass-fill-strong: rgba(15, 12, 22, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hot: rgba(255, 255, 255, 0.18);
  --glass-bg: rgba(255, 255, 255, 0.05); /* legacy alias */
  --glass-highlight: rgba(255, 255, 255, 0.15); /* legacy alias */
  --glass-blur: 20px;

  /* ── Geometry — squared, not pill ───────────────────────── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-luxury: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 900ms;

  /* ── Legacy animation aliases ────────────────────────────── */
  --fluid-shape: 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  --fluid-move: 0.8s cubic-bezier(0.25, 1, 0.5, 1);

  /* ── Layout ──────────────────────────────────────────────── */
  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 64px);

  /* ── Court scene (maps claude-test oklch tokens to palette) ─ */
  --court-accent: var(--purple-glow);
  --court-accent-soft: rgba(159, 107, 245, 0.18);
  --court-text-2: var(--text-body);
  --court-text-3: var(--text-muted);
  --court-line: rgba(255, 255, 255, 0.08);
  --court-line-strong: rgba(255, 255, 255, 0.14);
  --court-surface: rgba(19, 15, 34, 1);
  --court-bg-2: rgba(12, 9, 22, 1);

  /* ── Z layers ────────────────────────────────────────────── */
  --z-base: 0;
  --z-content: 10;
  --z-header: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}