/* ==========================================================================
   Habit Connect · base styles
   Shared by every page: design tokens, reset, typography, header, footer.
   ========================================================================== */

/* ---------- Tokens: dark is the default theme ---------- */
:root {
  --bg: #090C0A;
  --surface: #111611;
  --surface-2: #161D17;
  --border: #1F2820;
  --text: #EEF1EC;
  --muted: #7F8D81;
  --dim: #4C584E;

  --green: #3DD68C;          /* fills: dots, toggles, buttons */
  --green-strong: #3DD68C;   /* green used as text / icon colour */
  --green-ink: #06110B;      /* text on top of green */
  --violet: #A78BFA;         /* claps */
  --violet-soft: rgba(167, 139, 250, .14);
  --coral: #F26B6B;
  --fab: #1C261C;

  --miss: #21402F;           /* outline of a missed day */
  --today: rgba(61, 214, 140, .05);
  --header-bg: rgba(9, 12, 10, .82);
  --overlay: rgba(5, 7, 6, .72);
  --shadow: none;
  --shadow-lg: 0 0 0 1px #2A332B, 0 40px 120px -30px rgba(61, 214, 140, .18), 0 30px 80px -20px rgba(167, 139, 250, .15);

  --todo: #713F12;
  --todo-ink: #FDE68A;

  --radius: 22px;
  --maxw: 1120px;

  --font-body: "Archivo", system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
}

:root[data-theme="light"] {
  --bg: #F5F7F5;
  --surface: #FFFFFF;
  --surface-2: #EEF2EE;
  --border: #E1E7E1;
  --text: #0E1510;
  --muted: #5E6B60;
  --dim: #A3ADA4;

  --green-strong: #16955A;
  --violet: #7C5CE6;
  --violet-soft: rgba(124, 92, 230, .1);
  --coral: #E05555;

  --miss: #C9DDD0;
  --today: rgba(61, 214, 140, .07);
  --header-bg: rgba(245, 247, 245, .85);
  --overlay: rgba(14, 21, 16, .35);
  --shadow: 0 1px 2px rgba(14, 21, 16, .05);
  --shadow-lg: 0 30px 70px -25px rgba(14, 21, 16, .35), 0 20px 60px -20px rgba(124, 92, 230, .25);

  --todo: #FDE68A;
  --todo-ink: #713F12;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ---------- Layout & type ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-weight: 900; letter-spacing: -.025em; line-height: 1.02; }
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  font-variation-settings: "SOFT" 100;
}
.eyebrow {
  font-stretch: 125%;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.lead { color: var(--muted); font-size: clamp(17px, 1.6vw, 19px); max-width: 34ch; }
.pro {
  font-size: 11px; font-weight: 900; letter-spacing: .1em; font-style: normal;
  color: var(--violet); background: var(--violet-soft);
  padding: 3px 9px; border-radius: 999px;
}
.toggle {
  width: 46px; height: 28px; border-radius: 999px; background: var(--green);
  position: relative; flex-shrink: 0;
}
.toggle::after {
  content: ""; position: absolute; top: 3px; right: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-header.is-scrolled,
.site-header.is-bordered { border-color: var(--border); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 19px; letter-spacing: -.02em; }
.logo img { width: 28px; height: 28px; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-link { font-size: 14px; font-weight: 700; color: var(--muted); }
.nav-link:hover { color: var(--text); }

.lang { display: flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.lang button, .lang a { font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; color: var(--muted); }
.lang button.is-on, .lang a.is-on { background: var(--surface-2); color: var(--text); }

.theme-btn {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--muted);
}
.theme-btn:hover { color: var(--text); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .sun { display: none; }
:root[data-theme="light"] .theme-btn .sun { display: block; }
:root[data-theme="light"] .theme-btn .moon { display: none; }

/* Reserved for the web app login, hidden until it ships */
.login-slot { display: none; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0 56px; color: var(--muted); font-size: 14px; }
.foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
.foot nav, .socials { display: flex; gap: 22px; flex-wrap: wrap; }
.foot a:hover { color: var(--text); }

@media (max-width: 520px) {
  .wrap { padding: 0 16px; }
  .foot { flex-direction: column; align-items: flex-start; }
}