/* ==========================================================
   HavenKey: theme tokens (black & white)
   ========================================================== */
:root {
  /* Font Families */
  --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Light mode (default) */
  --bg: #ffffff;
  --bg-soft: #ebebeb;
  --border: #dcdcdc;
  --surface: #ffffff;
  --text: #0a0a0a;
  --text-muted: #5c5c5c;
  --border: #e4e4e4;
  --primary: #0a0a0a;
  --primary-hover: #2b2b2b;
  --on-primary: #ffffff;
  --focus: #0a0a0a;
  --error: #d92d20;
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.12);

  /* Navbar buttons (Login, theme, RTL): same graphite as the logo, both modes */
  --btn-bg: #313131;
  --btn-bg-hover: #555555;
  --btn-text: #ffffff;

  /* Logo icon: same neutral graphite in BOTH modes (do not override in dark) */
  --logo-bg: #313131;
  --logo-fg: #ffffff;

  --header-h: 72px;
  color-scheme: light;

    /* Section rhythm: same space above and below every section (tune here) */
  --sec-y: clamp(28px, 3.6vw, 48px);
  --hero-top: clamp(12px, 2vw, 20px);
}

/* Dark mode */
[data-theme="dark"] {
  --bg: #000000;
  --bg-soft: #141414;
  --surface: #0b0b0b;
  --text: #f5f5f5;
  --text-muted: #a8a8a8;
  --border: #2a2a2a;
  --primary: #ffffff;
  --primary-hover: #d9d9d9;
  --on-primary: #000000;
  --focus: #ffffff;
  --error: #ff6b61;
  --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.7);

  color-scheme: dark;
}

@media (max-width: 1023px) {
  :root { --header-h: 64px; }
}