/* ============================================================
 * shared.css — design tokens + shared resets for the static
 * marketing site (apps/website/index.html, early-access.html,
 * 404.html).
 *
 * Single source of truth for:
 *   - The universal CSS reset
 *   - Light-mode design tokens (`:root`)
 *   - Dark-mode token overrides (`[data-theme="dark"]`)
 *   - Mobile-breakpoint type-scale overrides
 *
 * Page-specific layout / component styles continue to live in
 * each page's inline `<style>` block. When you add or change a
 * token here, every page picks it up on next deploy because the
 * deploy-website.sh sync uploads the file under the bucket root
 * and the deploy invalidates CloudFront `/*` (see
 * scripts/deploy-website.sh). Tokens are kept page-scope-safe by
 * declaring them on `:root` only.
 *
 * Cache behavior: deploy-website.sh uploads .css files with
 * `Cache-Control: no-cache` (same as HTML) so token changes
 * propagate immediately after CloudFront invalidation, without
 * leaving older visitors on a stale colorway.
 * ============================================================ */

/* ========== RESET ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
ul {
  list-style: none;
}

/* ========== TOKENS (light, default) ========== */
:root {
  --bg-deep: #FAFAF9;
  --bg-card: #FFFFFF;
  --bg-card-hover: #F5F5F4;
  --accent: #E1654A;
  --accent-hover: #CC5038;
  --accent-glow: rgba(225, 101, 74, 0.06);
  --text-primary: #292524;
  --text-secondary: #78716C;
  --text-white: #1C1917;
  --border: #E7E5E4;
  --border-accent: rgba(225, 101, 74, 0.3);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.06);
  --nav-scrolled-bg: rgba(250, 250, 249, 0.85);
  --mobile-nav-bg: rgba(250, 250, 249, 0.95);
  --logo-inner-fill: #FAFAF9;

  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-hero: 700 72px/76px var(--font);
  --text-h2: 700 40px/48px var(--font);
  --text-h3: 600 24px/32px var(--font);
  --text-body-lg: 400 18px/28px var(--font);
  --text-body: 400 16px/24px var(--font);
  --text-sm: 500 14px/20px var(--font);

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --container: 1200px;
}

/* ========== DARK MODE ========== */
[data-theme="dark"] {
  --bg-deep: #141211;
  --bg-card: #1E1C1A;
  --bg-card-hover: #28251F;
  --accent: #E87B63;
  --accent-hover: #F0907B;
  --accent-glow: rgba(232, 123, 99, 0.1);
  --text-primary: #E7E5E4;
  --text-secondary: #A8A29E;
  --text-white: #F5F5F4;
  --border: #33302C;
  --border-accent: rgba(232, 123, 99, 0.35);
  --shadow-card: none;
  --shadow-card-hover: none;
  --nav-scrolled-bg: rgba(20, 18, 17, 0.85);
  --mobile-nav-bg: rgba(20, 18, 17, 0.95);
  --logo-inner-fill: #141211;
}

/* ========== RESPONSIVE TYPE-SCALE (mobile) ========== */
@media (max-width: 767px) {
  :root {
    --text-hero: 700 40px/44px var(--font);
    --text-h2: 700 28px/36px var(--font);
    --text-h3: 600 20px/28px var(--font);
  }
}