/* ====================================================================
   Critical Shared — Loaded first for fast FCP
   Single source of truth for ALL CSS custom properties
   ==================================================================== */

:root {
  color-scheme: light dark;

  /* Brand — warm earth tones */
  --primary: #b85c38;
  --secondary: #4a7c59;

  /* Light mode — linen & walnut */
  --bg-gradient: linear-gradient(160deg, #f7f3ed 0%, #faf8f4 40%, #f2ece4 100%);
  --surface: rgba(247, 243, 237, 0.92);
  --surface-muted: rgba(242, 236, 228, 0.6);
  --card-bg: rgba(255, 253, 250, 0.85);
  --text: #2a2118;
  --text-muted: #7a6e60;
  --text-inverse: #faf8f4;
  --accent: #b85c38;
  --accent-soft: rgba(184, 92, 56, 0.07);
  --accent-strong: #944a2d;
  --accent-border: rgba(184, 92, 56, 0.18);
  --accent-glow: rgba(184, 92, 56, 0.2);
  --border: rgba(42, 33, 24, 0.1);
  --shadow-soft: 0 4px 20px rgba(42, 33, 24, 0.06);
  --shadow-strong: 0 12px 36px rgba(42, 33, 24, 0.1);

  /* Glass tints — warm */
  --glass-tint: rgba(42, 33, 24, 0.02);
  --glass-tint-strong: rgba(42, 33, 24, 0.04);

  /* Ambient — muted for warm editorial */
  --glow-opacity: 0.02;
  --orb-opacity-1: 0.03;
  --orb-opacity-2: 0.02;

  /* Gradient text — warm editorial */
  --gradient-text-from: #2a2118;
  --gradient-text-to: #944a2d;

  /* Geometry */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --sidebar-width: 320px;

  /* Category accent colors */
  --cat-parenting: #c4695a;
  --cat-education: #3d8b7a;
  --cat-trending: #c49a2a;
  --cat-custom-mouse: #5b7fa3;
  --cat-life-stories: #b07c4f;
  --cat-screen-keyboard: #7b6b8a;
  --cat-assistive-devices: #4a7c59;
  --cat-uncategorized: #8a7e72;
}

/* Dark — explicit toggle */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-gradient: #1a1714;
  --surface: rgba(255, 253, 250, 0.04);
  --surface-muted: rgba(255, 253, 250, 0.02);
  --card-bg: rgba(255, 253, 250, 0.05);
  --text: #e4ddd3;
  --text-muted: #a09487;
  --accent: #d4a245;
  --accent-soft: rgba(212, 162, 69, 0.1);
  --accent-strong: #c4922e;
  --accent-border: rgba(212, 162, 69, 0.18);
  --accent-glow: rgba(212, 162, 69, 0.2);
  --border: rgba(228, 221, 211, 0.08);
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.2);
  --shadow-strong: 0 12px 36px rgba(0, 0, 0, 0.35);
  --glass-tint: rgba(255, 253, 250, 0.04);
  --glass-tint-strong: rgba(255, 253, 250, 0.08);
  --glow-opacity: 0.04;
  --orb-opacity-1: 0.06;
  --orb-opacity-2: 0.04;
  --gradient-text-from: #e4ddd3;
  --gradient-text-to: #d4a245;
}

/* Dark — auto (system preference) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-gradient: #1a1714;
    --surface: rgba(255, 253, 250, 0.04);
    --surface-muted: rgba(255, 253, 250, 0.02);
    --card-bg: rgba(255, 253, 250, 0.05);
    --text: #e4ddd3;
    --text-muted: #a09487;
    --accent: #d4a245;
    --accent-soft: rgba(212, 162, 69, 0.1);
    --accent-strong: #c4922e;
    --accent-border: rgba(212, 162, 69, 0.18);
    --accent-glow: rgba(212, 162, 69, 0.2);
    --border: rgba(228, 221, 211, 0.08);
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.2);
    --shadow-strong: 0 12px 36px rgba(0, 0, 0, 0.35);
    --glass-tint: rgba(255, 253, 250, 0.04);
    --glass-tint-strong: rgba(255, 253, 250, 0.08);
    --glow-opacity: 0.04;
    --orb-opacity-1: 0.06;
    --orb-opacity-2: 0.04;
    --gradient-text-from: #e4ddd3;
    --gradient-text-to: #d4a245;
  }
}

/* ---------- Baseline (fast first paint) ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body, ui-sans-serif, system-ui, -apple-system, sans-serif);
  font-size: 16px;
  line-height: 1.7;
  background: var(--bg-gradient);
  color: var(--text);
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

.page-chrome {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrapper {
  width: min(1600px, 98vw);
  margin: 0 auto;
}

a {
  color: var(--accent);
  text-decoration: none;
}

.site-header {
  padding: 2rem 0;
  position: relative;
}

.site-title {
  margin: 0;
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  letter-spacing: -0.04em;
}

.site-tagline {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 540px;
}