/* ================================================================
   24/7 Dashboard — Shared Design Tokens & Base Reset
   Linked first in all pages; themes override via html[data-theme].
   ================================================================ */

:root {
  /* Backgrounds */
  --bg: #050506;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-secondary: rgba(255, 255, 255, 0.035);
  --bg-input: rgba(0, 0, 0, 0.28);
  --bg-input-focus: rgba(255, 255, 255, 0.07);
  --bg-dropdown: rgba(20, 20, 25, 0.98);
  --bg-deep: #020203;

  /* Glass surfaces */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: transparent;
  --glass-border-strong: transparent;
  --glass-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.25);

  /* Text — canonical scale */
  --text-1: #FAFAFA;
  --text-2: rgba(255, 255, 255, 0.60);
  --text-3: rgba(255, 255, 255, 0.40);
  --text-4: rgba(255, 255, 255, 0.25);

  /* Aliases — resolve to the canonical scale so themes only set --text-1..4 */
  --text-primary: var(--text-1);
  --text-secondary: var(--text-2);
  --text-tertiary: var(--text-3);
  --text-quaternary: var(--text-4);

  /* Status colours */
  --good: #6ee7b7;
  --success: #6ee7b7;
  --warn: #fbbf24;
  --warning: #fbbf24;
  --bad: #ff8a8a;
  --danger: #ff8a8a;
  --info: rgba(125, 211, 252, 0.90);

  /* Accent */
  --accent: #1D9E75;
  --accent-glow: rgba(29, 158, 117, 0.35);

  /* Borders */
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.04);

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Geometry — theme-neutral, never overridden by themes */
  --radius-card: 18px;
  --radius-btn: 12px;
  --radius-input: 10px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* Spacing baseline */
  --space-card: 20px;
  --space-section: 14px;

  /* Mobile chrome bar colour (managed by theme.js) */
  --meta-theme-color: #050506;
}

/* ── Graphite — cool neutral with periwinkle accent ── */
html[data-theme="graphite"] {
  --bg: #0E0E11;
  --bg-card: rgba(255, 255, 255, 0.055);
  --bg-secondary: rgba(255, 255, 255, 0.04);
  --bg-input: rgba(0, 0, 0, 0.32);
  --bg-input-focus: rgba(255, 255, 255, 0.08);
  --bg-dropdown: rgba(18, 18, 24, 0.98);
  --bg-deep: #080809;
  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-border: transparent;
  --glass-border-strong: transparent;
  --text-1: #E8E8EC;
  --text-2: rgba(232, 232, 236, 0.60);
  --text-3: rgba(232, 232, 236, 0.40);
  --text-4: rgba(232, 232, 236, 0.24);
  --accent: #8AA0FF;
  --accent-glow: rgba(138, 160, 255, 0.30);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --border-soft: rgba(255, 255, 255, 0.05);
  --good: #7DD3A8;
  --success: #7DD3A8;
  --warn: #D4A840;
  --warning: #D4A840;
  --bad: #E87070;
  --danger: #E87070;
  --info: rgba(130, 190, 255, 0.90);
  --meta-theme-color: #0E0E11;
}

/* ── Paper — warm off-white light mode ── */
html[data-theme="paper"] {
  --bg: #F4F1EA;
  --bg-card: rgba(0, 0, 0, 0.03);
  --bg-secondary: rgba(0, 0, 0, 0.025);
  --bg-input: rgba(0, 0, 0, 0.07);
  --bg-input-focus: rgba(0, 0, 0, 0.10);
  --bg-dropdown: rgba(252, 250, 246, 0.98);
  --bg-deep: #EDE9E0;
  --glass-bg: rgba(0, 0, 0, 0.03);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-border-strong: rgba(0, 0, 0, 0.12);
  --glass-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.80) inset,
    0 12px 40px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.06);
  --text-1: #1A1815;
  --text-2: rgba(26, 24, 21, 0.65);
  --text-3: rgba(26, 24, 21, 0.45);
  --text-4: rgba(26, 24, 21, 0.28);
  --accent: #1D9E75;
  --accent-glow: rgba(29, 158, 117, 0.18);
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --border-soft: rgba(0, 0, 0, 0.05);
  --good: #1A8C66;
  --success: #1A8C66;
  --warn: #A87B0E;
  --warning: #A87B0E;
  --bad: #C0392B;
  --danger: #C0392B;
  --info: rgba(14, 100, 180, 0.90);
  --meta-theme-color: #F4F1EA;
  color-scheme: light;
}

/* ── Paper theme — global surface overrides ─────────────────────────────
   These ensure body/panels/topbar use tokens even where per-page CSS has
   hardcoded dark values. Specificity beats page inline-style-block :root,
   but not important! declarations. Applied only in Paper (light) mode.
   ─────────────────────────────────────────────────────────────────────── */
html[data-theme="paper"] body,
html[data-theme="paper"] html {
  background: var(--bg);
  color: var(--text-1);
}

/* topbar.js injects these classes — token-ify them for Paper */
html[data-theme="paper"] .topbar {
  background: var(--bg);
  border-bottom-color: var(--border);
}
html[data-theme="paper"] .topbar-pill {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-1);
}
html[data-theme="paper"] .topbar-pill:hover {
  background: var(--bg-secondary);
  border-color: var(--border-strong);
}
html[data-theme="paper"] .topbar-pill-label { color: var(--text-3); }
html[data-theme="paper"] .topbar-pill-count { color: var(--text-1); }
html[data-theme="paper"] .topbar-water-pill {
  background: rgba(14, 100, 180, 0.07);
  border-color: rgba(14, 100, 180, 0.14);
  color: var(--text-1);
}
html[data-theme="paper"] .topbar-water-add {
  background: linear-gradient(180deg, rgba(14,100,180,0.18), rgba(29,158,117,0.18));
  border-color: rgba(14, 100, 180, 0.14);
  color: var(--text-1);
}

/* Settings panel (index.html) */
html[data-theme="paper"] .settings-panel {
  background: var(--bg-dropdown);
  border-left-color: var(--border);
}
html[data-theme="paper"] .settings-close,
html[data-theme="paper"] .settings-btn { color: var(--text-3); }
html[data-theme="paper"] .settings-btn { background: var(--bg-card); border-color: var(--border); }
html[data-theme="paper"] .settings-btn:hover { background: var(--bg-secondary); }
html[data-theme="paper"] .settings-group label,
html[data-theme="paper"] .settings-section-title { color: var(--text-3); }
html[data-theme="paper"] .settings-row { color: var(--text-2); }
html[data-theme="paper"] .settings-num-input,
html[data-theme="paper"] .settings-select {
  background: var(--bg-input);
  border-color: var(--border);
  color: var(--text-1);
}
html[data-theme="paper"] .settings-toggle {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}
html[data-theme="paper"] .settings-hint { color: var(--text-3); }
html[data-theme="paper"] .settings-select option { background: var(--bg-dropdown); color: var(--text-1); }

/* Paper theme — white gradient buttons → accent-coloured for visibility */
html[data-theme="paper"] .goal-add-btn,
html[data-theme="paper"] .water-plus,
html[data-theme="paper"] .water-half,
html[data-theme="paper"] .habit-add-btn,
html[data-theme="paper"] .btn.primary,
html[data-theme="paper"] .seg button.active,
html[data-theme="paper"] .rep.active,
html[data-theme="paper"] .stack-progress-fill {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 2px 8px var(--accent-glow) !important;
}

/* Paper theme — progress tracks need dark overlay, not white */
html[data-theme="paper"] .water-widget-bar,
html[data-theme="paper"] .water-bar-track,
html[data-theme="paper"] .stack-progress-track {
  background: rgba(0, 0, 0, 0.10);
}

/* Paper theme — card/input backgrounds with rgba(255,255,255) inline styles */
html[data-theme="paper"] [style*="rgba(255,255,255"] {
  /* Note: this selector cannot override inline styles — addressed per-element above */
}

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

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Prevent media from breaking layout */
img, video, canvas, svg { max-width: 100%; }

/* Health subnav spacing */
body.has-subnav { scroll-padding-top: 96px; }

/* ── Accessibility ─────────────────────────────────────────── */

/* Visible focus ring for keyboard navigation — respects theme accent */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Suppress focus ring for mouse/touch users while keeping it for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* Reduced motion: disable animations for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Keep scroll-behavior smooth for accessibility */
  html { scroll-behavior: auto; }
}

/* Minimum tap target size for interactive elements (iOS/mobile best practice) */
button, [role="button"], a[href],
input[type="checkbox"], input[type="radio"],
select, .clickable {
  min-height: 44px;
  min-width: 44px;
}

/* Exception: inline elements and small chips that would break layout */
.topbar button, .topbar a,
.ai-chip, .day-chip,
.energy-btn,
button.habit-check, button.stack-check {
  min-height: unset;
  min-width: unset;
}