/*
 * Design tokens — extracted verbatim from axon-engine/ui/templates/landing.html
 * so the static marketing site is visually indistinguishable from the
 * in-product landing page. Colors are copied byte-for-byte from that file's
 * :root block. Spacing/radius/typography are derived from its observed
 * usage (see comments) and given names so the rest of this site's CSS reads
 * as a system instead of a pile of magic numbers.
 *
 * If the product's landing.html palette ever changes, update both files —
 * there is no shared source yet (see README.md "Decisions log").
 *
 * ===== LIGHT SCHEME =====
 * `:root` below is the DARK palette and stays the base — no-preference and
 * dark-preference visitors see exactly today's site, byte-for-byte. A
 * `@media (prefers-color-scheme: light)` block near the end of this file
 * overrides the same custom properties with a light palette. There is no
 * manual toggle (owner spec: default to browser/OS setting only).
 *
 * Every color below that main.css/layouts use as *text* on top of its own
 * "-dim" companion (badges, pills, checkmarks, small callouts) also has an
 * "-on-dim" twin, e.g. --yellow-on-dim. In dark mode "-on-dim" is defined
 * as literally `var(--accent)` — identical rendering to before this change.
 * In light mode it resolves to a darker 700/800-weight shade of the same
 * hue, because the raw accent (tuned for a near-black background) drops
 * under 3:1 contrast on the light "-dim" tints and on white/--bg directly —
 * see the contrast audit in the PR/commit description. Anywhere an accent
 * is only ever used as a large (>=24px, or >=~19px bold) headline/gradient
 * word, the raw accent is kept — it still clears 3:1 there and darkening it
 * would dilute the brand color for no reason.
 */
:root {
  color-scheme: dark light;

  /* ===== COLOR — copied 1:1 from landing.html :root ===== */
  --bg: #06080F;
  --surface: #0D1117;
  --card: #131A24;
  --border: #1C2536;
  --blue: #3B82F6;
  --blue-dim: #1E3A5F;
  --green: #10B981;
  --green-dim: #064E3B;
  --red: #EF4444;
  --red-dim: #451A1A;
  --yellow: #F59E0B;
  --yellow-dim: #78350F;
  --text: #F1F5F9;
  --text-dim: #94A3B8;
  --text-muted: #64748B;
  --purple: #A855F7;
  --orange: #F97316;
  --pink: #EC4899;
  --teal: #14B8A6;

  /* "-on-dim" text tokens — dark mode = identity (see header comment) */
  --blue-on-dim: var(--blue);
  --green-on-dim: var(--green);
  --red-on-dim: var(--red);
  --yellow-on-dim: var(--yellow);
  --purple-on-dim: var(--purple);
  --red-callout-sub: rgba(239, 68, 68, 0.7); /* .marks-callout-sub */

  /* Low-alpha icon-chip tints (feature/community icons). Alpha-blended
     colors adapt to whatever's behind them automatically, so these don't
     need a light override — kept as tokens purely so main.css/layouts
     don't carry raw rgba() literals. */
  --purple-dim: rgba(168, 85, 247, 0.15);
  --pink-dim: rgba(236, 72, 153, 0.15);
  --teal-dim: rgba(20, 184, 166, 0.15);
  --blue-tint: rgba(59, 130, 246, 0.15);
  --red-tint: rgba(239, 68, 68, 0.15);
  --cta-box-grad-1: rgba(59, 130, 246, 0.10);
  --cta-box-grad-2: rgba(168, 85, 247, 0.08);

  /* Second gradient stop of .pricing-card.featured — was a bare hex that
     doesn't adapt; see light override. */
  --pricing-featured-end: #7C2D12;

  /* Chrome/surface tokens that were hardcoded rgba() in main.css */
  --nav-backdrop: rgba(6, 8, 15, 0.8);
  --nav-border: rgba(255, 255, 255, 0.04);
  --shadow-color: rgba(0, 0, 0, 0.3);       /* feature/pricing/analytics/hub card shadows */
  --shadow-color-strong: rgba(0, 0, 0, 0.5); /* phone mockup drop shadow */
  --phone-ring: rgba(255, 255, 255, 0.06);   /* phone mockup 1px edge highlight */
  --phone-track: rgba(255, 255, 255, 0.08);  /* phone-bar progress track */
  --phone-accent-glow: rgba(59, 130, 246, 0.08); /* phone mockup outer blue halo */
  --grain-opacity: 0.025;
  --glow-opacity-1: 0.12; /* .hero-glow / glow-blue */
  --glow-opacity-2: 0.08; /* .glow-purple */
  --glow-opacity-3: 0.06; /* .glow-green */

  /* ===== LAYOUT ===== */
  --container-max: 1100px;
  --container-padding: 24px;
  --section-padding-y: 80px;

  /* ===== SPACING SCALE (derived from px values used throughout landing.html) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 100px;

  /* ===== RADIUS SCALE (4px footer code chip -> 28px phone chrome -> pill) === */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 28px;
  --radius-full: 100px;

  /* ===== TYPE SCALE (px sizes as used across hero/section/card headings) === */
  --fs-2xs: 9px;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 32px;
  --fs-5xl: 36px;
  --fs-6xl: 42px;
  --fs-7xl: 52px;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  --lh-tight: 1.1;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;
  --lh-loose: 1.7;

  /* ===== TRANSITIONS (all landing.html transitions use these two speeds) === */
  --transition-fast: 0.2s;
  --transition-slow: 0.3s;
}

/* =======================================================================
 * LIGHT SCHEME OVERRIDE
 * Pure `prefers-color-scheme` — no manual toggle. Only re-declares what
 * needs to change; everything not listed here (spacing/radius/type/accent
 * hues) is intentionally shared with dark mode.
 * ===================================================================== */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #F8FAFC;
    --surface: #FFFFFF;
    --card: #FFFFFF;
    --border: #E2E8F0;
    --text: #0F172A;
    --text-dim: #475569;
    --text-muted: #64748B;

    /* Accent hues (--blue, --green, --red, --yellow, --purple, --orange,
       --pink, --teal) are unchanged — same brand colors both schemes. Their
       "-dim" companions flip from dark tints to light tints: */
    --blue-dim: #DBEAFE;
    --green-dim: #D1FAE5;
    --red-dim: #FEE2E2;
    --yellow-dim: #FEF3C7;

    /* Text-on-tint/text-on-page readability shades — see header comment.
       Each is a ~700/800-weight version of the same hue, chosen so it
       clears 4.5:1 against both white/--bg and its own light "-dim" tint
       (verified: blue 6.4–6.7:1, green 5.2–5.5:1, red 6.2–6.5:1,
       yellow 6.8–7.1:1, purple 6.7–7.0:1). */
    --blue-on-dim: #1D4ED8;
    --green-on-dim: #047857;
    --red-on-dim: #B91C1C;
    --yellow-on-dim: #92400E;
    --purple-on-dim: #7E22CE;
    --red-callout-sub: rgba(185, 28, 28, 0.9); /* ~4.6:1 on red-dim tint, vs. 2.8:1 unadjusted */

    --pricing-featured-end: #FFEDD5;

    --nav-backdrop: rgba(248, 250, 252, 0.85);
    --nav-border: rgba(15, 23, 42, 0.08);
    --shadow-color: rgba(15, 23, 42, 0.12);
    --shadow-color-strong: rgba(15, 23, 42, 0.20);
    --phone-ring: rgba(15, 23, 42, 0.10);
    --phone-track: rgba(15, 23, 42, 0.10);

    /* Glow blobs read as much stronger color washes on a light background
       than on near-black — turn them down so they stay ambient texture
       instead of visible pastel blotches behind the hero copy. */
    --glow-opacity-1: 0.09;
    --glow-opacity-2: 0.06;
    --glow-opacity-3: 0.05;
  }
}