/*
 * AUXARA WEB — DESIGN TOKENS (single source of truth for the auxara.io marketing site)
 * Derived 2026-07-03 from the Auxara Dialer design system (locked direction "Calm-led
 * with cockpit atmosphere", iris hue 274, cool neutrals hue 266, Plus Jakarta Sans +
 * JetBrains Mono) — same DNA, marketing-grade treatment: display-scale type, editorial
 * whitespace, mono eyebrows, one iris accent on a near-monochrome night base.
 *
 * This file is the ONLY place raw values live. Preview cards + site code reference
 * these variables; the build script inlines this file into each preview.
 */
:root {
  /* ---- SURFACES · night base (neutral hue 266 — HUED, never flat black) ---- */
  --bg: oklch(0.175 0.024 268);           /* page base (the ambient sits on top) */
  --bg-deep: oklch(0.14 0.022 270);       /* footer / contrast bands */
  --bg-raised: oklch(0.21 0.024 268);     /* solid card fallback */
  --bg-overlay: oklch(0.25 0.024 268);    /* hover surfaces, chips */
  --line: oklch(0.32 0.02 268);           /* hairline borders */
  --line-strong: oklch(0.42 0.018 268);   /* emphasized borders */
  --edge: oklch(1 0 0 / 0.10);            /* the inset top-edge highlight every card carries */

  /* ---- TEXT ---- */
  --text: oklch(0.965 0.004 266);         /* headlines, primary copy */
  --text-soft: oklch(0.76 0.009 266);     /* body, subheads */
  --text-faint: oklch(0.58 0.011 266);    /* captions, small print */

  /* ---- ACCENT · iris (hue 274 — shared brand signature with Auxara Dialer) ---- */
  --iris: oklch(0.68 0.16 274);           /* the accent on dark */
  --iris-strong: oklch(0.78 0.15 274);    /* hover / active */
  --iris-soft: oklch(0.88 0.09 274);      /* tinted text on dark */
  --iris-deep: oklch(0.54 0.16 274);      /* filled-button base */
  --iris-deeper: oklch(0.47 0.15 274);    /* filled-button press */
  --iris-glow: oklch(0.68 0.16 274 / 0.22);   /* ambient glow */
  --iris-wash: oklch(0.68 0.16 274 / 0.08);   /* tinted surface wash */

  /* ---- STATES (same hues as the Dialer ramps) ---- */
  --ok: oklch(0.70 0.16 158);
  --warn: oklch(0.78 0.15 78);
  --danger: oklch(0.68 0.17 25);

  /* ---- TYPE ---- */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* display scale (marketing-only — the app caps at 30px; the site speaks louder) */
  --display-1: clamp(2.75rem, 5.2vw + 1rem, 4.75rem);   /* hero headline */
  --display-2: clamp(2rem, 3.2vw + 0.75rem, 3rem);      /* section headline */
  --heading: clamp(1.375rem, 1.2vw + 1rem, 1.625rem);   /* card / block title */
  --subhead: 1.125rem;                                   /* lede under headlines */
  --body: 1rem;
  --small: 0.875rem;
  --micro: 0.75rem;                                      /* eyebrows, small print */

  --leading-display: 1.05;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;   /* wordmark + display headlines */

  --tracking-display: -0.025em;  /* tight display tracking */
  --tracking-eyebrow: 0.14em;    /* mono eyebrows, uppercase */

  /* ---- SPACE (8px grid) + SECTION RHYTHM ---- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --section-y: clamp(4.5rem, 9vw, 8rem);   /* vertical rhythm between page sections */
  --width-content: 72rem;                   /* page content max-width */
  --width-prose: 42rem;                     /* long-copy measure */

  /* ---- RADIUS (same scale as the Dialer) ---- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---- MOTION (same grammar as the Dialer) ---- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 480ms;   /* the hero entrance sequence — staggered per-element via --i */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1.05);

  /* ---- ELEVATION (inset --edge highlight = the dialer's grounded-card signature) ---- */
  --shadow-card: 0 1px 2px oklch(0 0 0 / 0.3), 0 8px 24px -10px oklch(0 0 0 / 0.45), inset 0 1px 0 var(--edge);
  --shadow-raised: 0 2px 4px oklch(0 0 0 / 0.35), 0 16px 48px -12px oklch(0 0 0 / 0.5), inset 0 1px 0 var(--edge);
  --shadow-glow: 0 0 0 1px var(--iris-wash), 0 4px 24px var(--iris-glow);
  --shadow-card-glow: 0 0 34px -8px var(--iris-glow);              /* resting bloom */
  --shadow-live: 0 0 56px -6px oklch(0.68 0.16 274 / 0.4), 0 0 24px -4px oklch(0.68 0.16 274 / 0.4); /* THE one live glow (final CTA) */

  /* ---- ATMOSPHERE (ported from the Dialer's cockpit ambient — hue-shifted blooms, never flat) ---- */
  --ambient-page:
    radial-gradient(90% 64% at 6% 0%, oklch(0.30 0.10 268) 0%, transparent 48%),
    radial-gradient(80% 60% at 98% 4%, oklch(0.30 0.09 210) 0%, transparent 44%),
    radial-gradient(120% 90% at 88% 100%, oklch(0.26 0.10 320) 0%, transparent 52%),
    linear-gradient(160deg, oklch(0.185 0.026 266), oklch(0.15 0.024 288));
  --brand-mark: linear-gradient(135deg, oklch(0.78 0.15 274), oklch(0.75 0.13 210)); /* wordmark + ONE gradient phrase */

  /* ---- GLASS (the Dialer's two frost tiers, dark recipe) ---- */
  --glass:
    linear-gradient(158deg, oklch(0.68 0.16 274 / 0.20), oklch(0.6 0.168 274 / 0.06) 46%, transparent),
    oklch(0.4 0.13 274 / 0.32);
  --glass-soft:
    linear-gradient(158deg, oklch(0.68 0.16 274 / 0.10), oklch(0.6 0.168 274 / 0.03) 50%, transparent),
    oklch(0.26 0.024 268 / 0.55);
  --glass-edge: oklch(0.78 0.15 274 / 0.34);
  --glass-top: inset 0 1px 0 oklch(0.88 0.09 274 / 0.32);
  --glass-backdrop: blur(30px) saturate(1.2);

  /* ---- MOTION (semantic alias — every interactive element shares it) ---- */
  --transition-interactive:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard),
    background var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);

  /* ---- TAP TARGETS ---- */
  --tap-min: 44px;
}

/* Light mode variant (secondary — the site ships dark-primary; kept tokenized so a
   light treatment can be derived without re-deciding values) */
[data-mode='light'] {
  --bg: oklch(0.985 0.003 266);
  --bg-deep: oklch(0.95 0.004 266);
  --bg-raised: oklch(1 0 0);
  --bg-overlay: oklch(0.955 0.004 266);
  --line: oklch(0.905 0.005 266);
  --line-strong: oklch(0.845 0.006 266);
  --text: oklch(0.21 0.019 266);
  --text-soft: oklch(0.42 0.015 266);
  --text-faint: oklch(0.58 0.011 266);
  --iris: oklch(0.54 0.16 274);
  --iris-strong: oklch(0.47 0.15 274);
  --iris-soft: oklch(0.6 0.168 274);
  --iris-glow: oklch(0.54 0.16 274 / 0.16);
  --iris-wash: oklch(0.54 0.16 274 / 0.07);
  --shadow-card: 0 1px 2px oklch(0 0 0 / 0.06), 0 8px 24px oklch(0 0 0 / 0.07);
  --shadow-raised: 0 2px 4px oklch(0 0 0 / 0.08), 0 16px 48px oklch(0 0 0 / 0.1);
}