/* LexyBooster · Soft Card design system
 * Drop-in CSS — no framework required.
 * Theme: data-theme="light" (default) | data-theme="dark"
 */

:root, [data-theme="light"] {
  --sc-bg: #EEF2EE;
  --sc-surface: #FFFFFF;
  --sc-surface-alt: #F5F8F5;
  --sc-ink: #16221A;
  --sc-ink-soft: #3F4D44;
  --sc-muted: #6F7E73;
  --sc-line: #DCE5DE;
  --sc-accent: #3F8A5C;
  --sc-accent-soft: #DDEDE3;
  --sc-accent-ink: #FFFFFF;
  --sc-warm: #C77A2A;
  --sc-cool: #5A6FB8;
  --sc-danger: #C24F4F;
  --sc-shadow-sm: 0 1px 3px rgba(20,40,28,0.04);
  --sc-shadow:    0 1px 2px rgba(20,40,28,0.04), 0 8px 24px rgba(20,40,28,0.06);
  --sc-shadow-lg: 0 4px 16px rgba(20,40,28,0.08);

  --sc-r-sm: 12px;
  --sc-r-md: 16px;
  --sc-r-lg: 20px;
  --sc-r-xl: 24px;
  --sc-r-pill: 999px;

  --sc-font: 'Inter', system-ui, -apple-system, sans-serif;
  --sc-font-display: 'Fraunces', Georgia, serif;
  --sc-font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="dark"] {
  --sc-bg: #0F1411;
  --sc-surface: #19211C;
  --sc-surface-alt: #141A16;
  --sc-ink: #E5EFE7;
  --sc-ink-soft: #B8C8BC;
  --sc-muted: #8FA192;
  --sc-line: #23302A;
  --sc-accent: #54A578;
  --sc-accent-soft: #1F2E25;
  --sc-accent-ink: #0F1411;
  --sc-warm: #D89259;
  --sc-cool: #8AA0DC;
  --sc-danger: #E07474;
  --sc-shadow-sm: none;
  --sc-shadow: none;
  --sc-shadow-lg: none;
}

/* Reset minimal */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--sc-bg);
  color: var(--sc-ink);
  font-family: var(--sc-font);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Typography */
.sc-display { font-family: var(--sc-font-display); font-weight: 500; letter-spacing: -1.2px; line-height: 1.05; }
.sc-eyebrow { font-family: var(--sc-font-mono); font-size: 11px; letter-spacing: 1.5px; color: var(--sc-muted); text-transform: uppercase; }
.sc-muted { color: var(--sc-muted); }

/* Card */
.sc-card { background: var(--sc-surface); border-radius: var(--sc-r-lg); padding: 16px; box-shadow: var(--sc-shadow-sm); }
.sc-card-lg { padding: 20px; border-radius: var(--sc-r-xl); }

/* Button */
.sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; font-family: inherit;
  padding: 14px 18px; border-radius: var(--sc-r-md);
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: filter 120ms ease;
}
.sc-btn:hover { filter: brightness(0.96); }
.sc-btn-primary { background: var(--sc-accent); color: var(--sc-accent-ink); }
.sc-btn-secondary { background: var(--sc-accent-soft); color: var(--sc-accent); }
.sc-btn-ghost { background: transparent; color: var(--sc-ink); border: 1px solid var(--sc-line); }
.sc-btn-pill { border-radius: var(--sc-r-pill); padding: 10px 18px; font-size: 14px; }
.sc-btn-block { width: 100%; }

/* Chip */
.sc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sc-accent-soft); color: var(--sc-accent);
  padding: 4px 10px; border-radius: var(--sc-r-pill);
  font-size: 12px; font-weight: 600;
}

/* Progress segments */
.sc-segs { display: flex; gap: 4px; }
.sc-seg { flex: 1; height: 8px; border-radius: 4px; background: var(--sc-accent-soft); }
.sc-seg.is-on { background: var(--sc-accent); }

/* Progress bar */
.sc-bar { height: 8px; border-radius: 4px; background: var(--sc-accent-soft); overflow: hidden; }
.sc-bar > i { display: block; height: 100%; background: var(--sc-accent); border-radius: 4px; }

/* Stat tile */
.sc-stat { background: var(--sc-surface); border-radius: var(--sc-r-md); padding: 14px; text-align: center; box-shadow: var(--sc-shadow-sm); }
.sc-stat .v { font-size: 22px; font-weight: 700; line-height: 1; }
.sc-stat .l { font-size: 11px; color: var(--sc-muted); margin-top: 4px; }
.sc-stat .d { width: 6px; height: 6px; border-radius: 50%; margin: 0 auto 8px; background: var(--sc-accent); }

/* Pill nav (bottom) */
.sc-pill-nav {
  position: fixed; left: 16px; right: 16px; bottom: 16px;
  background: var(--sc-surface); border-radius: var(--sc-r-pill);
  padding: 6px; display: flex; box-shadow: var(--sc-shadow-lg);
  z-index: 50;
}
.sc-pill-nav a {
  flex: 1; text-align: center; padding: 10px;
  font-size: 13px; font-weight: 500; color: var(--sc-muted);
  border-radius: var(--sc-r-pill); text-decoration: none;
}
.sc-pill-nav a.is-active { background: var(--sc-accent); color: var(--sc-accent-ink); }

/* Top header pattern */
.sc-screen-header { padding: 14px 20px 8px; }
.sc-screen-header h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.6px; }
.sc-screen-header .sc-eyebrow { margin-bottom: 4px; }

/* Layout helpers */
.sc-stack { display: flex; flex-direction: column; }
.sc-stack > * + * { margin-top: var(--sc-gap, 12px); }
.sc-row { display: flex; align-items: center; }
.sc-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.sc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Forms */
.sc-input {
  width: 100%; padding: 12px 14px;
  background: var(--sc-surface); color: var(--sc-ink);
  border: 1px solid var(--sc-line); border-radius: var(--sc-r-md);
  font-family: inherit; font-size: 15px;
}
.sc-input:focus { outline: 2px solid var(--sc-accent); outline-offset: -1px; border-color: transparent; }

/* List card (settings rows) */
.sc-list { background: var(--sc-surface); border-radius: var(--sc-r-md); box-shadow: var(--sc-shadow-sm); overflow: hidden; }
.sc-list-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--sc-line); }
.sc-list-row:last-child { border-bottom: none; }
.sc-list-row .icon { width: 32px; height: 32px; border-radius: 10px; background: var(--sc-accent-soft); color: var(--sc-accent); display: grid; place-items: center; font-size: 14px; }
.sc-list-row .title { flex: 1; font-size: 15px; font-weight: 500; }
.sc-list-row .sub { font-size: 13px; color: var(--sc-muted); }
.sc-list-row .chev { color: var(--sc-muted); font-size: 16px; }