/* ============================================================
   Kleinpulse — base.css
   Shared design system: tokens, reset, typography, layout,
   and reusable components (nav, buttons, cards, badges,
   forms, segmented controls, empty states).
   Used by every page; page-specific layout lives in its own file.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --bg:        #faf7f2;
  --surface:   #ffffff;
  --surface-2: #fafaf9; /* stone-50 */
  --line:      #e7e5e4; /* stone-200 */
  --line-soft: #f5f5f4; /* stone-100 */
  --line-strong:#d6d3d1;/* stone-300 */

  --text:    #1c1917;   /* stone-900 */
  --text-2:  #44403c;   /* stone-700 */
  --ink-3:   #57534e;   /* stone-600 */
  --muted:   #78716c;   /* stone-500 */
  --faint:   #a8a29e;   /* stone-400 */

  --accent:     #047857; /* emerald-700 */
  --accent-600: #059669; /* emerald-600 */
  --accent-500: #10b981; /* emerald-500 */
  --accent-400: #34d399; /* emerald-400 */
  --accent-300: #6ee7b7; /* emerald-300 */
  --accent-50:  #ecfdf5; /* emerald-50  */

  --rose-600:#e11d48; --rose-500:#f43f5e; --rose-400:#fb7185; --rose-200:#fecdd3; --rose-50:#fff1f2;
  --amber-700:#b45309; --amber-500:#f59e0b; --amber-50:#fffbeb;
  --sky-600:#0284c7; --sky-50:#f0f9ff;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .10), 0 8px 10px -6px rgb(0 0 0 / .08);

  --r-md:6px; --r-lg:8px; --r-xl:12px; --r-2xl:16px; --r-full:9999px;

  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: 'Newsreader', ui-serif, Georgia, serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
::selection { background: #bbf7d0; }

/* ---------- Typography ---------- */
h1, .brand { font-family: var(--serif); }
.page-title { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.page-title--lg { font-size: 24px; }
.page-sub { margin-top: 4px; font-size: 14px; color: var(--muted); }
.section-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.eyebrow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.lead { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---------- Layout helpers ---------- */
.container       { width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 672px; }
.container--mid    { max-width: 768px; }
.page { padding-top: 32px; padding-bottom: 32px; }
.row  { display: flex; align-items: center; }
.row--between { justify-content: space-between; }
.row--gap { gap: 12px; }
.wrap { flex-wrap: wrap; }
.stack > * + * { margin-top: 16px; }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Top navigation ---------- */
.topbar { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: var(--surface); }
.topbar__inner { display: flex; height: 56px; align-items: center; justify-content: space-between; }
.topbar__left { display: flex; align-items: center; gap: 24px; }
.navlink { font-size: 14px; font-weight: 500; color: var(--text); }

.brand-lockup { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark {
  display: flex; height: 24px; width: 24px; align-items: center; justify-content: center;
  border-radius: var(--r-md); background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
}
.brand-name { font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }

/* Account pill (clearly clickable) */
.account {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-full);
  padding: 4px 12px 4px 4px; font-size: 13px; font-weight: 500; color: var(--text-2);
  box-shadow: var(--shadow-sm); transition: background .15s;
}
.account:hover { background: var(--surface-2); }
.account__avatar {
  display: flex; height: 24px; width: 24px; align-items: center; justify-content: center;
  border-radius: var(--r-full); background: var(--accent); color: #fff; font-size: 11px; font-weight: 600;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--r-lg); padding: 8px 14px; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; white-space: nowrap;
}
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-600); }
.btn--outline { background: var(--surface); border-color: var(--line); color: var(--text-2); box-shadow: var(--shadow-sm); }
.btn--outline:hover { background: var(--line-soft); }
.btn--ghost { color: var(--muted); }
.btn--ghost:hover { background: var(--line-soft); color: var(--text); }
.btn--dark { background: var(--text); color: #fff; }
.btn--dark:hover { background: var(--text-2); }
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--block { width: 100%; }
.btn__plus { font-size: 16px; line-height: 1; }

/* Icon-only button */
.iconbtn {
  display: flex; height: 36px; width: 36px; align-items: center; justify-content: center;
  border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface);
  color: var(--faint); box-shadow: var(--shadow-sm); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.iconbtn--sm { height: 32px; width: 32px; }
.iconbtn:hover { background: var(--line-soft); color: var(--text); }
.iconbtn--danger:hover { border-color: var(--rose-200); background: var(--rose-50); color: var(--rose-600); }
.iconbtn--bare { border: none; box-shadow: none; background: transparent; }
.iconbtn--bare:hover { background: var(--line-soft); }

/* ---------- Badges / status ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-full); padding: 2px 8px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.badge__dot { height: 6px; width: 6px; border-radius: var(--r-full); }
.badge--active { background: var(--accent-50); color: var(--accent-600); }
.badge--active .badge__dot { background: var(--accent-500); }
.badge--paused { background: var(--amber-50); color: var(--amber-700); }
.badge--paused .badge__dot { background: var(--amber-500); }
.badge--done { background: var(--accent-50); color: var(--accent); gap: 4px; }
.badge--rose { background: var(--rose-50); color: var(--rose-500); }
.badge--soft { background: var(--line-soft); color: var(--faint); }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); }
.card--pad { padding: 20px; }
.card--hover { transition: border-color .15s, box-shadow .15s; }
.card--hover:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }

/* ---------- Forms ---------- */
.field + .field, .field + .field-row, .field-row + .field { margin-top: 16px; }
.label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); }
.input, .select {
  margin-top: 6px; display: block; width: 100%; border-radius: var(--r-lg);
  border: 1px solid var(--line-strong); background-color: var(--surface);
  padding: 8px 12px; font-size: 14px; color: var(--text); box-shadow: var(--shadow-sm);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 12px;
  cursor: pointer;
}
.input::placeholder { color: var(--faint); }
.input:focus, .select:focus { border-color: var(--accent-600); box-shadow: 0 0 0 2px rgb(5 150 105 / .2); }
.input--mono { font-family: var(--mono); font-size: 13px; }
.input[readonly], .input:disabled, .select:disabled {
  background: var(--surface-2); border-color: var(--line); color: var(--muted); cursor: not-allowed; box-shadow: none;
}
.hint { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--faint); }
.field--invalid .label { color: var(--rose-600); }
.input--invalid {
  border-color: var(--rose-400);
  background: var(--rose-50);
}
.input--invalid:focus {
  border-color: var(--rose-500);
  box-shadow: 0 0 0 2px rgb(225 29 72 / .18);
}
.field-error {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--rose-600);
}
.form-alert {
  border-radius: var(--r-lg);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
}
.form-alert--error {
  border: 1px solid var(--rose-200);
  background: var(--rose-50);
  color: var(--rose-600);
}
.field-grid { display: grid; gap: 16px; }
.checkline { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.checkline input { margin-top: 2px; height: 16px; width: 16px; flex-shrink: 0; accent-color: var(--accent-600); }

/* ---------- Segmented control & tabs ---------- */
.segmented { display: inline-flex; gap: 0; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-lg); padding: 2px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow-sm); }
.segmented > * { border: none; background: transparent; border-radius: var(--r-md); padding: 4px 10px; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.segmented > *:hover { color: var(--text); }
.segmented > .is-active { background: var(--line-soft); color: var(--text); }

.tabs { display: flex; align-items: flex-end; gap: 24px; border-bottom: 1px solid var(--line); font-size: 14px; }
.tab { display: inline-flex; align-items: center; gap: 6px; margin-bottom: -1px; padding-bottom: 10px; border-bottom: 2px solid transparent; color: var(--muted); background: none; border-top: none; border-left: none; border-right: none; cursor: pointer; font-weight: 500; }
.tab:hover { color: var(--text-2); }
.tab.is-active { border-bottom-color: var(--accent); color: var(--text); font-weight: 600; }
.tab.is-active--rose { border-bottom-color: var(--rose-400); }

/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--faint); }
.crumbs a:hover { color: var(--text-2); }
.crumbs__here { color: var(--text-2); }

/* ---------- Empty state ---------- */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--line-strong); background: var(--surface); border-radius: var(--r-2xl); padding: 80px 24px; text-align: center; }
.empty__icon { display: flex; height: 56px; width: 56px; align-items: center; justify-content: center; border-radius: var(--r-2xl); border: 1px solid var(--line); background: var(--surface-2); }
.pulse-dot { height: 10px; width: 10px; border-radius: var(--r-full); background: var(--accent-500); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- Toggle switch ---------- */
.switch { position: relative; height: 24px; width: 44px; border-radius: var(--r-full); background: var(--line-strong); border: none; cursor: pointer; transition: background .15s; }
.switch.is-on { background: var(--accent-600); }
.switch__knob { position: absolute; top: 2px; left: 2px; height: 20px; width: 20px; border-radius: var(--r-full); background: #fff; box-shadow: var(--shadow-sm); transition: transform .15s; }
.switch.is-on .switch__knob { transform: translateX(20px); }

/* ---------- Heart / favorite ---------- */
.fav { display: flex; height: 28px; width: 28px; flex-shrink: 0; align-items: center; justify-content: center; border: none; background: transparent; border-radius: var(--r-full); font-size: 15px; line-height: 1; color: var(--line-strong); cursor: pointer; transition: transform .15s, color .15s; }
.fav:hover { transform: scale(1.1); color: var(--muted); }
.fav.is-on { color: var(--rose-500); }
.fav-wrap { border-radius: var(--r-full); background: rgb(255 255 255 / .9); box-shadow: var(--shadow-sm); }

/* ---------- Spacing & misc utilities (reusable) ---------- */
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.text-center { text-align: center; }
.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.heart-rose { color: var(--rose-500); }
.measure { max-width: 24rem; }