/**
 * Altex shared design tokens.
 *
 * Single source of truth for color, space, type scale, breakpoint, and
 * focus styling across:
 *   - apps/marketing/public/index.html  (the stealth landing page)
 *   - apps/marketing/public/docs.html   (the tenant onboarding docs)
 *   - apps/marketing/public/widget.js   (the embeddable chat widget)
 *
 * The widget ships as a self-contained <script> tag that runs on tenant
 * pages, so it cannot <link> this stylesheet at runtime. Its CSS is built
 * as a JS string in widget.js. The values there MUST mirror the values
 * here. Any drift is a bug; the design-review skill catches it.
 *
 * Colors were extracted from the live site on 2026-05-04 and locked in.
 * If you add a new color, add it here first.
 */
:root {
  color-scheme: dark;

  /* Color — fg light to dim, bg layered, single accent green */
  --fg: #e8e8e8;
  --fg-dim: #888;
  --fg-dimmer: #555;
  --bg: #0a0a0a;
  --bg-card: #111;
  --bg-pre: #0d0d0d;
  --bg-inline: #181818;
  --border: #1f1f1f;
  --accent: #4ade80;

  /* Space scale, 4px base. Use these instead of arbitrary px/rem. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5rem;
  --space-10: 6rem;

  /* Type scale, factor ~1.18, rem so it respects user font preferences. */
  --text-xs: 0.85rem;
  --text-sm: 0.92rem;
  --text-base: 1rem;
  --text-md: 1.1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;

  /* Type system.
   *
   * --sans is the OS-default sans stack — see ADR 0010 §022 for the
   * full rationale and the re-evaluation triggers. This is a
   * deliberate choice for the stealth phase, not a default that
   * nobody got around to picking. Reasoning summary:
   *
   *   - Altex onboards the first 10 teams by hand. Brand identity
   *     is consciously restrained until the product personality is
   *     proven with real users.
   *   - Picking a typeface (Inter / Geist / JetBrains / Söhne) is a
   *     long-term brand commitment. Picking one too early creates
   *     "we changed our typeface" friction once we have a clearer
   *     identity.
   *   - The current visual identity already establishes character
   *     elsewhere: the `>` prompt prefix on the wordmark, mono
   *     eyebrows, single accent green, terminal-leaning code blocks.
   *     The headline text doesn't need to do everything.
   *   - This deliberately defers AI-slop blacklist item #11
   *     ("system-ui as PRIMARY display font = 'I gave up'").
   *     Re-evaluate when the platform leaves stealth or the third
   *     external tenant ships.
   *
   * Don't change --sans without a separate ADR. The mono stack is
   * fine to extend with new fallbacks; --sans is brand. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --leading-tight: 1.25;
  --leading-body: 1.6;
  /* Three named tracking tokens for the three contexts we use:
       display = brand wordmark / hero (>=2rem, tightens punchy)
       tight   = headings (h1-h3, body sub) — modest tightening for sans
       label   = uppercase mono eyebrows ("HOW IT WORKS") — needs air */
  --tracking-tight: -0.02em;
  --tracking-display: -0.03em;
  --tracking-label: 0.08em;

  /* Single breakpoint. Marketing was 640px and widget was 600px. Picked
     600px because it covers both intents (mid-tablet+ gets multi-column). */
  --bp-sm: 600px;
}

/* Global keyboard focus. The browser default 1px light-blue ring is barely
   visible on near-black; keyboard users couldn't reliably find their
   focus. 2px accent outline + offset is discoverable without dominating
   the design. */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Hover idiom catalog — see ADR 0010 §019. Four patterns, one per
   element role. Don't unify these (a single idiom across all four
   would be wrong); add new controls under whichever role they fit.
 *
 *   1. Filled button (primary CTA / send)
 *      → opacity: 0.9
 *      Says "press this." High-confidence affordance, no shape change.
 *
 *   2. Bordered button (secondary CTA / ghost link)
 *      → border-color: var(--accent)
 *      Says "click is allowed here, quietly." Visual weight stays low
 *      until hover signals attention.
 *
 *   3. Inline text link (anchor in prose, footer mailto, proof-link)
 *      → text-decoration: underline (or color shift to --accent)
 *      Says "this is a link." Underline is the universal text-link
 *      affordance and beats inventing a new convention.
 *
 *   4. Floating action button (widget chat button)
 *      → transform: scale(1.05)
 *      Says "I'm playful, I want your eye." Scale is reserved for the
 *      one element that's allowed to ask for attention; do not extend.
 */