/* ============================================================
   FUEL — base.css
   Variables · Reset · Typography · Animations
   ============================================================ */

/* ── CSS VARIABLES — DARK (default) ────────────────────────── */
:root {
  --bg:#080a09; --surface:rgba(18,22,20,.82); --surface2:rgba(255,255,255,.065);
  --border:rgba(255,255,255,.105); --white:#f7f4ec; --muted:rgba(247,244,236,.58);
  --green:#62d394; --green-dim:rgba(98,211,148,.15);
  --amber:#f2a65a; --amber-dim:rgba(242,166,90,.15);
  --blue:#7ab7ff; --blue-dim:rgba(122,183,255,.14);
  --red:#ff7a7a; --red-dim:rgba(255,122,122,.14);
  --purple:#b69cff; --purple-dim:rgba(182,156,255,.15);
  --radius:24px;
  --shadow-sm:0 6px 18px rgba(0,0,0,.16);
  /* Accent glow — overridden dynamically by applyAppearanceSettings in ui.js */
  --accent-glow:rgba(98,211,148,.20);
  --accent-glow-border:rgba(98,211,148,.28);
  --accent-drop-shadow:rgba(98,211,148,.45);
  --accent-border-mid:rgba(98,211,148,.35);
  --shadow-md:0 14px 36px rgba(0,0,0,.22);
  --shadow-lg:0 26px 70px rgba(0,0,0,.38);
  --glass-blur:blur(22px) saturate(135%);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* ── CSS VARIABLES — LIGHT ──────────────────────────────────── */
body.light {
  --bg:#f6f7f1; --surface:rgba(255,255,255,.80); --surface2:rgba(30,41,59,.055);
  --border:rgba(15,23,42,.105); --white:#121826; --muted:rgba(18,24,38,.56);
  --green:#248a57; --green-dim:rgba(36,138,87,.13);
  --amber:#a85f1b; --amber-dim:rgba(168,95,27,.13);
  --blue:#245fcf; --blue-dim:rgba(36,95,207,.12);
  --red:#c92d2d; --red-dim:rgba(201,45,45,.12);
  --purple:#6d3fd1; --purple-dim:rgba(109,63,209,.12);
  --shadow-sm:0 5px 16px rgba(15,23,42,.06);
  --shadow-md:0 16px 42px rgba(15,23,42,.085);
  --shadow-lg:0 30px 80px rgba(15,23,42,.14);
}

/* ── GLOBAL RESET ───────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html, body {
  height:100%; background:var(--bg)!important; color:var(--white);
  font-family:'DM Sans',sans-serif; overflow:hidden;
  -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased;
}
body.modal-open .scroll,
body.modal-open .app { overflow:hidden!important; }
body.modal-open { overflow:hidden!important; }
input[type="file"] { display:none; }

/* ── AMBIENT BACKGROUND GRADIENT ───────────────────────────── */
body::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-2;
  background:
    radial-gradient(circle at 8% 0%,rgba(98,211,148,.22),transparent 32%),
    radial-gradient(circle at 90% 18%,rgba(122,183,255,.14),transparent 30%),
    radial-gradient(circle at 50% 100%,rgba(242,166,90,.10),transparent 36%),
    var(--bg);
}
body.light::before {
  background:
    radial-gradient(circle at 8% 0%,rgba(36,138,87,.18),transparent 34%),
    radial-gradient(circle at 92% 20%,rgba(36,95,207,.12),transparent 34%),
    radial-gradient(circle at 50% 100%,rgba(168,95,27,.09),transparent 38%),
    var(--bg);
}

/* ── LIGHT MODE OVERRIDES ───────────────────────────────────── */
body.light { color: #18181b; }
body.light .summary-card, body.light .stat-card, body.light .weight-log-card,
body.light .meal-prep-card, body.light .workout-today, body.light .workout-detail-card,
body.light .log-entry, body.light .result-card, body.light .input-card,
body.light .cal-detail, body.light .settings-section {
  border-color:rgba(0,0,0,0.08);
  box-shadow:0 1px 4px rgba(0,0,0,0.06);
}
body.light .bar-track { background:rgba(0,0,0,0.08); }
body.light .cal-day.has-data { background:#ffffff; }
body.light .cal-day.today { background:rgba(22,101,52,0.10)!important; border-color:var(--green)!important; }
body.light .workout-cal-day { background:#ffffff; }
body.light .spinner { border-top-color:var(--green); border-color:rgba(0,0,0,0.10); }
body.light .analyzing-overlay { background:rgba(245,241,234,0.94); backdrop-filter:blur(12px); }
body.light .analyzing-text { color:var(--muted); }
body.light .login-screen { background:var(--bg); }
body.light .locked-banner { background:#fff8f0; border-color:rgba(120,53,15,0.25); }
body.light .input-card { border-color:rgba(22,101,52,0.25); background:#fafaf8; }
body.light .toast { box-shadow:0 4px 16px rgba(0,0,0,0.15); }
body.light .analytics-chart, body.light .weight-chart {
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(255,255,255,.62))!important;
}
body.light .manual-input, body.light .settings-input,
body.light .weight-input, body.light .login-input,
body.light .serving-input, body.light .set-input, body.light .analytics-input,
body.light select.manual-input, body.light textarea.manual-input,
body.light select.settings-input, body.light select.workout-lib-input {
  background:rgba(255,255,255,.78)!important;
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
.section-title { font-family:'Bebas Neue',sans-serif; font-size:22px; margin-bottom:14px; letter-spacing:.3px; }

/* ── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes slideUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes glow {
  0%,100% { box-shadow:0 0 20px var(--accent-glow); }
  50%      { box-shadow:0 0 40px var(--accent-drop-shadow); }
}

/* ── SELECT DROPDOWNS ───────────────────────────────────────── */
select.settings-input, select.manual-input, select.workout-lib-input {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding-right:42px!important;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%)!important;
  background-position:calc(100% - 22px) 50%, calc(100% - 15px) 50%!important;
  background-size:7px 7px, 7px 7px!important;
  background-repeat:no-repeat!important;
  cursor:pointer;
}
select.settings-input option, select.manual-input option, select.workout-lib-input option {
  background:#141816; color:#f7f4ec;
}
body.light select.settings-input option,
body.light select.manual-input option,
body.light select.workout-lib-input option {
  background:#ffffff; color:#121826;
}