/* ═══════════════════════════════════════════════════════════════════
   Qaxal design tokens - canonical
   ═══════════════════════════════════════════════════════════════════
   Harvested from production on 2026-08-23, not invented:
     - qaxal.com          -> light surface, Geist, --qaxal-* namespace
     - dip.qaxal.com      -> dark surface, brand gradient, hero grid
   Any Qaxal visual work starts here. Do not fork these values.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ─────────────────────────────────────────────────────── */
  --qx-blue: #027bfa;          /* canonical brand blue, both surfaces */
  --qx-blue-deep: #0466d6;     /* solid deep blue, light surface      */
  --qx-blue-grad-start: #005bd1;
  --qx-blue-grad-end: #027bfa;
  --qx-blue-grad: linear-gradient(270deg, #005bd1 0%, #027bfa 100%);
  --qx-blue-lift: #4f8cff;     /* brand lifted for legibility on dark */
  --qx-navy: #0a1628;

  /* ── Status ────────────────────────────────────────────────────── */
  /* Base values are FILL colours (bars, dots, marks). Measured 2026-08-23:
     #00bb7f on white is 2.50:1 and #ef4444 is 3.76:1, so neither may carry
     text on a light surface. Use the -text variants for any glyph.        */
  --qx-good: #00bb7f;
  --qx-good-text: #00875b;     /* 4.55:1 on white */
  --qx-critical: #ef4444;
  --qx-critical-text: #d73d3d; /* 4.54:1 on white */
  --qx-critical-lift: #ff6568; /* critical lifted for dark surfaces   */

  /* ── Light surface (qaxal.com) - the default ───────────────────── */
  --qx-bg: #ffffff;
  --qx-bg-muted: #f7f8fb;
  --qx-surface: #ffffff;
  --qx-fg: #0d1117;
  --qx-fg-muted: #4b5563;
  --qx-fg-subtle: #6b7280;
  --qx-border: #e5e7ef;
  --qx-accent: var(--qx-blue-deep);   /* AA on white */
  --qx-ring: rgba(2, 123, 250, 0.35);
  --qx-hover: rgba(13, 17, 23, 0.04);
  --qx-scrim: rgba(10, 22, 40, 0.5);

  /* ── Type ──────────────────────────────────────────────────────── */
  --qx-font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  --qx-font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace;

  --qx-text-xs: 0.75rem;
  --qx-text-sm: 0.875rem;
  --qx-text-base: 1rem;
  --qx-text-lg: 1.125rem;
  --qx-text-xl: 1.25rem;
  --qx-text-2xl: clamp(1.5rem, 2.2vw, 1.875rem);
  --qx-text-3xl: clamp(1.875rem, 3.2vw, 2.5rem);
  --qx-display: clamp(2.5rem, 6vw, 4.5rem);

  /* Tracking is size-specific. A single letter-spacing is wrong somewhere. */
  --qx-tr-display: -0.035em;
  --qx-tr-head: -0.022em;
  --qx-tr-body: 0em;
  --qx-tr-eyebrow: 0.09em;

  --qx-leading-tight: 1.08;
  --qx-leading-snug: 1.28;
  --qx-leading-body: 1.55;

  /* ── Space, radius, elevation ──────────────────────────────────── */
  --qx-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --qx-section-pad: clamp(4rem, 9vw, 7rem);
  --qx-measure: 1200px;

  --qx-r-sm: 8px;
  --qx-r: 12px;
  --qx-r-lg: 18px;
  --qx-r-xl: 26px;
  --qx-r-pill: 999px;

  --qx-shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.06);
  --qx-shadow: 0 4px 16px rgba(10, 22, 40, 0.08);
  --qx-shadow-lg: 0 18px 40px rgba(10, 22, 40, 0.12);

  /* ── Motion (from dip.qaxal.com) ───────────────────────────────── */
  --qx-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --qx-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --qx-dur-fast: 150ms;
  --qx-dur: 220ms;
  --qx-dur-slow: 700ms;

  /* ── Accessibility ─────────────────────────────────────────────── */
  --qx-tap-min: 44px;
}

/* ── Dark surface (dip.qaxal.com) ────────────────────────────────── */
:root[data-theme="dark"] {
  --qx-bg: hsl(222.2 84% 4.9%);      /* #020817 */
  --qx-bg-muted: #061124;
  --qx-surface: #0c1a2e;
  --qx-fg: #ffffff;
  --qx-fg-muted: rgba(255, 255, 255, 0.72);
  --qx-fg-subtle: rgba(255, 255, 255, 0.5);
  --qx-border: rgba(255, 255, 255, 0.1);
  --qx-accent: var(--qx-blue-lift);  /* AA on navy */
  --qx-hover: rgba(255, 255, 255, 0.04);
  --qx-scrim: rgba(0, 0, 0, 0.6);
  --qx-critical: var(--qx-critical-lift);

  --qx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --qx-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --qx-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --qx-bg: hsl(222.2 84% 4.9%);
    --qx-bg-muted: #061124;
    --qx-surface: #0c1a2e;
    --qx-fg: #ffffff;
    --qx-fg-muted: rgba(255, 255, 255, 0.72);
    --qx-fg-subtle: rgba(255, 255, 255, 0.5);
    --qx-border: rgba(255, 255, 255, 0.1);
    --qx-accent: var(--qx-blue-lift);
    --qx-hover: rgba(255, 255, 255, 0.04);
    --qx-scrim: rgba(0, 0, 0, 0.6);
    --qx-critical: var(--qx-critical-lift);

    --qx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --qx-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --qx-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.45);
  }
}

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