/* Achilles Life Purpose System — theme overrides for light mode.
   Dark mode (default) is defined in each page's :root block.
   Light mode inherits the same names so all downstream CSS "just works".
*/

html[data-theme="light"] {
  --bg:    #f5f0e1;   /* parchment */
  --bg-2:  #ece6d0;
  --bg-3:  #dfd7bc;
  --ink:   #2a241c;   /* deep walnut */
  --ink-2: #4c4335;
  --muted: #7a7158;
  --line:  #c6bda2;
  --gold:  #9a680c;   /* darker for contrast */
  --rust:  #963a1b;
  --ocean: #275b6f;
  --moss:  #445624;
  --plum:  #6b344e;
  --success: #1d9b4e;                      /* vivid green, darker for light bg */
  --success-glow: rgba(29,155,78,0.30);
  --accent: var(--gold);
}

html[data-theme="light"] body {
  /* Disable the flashy grain/drift — they were designed for a dark canvas.
     Light mode gets a warm paper texture instead (via ::before). */
}

html[data-theme="light"] body::before {
  /* Invert the noise so dark dots sit on light paper. */
  filter: invert(1) brightness(0.7);
  opacity: 0.07 !important;
}

html[data-theme="light"] body::after {
  /* Softer glows suited for a light background */
  background:
    radial-gradient(circle at 18% 22%, rgba(154,104,12,0.08), transparent 30%) !important,
    radial-gradient(circle at 78% 65%, rgba(150,58,27,0.06), transparent 32%) !important,
    radial-gradient(circle at 42% 88%, rgba(39,91,111,0.05), transparent 34%) !important;
}

/* Heavy dark overlays need to become light */
html[data-theme="light"] .modal-backdrop,
html[data-theme="light"] .modal-backdrop.open {
  background: rgba(245,240,225,0.88) !important;
  backdrop-filter: blur(5px);
}

html[data-theme="light"] .card:hover,
html[data-theme="light"] .modal {
  box-shadow: 0 10px 30px rgba(42,36,28,0.12);
}

/* Primary buttons — text must be the LIGHT bg color for contrast on gold */
html[data-theme="light"] .btn,
html[data-theme="light"] .modal button.primary,
html[data-theme="light"] .status-btn.active,
html[data-theme="light"] .gs-head .add-btn,
html[data-theme="light"] .week-bar button.nav.today,
html[data-theme="light"] .week-bar a.nav.today,
html[data-theme="light"] .add-btn,
html[data-theme="light"] setup .btn {
  color: #f5f0e1 !important;
}
html[data-theme="light"] .btn:hover,
html[data-theme="light"] .modal button.primary:hover,
html[data-theme="light"] .week-bar button.nav.today:hover,
html[data-theme="light"] .week-bar a.nav.today:hover {
  background: #b47d10;
}

/* Setup + Login submit button */
html[data-theme="light"] button[type="submit"],
html[data-theme="light"] form.card button:not([type]) {
  color: #f5f0e1 !important;
}

/* Rating slider track gradient uses the accent → needs the lighter bg for the empty part */
html[data-theme="light"] .rating-block input[type="range"]::-webkit-slider-thumb {
  border-color: var(--bg) !important;
}
html[data-theme="light"] .rating-block input[type="range"]::-moz-range-thumb {
  border-color: var(--bg) !important;
}

/* Habit grid done cells — vivid green success tint on light parchment */
html[data-theme="light"] .cell.status-done {
  background: linear-gradient(135deg, rgba(29,155,78,0.22), rgba(29,155,78,0.08)) !important;
  box-shadow: inset 0 0 0 1px rgba(29,155,78,0.28) !important;
}
html[data-theme="light"] .cell.status-done .mark {
  color: var(--success) !important;
  text-shadow: 0 0 8px var(--success-glow) !important;
}
html[data-theme="light"] .cell.status-partial {
  background: rgba(154,104,12,0.18) !important;
}
html[data-theme="light"] .cell.status-partial .mark { color: var(--gold) !important; }
html[data-theme="light"] .cell.status-missed {
  background: rgba(150,58,27,0.14) !important;
}

/* Progress-bar gradient tweak */
html[data-theme="light"] .progress-bar {
  background: linear-gradient(90deg, var(--gold), var(--moss));
}

/* Heatmap levels — tint for light bg */
html[data-theme="light"] .hm-level-1 { background: rgba(154,104,12,0.12) !important; }
html[data-theme="light"] .hm-level-2 { background: rgba(154,104,12,0.28) !important; }
html[data-theme="light"] .hm-level-3 { background: rgba(154,104,12,0.48) !important; }
html[data-theme="light"] .hm-level-4 { background: rgba(154,104,12,0.72) !important; }

/* Sidebar badges / fixed auth badge — shadow tweak */
html[data-theme="light"] #auth-badge {
  box-shadow: 0 4px 14px rgba(42,36,28,0.15) !important;
  background: var(--bg-2) !important;
}

/* Toast */
html[data-theme="light"] #toast {
  background: var(--bg-2);
  color: var(--ink-2);
}

/* Life Purpose System (lifepurpose.tpl) uses its own theme tokens too —
   override them via the same data-theme selector. */
html[data-theme="light"] {
  --bg-3: #dfd7bc;
}

/* The noise layer in lifepurpose uses an SVG data URL — same filter trick applies */

/* === Mobile overrides — iPhone 13 Pro (390px) and similar === */
@media (max-width: 720px) {
  html, body { font-size: 16px !important; line-height: 1.55 !important; }
  .page { padding: 14px 12px 70px !important; max-width: 100% !important; }
  .kicker, .mono { font-size: 10px !important; }
  .lede { font-size: 17px !important; max-width: 100% !important; }
  h1.title { font-size: 34px !important; line-height: 1.02 !important; }
  .theme-toggle {
    bottom: 12px !important; left: 12px !important;
    width: 40px !important; height: 40px !important; font-size: 17px !important;
  }
  /* Topbar wraps nicely */
  .topbar { flex-wrap: wrap; gap: 8px !important; }
  .topbar .left, .topbar .right { flex-wrap: wrap; gap: 10px !important; row-gap: 6px !important; }
  /* Modal full-bleed on narrow screens */
  .modal-backdrop { padding: 10px !important; align-items: flex-end; }
  .modal { max-width: 100% !important; max-height: 92vh !important; }
  .modal .m-head { padding: 28px 20px 14px !important; }
  .modal .m-body { padding: 16px 20px !important; }
  .modal .m-name { font-size: 28px !important; }
  .modal .m-glyph { width: 92px !important; height: 92px !important; }
  .modal .m-glyph span { font-size: 48px !important; }
  .rating-block, .resources { margin: 0 20px !important; padding: 16px !important; }
  .modal .m-actions { padding: 14px 20px !important; }
}

/* === Global readability polish — applies to every page === */
/* Slightly brighter secondary text for easier reading */
:root {
  --ink-2: #d7cdb1;   /* was #c8bfa6 — nudged brighter */
}
html[data-theme="light"] {
  --ink-2: #3a3227;   /* deeper walnut for stronger contrast */
}

/* Larger, more legible kicker / monospace labels everywhere */
.kicker, .mono {
  font-size: 11px !important;
}
/* Ledes read a touch larger */
.lede {
  font-size: 20px !important;
  line-height: 1.55;
}

/* Theme toggle button */
.theme-toggle {
  position: fixed;
  bottom: 20px; left: 20px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--gold);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 99998;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  font-family: 'Cormorant Garamond', serif;
}
.theme-toggle:hover { transform: scale(1.08); border-color: var(--gold); }
html[data-theme="light"] .theme-toggle {
  box-shadow: 0 4px 14px rgba(42,36,28,0.18);
}