/* ── Cricket Caddy — Shared design tokens & base components ───────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand (invariant) */
  --pink:       #D4166A;
  --pink-dim:   #9e1050;
  --pink-glow:  rgba(212,22,106,.15);

  /* Dark theme (default) */
  --bg:         #0E0610;
  --bg-card:    #17091C;
  --bg-raised:  #200D2A;
  --bg-hover:   #2a1236;
  --border:     #3a1d48;
  --grid-line:  rgba(58,29,72,.7);
  --text:       #EDE3F5;
  --text-dim:   #8a6fa0;
  --text-faint: #4d3860;
  color-scheme: dark;
}

/* Light theme — OS preference */
@media (prefers-color-scheme: light) {
  :root {
    --bg:         #F7F2FC;
    --bg-card:    #FFFFFF;
    --bg-raised:  #EEE6F7;
    --bg-hover:   #E4D9F0;
    --border:     #D0BBEA;
    --grid-line:  rgba(208,187,234,.7);
    --text:       #1A0A24;
    --text-dim:   #6B4D8A;
    --text-faint: #9E82B8;
    --pink-glow:  rgba(212,22,106,.10);
    color-scheme: light;
  }
}

/* Explicit overrides via data-theme (toggle wins over OS) */
:root[data-theme="light"] {
  --bg:         #F7F2FC;
  --bg-card:    #FFFFFF;
  --bg-raised:  #EEE6F7;
  --bg-hover:   #E4D9F0;
  --border:     #D0BBEA;
  --grid-line:  rgba(208,187,234,.7);
  --text:       #1A0A24;
  --text-dim:   #6B4D8A;
  --text-faint: #9E82B8;
  --pink-glow:  rgba(212,22,106,.10);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg:         #0E0610;
  --bg-card:    #17091C;
  --bg-raised:  #200D2A;
  --bg-hover:   #2a1236;
  --border:     #3a1d48;
  --grid-line:  rgba(58,29,72,.7);
  --text:       #EDE3F5;
  --text-dim:   #8a6fa0;
  --text-faint: #4d3860;
  --pink-glow:  rgba(212,22,106,.15);
  color-scheme: dark;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 15px;
  line-height: 1.5;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  padding: 6px 16px;
  font-size: .78rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-btn, 6px);
  cursor: pointer;
  transition: opacity .12s, filter .12s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.btn:hover  { filter: brightness(1.15); }
.btn:active { filter: brightness(.9); }

.btn-primary { background: var(--pink);      color: #fff; }
.btn-ghost   { background: var(--bg-raised); color: var(--text); border: 1px solid var(--border); }
.btn-danger  { background: #8B1A1A;          color: #ffffff; border: 1px solid #c03030; }
.btn-sm      { padding: 3px 10px; font-size: .72rem; }
.btn-xs      { padding: 2px 8px;  font-size: .68rem; }

/* ── Inputs ──────────────────────────────────────────────────────────────── */
/* ONE style for every form field. Covers all current and future input
   types (text, email, date, time, file pickers, …) — only checkbox, radio
   and range keep their native/accent look, since a text-box frame makes no
   sense on those. */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select,
textarea {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn, 6px);
  color: var(--text);
  font-size: .82rem;
  padding: 6px 10px;
  width: 100%;
  outline: none;
  font-family: inherit;
  transition: border-color .12s;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,
select:focus,
textarea:focus { border-color: var(--pink); }

/* Some themes set --radius-btn to a full pill (999px) — fine on buttons
   and single-line inputs, but on a multi-line textarea those corners chop
   into the first/last lines of text. Textareas always cap their rounding. */
textarea { border-radius: 12px; }

input::placeholder,
textarea::placeholder { color: var(--text-faint); }

input[type=range] {
  accent-color: var(--pink);
  width: 100%;
  background: none;
  border: none;
  padding: 0;
}

input[type=checkbox] { accent-color: var(--pink); }

/* ── Card ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card, 10px);
  padding: 16px;
  box-shadow: var(--shadow-card, none);
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pink-dim); }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 200;
}
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 201;
  pointer-events: none;
}
.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  min-width: 360px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  pointer-events: all;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: .85rem;
}

/* ── Form helpers ────────────────────────────────────────────────────────── */
label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 4px;
  letter-spacing: .04em;
}