/* Louvex design tokens — hostleaf-inspired dark. CSP: self only. */

:root {
  color-scheme: dark;

  /* Surfaces (near-black hostleaf dark) */
  --background: #0A0A0B;
  --background-muted: #0F0F10;
  --card: #111112;
  --card-hero: #121214;
  --popover: #161618;
  --secondary: #1A1A1C;
  --accent-surface: #1E1E21;

  /* Borders */
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Text */
  --foreground: #D4D4D8;
  --muted-foreground: #A1A1AA;
  --quiet-foreground: #71717A;
  --text-1: #FAFAFA;

  /* Accent — hostleaf green */
  --accent: #1DB954;
  --accent-hover: #19A44A;
  --accent-pressed: #17A048;
  --accent-border: color-mix(in srgb, var(--accent) 72%, #000 28%);
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 26%, transparent);
  /* Button label on accent — AA ≥4.5:1 on base (#1DB954 ≈ 7.17:1) */
  --accent-fg: #04170B;

  /* Focus ring: accent @ 35% */
  --ring: color-mix(in srgb, var(--accent) 35%, transparent);
  --ring-offset: var(--background);

  /* Layout */
  --wrap: 1280px;
  --wrap-content: 1216px;
  --pad: 32px;
  --pad-sm: 16px;
  --section-y: 80px;
  --section-y-sm: 64px;

  /* Radii */
  --radius-hero: 28px;
  --radius-card: 16px;
  --radius-btn: 8px;
  --radius-control: 8px;
  --radius-chip: 8px;
  --radius-badge: 6px;
  --radius-pill: 9999px;

  /* Type — Geist Sans (self-hosted) */
  --font: "Geist Sans", system-ui, sans-serif;
  --display: var(--font);
  --body: var(--font);
  --mono: var(--font);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 300ms;

  /* Compat aliases for sections below the hero */
  --bg: var(--background);
  --surface: var(--card);
  --surface-2: var(--secondary);
  --text-2: var(--foreground);
  --text-3: var(--muted-foreground);
  --text-4: var(--quiet-foreground);
  --brand: var(--accent);
  --brand-text: var(--accent);
  --brand-hover: var(--accent-hover);
  --brand-active: var(--accent-pressed);
  --brand-soft: var(--accent-soft);
  --btn-primary-bg: var(--accent);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-fg: var(--accent-fg);
  --radius-screen: var(--radius-card);
}