/* ==========================================================================
   Design tokens — single source of truth for the Wallpaper Spanner site.
   Edit values here to retheme; components never hardcode colour.
   The 9 core colours mirror the table in WEBSITE_BUILD_HANDOFF.md.
   Note: the desktop app uses a slightly different cyan (#00d0ff) — that
   divergence is intentional; do not "correct" the site to match the app.
   ========================================================================== */

:root {
  /* Backgrounds — near-black so screenshots carry the light */
  --bg: #05070A;
  --bg-alt: #07090D;
  --surface: #0E1419;
  --surface-2: #151C23;
  --border: #1C242C;
  --border-strong: #2C3842;

  /* Text */
  --text: #F4F7F9;
  --text-secondary: #9FAEB8;
  --text-tertiary: #71808A;

  /* Accent — cyan, from the product mark */
  --accent: #35D8E6;
  --accent-hover: #5FE5F0;
  --accent-press: #17BAC8;
  --accent-ink: #04252A;
  --accent-dim: rgba(53, 216, 230, 0.10);
  --accent-border: rgba(53, 216, 230, 0.35);

  /* Warm yellow — alignment-guide imagery only, used sparingly */
  --guide: #F5C542;
  --guide-dim: rgba(245, 197, 66, 0.14);

  /* Feedback */
  --good: #3DD68C;
  --good-dim: rgba(61, 214, 140, 0.14);
  --warn: #F5A623;

  /* Focus */
  --focus-ring: #5FE5F0;

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", "Segoe UI Variable", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-hero: clamp(2.6rem, 1.5rem + 5vw, 5.2rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 2vw, 2.8rem);
  --fs-h3: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.08;
  --lh-body: 1.6;
  --ls-tight: -0.03em;
  --ls-wide: 0.06em;

  /* Spacing scale (8px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;

  /* Layout */
  --maxw: 1200px;
  --maxw-wide: 1440px;
  --side-pad: clamp(20px, 4vw, 40px);
  --section-pad: clamp(64px, 8vw, 132px);
  --nav-h: 60px;

  /* Radii — echo the logo's rounded tiles */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-shot: 10px;
  --r-pill: 999px;

  /* Ambient washes — faint, so the page stays near-black and the
     screenshots keep carrying the light */
  --glow-accent: rgba(53, 216, 230, 0.11);
  --glow-deep: rgba(94, 106, 255, 0.07);

  /* Elevation — hairlines and soft shadow, not glow */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 1px 0 rgba(255, 255, 255, 0.03), 0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-shot: 0 1px 0 rgba(255, 255, 255, 0.03), 0 24px 70px rgba(0, 0, 0, 0.5);

  /* Motion */
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 800ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  color-scheme: dark;
}