/* ══════════════════════════════════════════════════════════════
   STYLE GUIDE — Family Hub Design System
   ══════════════════════════════════════════════════════════════

   COLORS — always use CSS custom properties, never hardcode hex
   ─────────────────────────────────────────────────────────────
   --color-text-primary          Page text, headings
   --color-text-secondary        Labels, secondary text
   --color-text-tertiary         Hints, placeholders, muted text
   --color-background-primary    Page background
   --color-background-secondary  Subtle section / card backgrounds
   --color-background-tertiary   Hover / active tint backgrounds
   --color-border                Borders, dividers
   --color-surface               Cards, panels, header/footer bg

   TASK FREQUENCY COLORS
   --daily       Cyan   — daily tasks, primary gradient start
   --weekly      Blue   — weekly tasks, links, active nav states
   --monthly     Purple — monthly tasks, gradient end
   --quarterly   Red    — quarterly tasks
   --yearly      Amber  — yearly tasks

   TYPOGRAPHY
   ─────────────────────────────────────────────────────────────
   Display:  'DM Serif Display', Georgia, serif
             Use for page titles and hero text.
             Gradient text: background: linear-gradient(135deg, var(--daily), var(--monthly));
                            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
   Body/UI:  'DM Sans', system-ui, sans-serif
             Weights available: 300 (light), 400, 500, 600
             Italic available at weight 300

   BORDER RADIUS
   ─────────────────────────────────────────────────────────────
   --radius-sm: 6px     Inputs, small chips, tight containers
   --radius-md: 12px    Cards, standard buttons, containers
   --radius-lg: 20px    Large cards, panels
   100px (pill)         Navigation links, badges, tag chips

   SPACING (informal guide)
   ─────────────────────────────────────────────────────────────
   4px   tight inline gap
   8px   between buttons/items in a row
   12px  small internal padding
   16px  standard section gap
   24px  page horizontal padding
   32px  section vertical padding
   40px+ hero/display padding

   SHARED COMPONENTS (all defined in this file)
   ─────────────────────────────────────────────────────────────
   .site-header            Sticky top header bar (title + nav + code)
   .site-title             Page h1 title on the left
   .site-nav               Nav link group on the right
   .site-nav-link          Ghost pill nav link
   .site-nav-link--active  Filled active state for current app
   .btn-primary            Full-width gradient CTA button
   .spinner                Loading spinner (cyan)
   #toast                  Fixed bottom notification toast

   DARK MODE
   ─────────────────────────────────────────────────────────────
   All color variables auto-swap via @media (prefers-color-scheme: dark).
   Accent colors are brighter in dark mode for contrast.
   Never hardcode colors — use CSS variables throughout.

══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   shared.css — design tokens and base styles used by all pages
══════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --color-text-primary:         #111827;
  --color-text-secondary:       #374151;
  --color-text-tertiary:        #6b7280;
  --color-background-primary:   #f8f7ff;
  --color-background-secondary: #eeedf8;
  --color-background-tertiary:  #e0dff2;
  --color-border:               #d1cfe8;
  --color-surface:              #fff;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --daily:     #06b6d4;
  --weekly:    #3b82f6;
  --monthly:   #a855f7;
  --quarterly: #f43f5e;
  --yearly:    #f59e0b;
}

/* OS dark mode — unless user explicitly chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-text-primary:         #f1f0ff;
    --color-text-secondary:       #c4c2e0;
    --color-text-tertiary:        #8b89aa;
    --color-background-primary:   #13121e;
    --color-background-secondary: #1c1b2c;
    --color-background-tertiary:  #252438;
    --color-border:               #353350;
    --color-surface:              #1c1b2c;
    --daily:     #22d3ee;
    --weekly:    #60a5fa;
    --monthly:   #c084fc;
    --quarterly: #fb7185;
    --yearly:    #fbbf24;
  }
}

/* Manual dark override — ignores OS preference */
:root[data-theme="dark"] {
  --color-text-primary:         #f1f0ff;
  --color-text-secondary:       #c4c2e0;
  --color-text-tertiary:        #8b89aa;
  --color-background-primary:   #13121e;
  --color-background-secondary: #1c1b2c;
  --color-background-tertiary:  #252438;
  --color-border:               #353350;
  --color-surface:              #1c1b2c;
  --daily:     #22d3ee;
  --weekly:    #60a5fa;
  --monthly:   #c084fc;
  --quarterly: #fb7185;
  --yearly:    #fbbf24;
}

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

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

button { cursor: pointer; border: none; background: none; color: inherit; font: inherit; }
input, textarea { font: inherit; color: inherit; }

* { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }

/* ── Site Header ─────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--color-text-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.site-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: none;
  border: 1.5px solid var(--color-border);
  background: transparent;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  white-space: nowrap;
}
.site-nav-link:hover { border-color: var(--weekly); color: var(--weekly); }
.site-nav-link--active {
  background: color-mix(in srgb, var(--weekly) 12%, transparent);
  border-color: var(--weekly);
  color: var(--weekly);
  font-weight: 700;
  pointer-events: none;
}

@media (max-width: 600px) {
  .site-header {
    height: auto;
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 6px;
  }
  .site-title        { order: 1; }
  .household-code-btn { order: 2; margin-left: auto; }
  .site-nav {
    order: 3;
    width: 100%;
    justify-content: center;
    padding-bottom: 4px;
  }
}

/* ── Household code button ───────────────────────────────────── */
.household-code-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  font-family: 'DM Sans', monospace;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.household-code-btn:hover { border-color: var(--daily); color: var(--daily); }
.household-code-btn svg { flex-shrink: 0; }

/* ── Site footer ─────────────────────────────────────────────── */
.site-footer {
  display: flex;
  justify-content: center;
  padding: 16px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.theme-toggle,
.switch-family-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1.5px solid var(--color-border);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.theme-toggle:hover,
.switch-family-btn:hover { border-color: var(--weekly); color: var(--weekly); background: var(--color-background-secondary); }

/* ── Sync dot ────────────────────────────────────────────────── */
.sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4caf50;
  display: inline-block;
  margin-left: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}
.sync-dot.pulse {
  opacity: 1;
  animation: pulse-dot 0.8s ease-out forwards;
}
@keyframes pulse-dot {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(2); }
}

/* ── Screen management ───────────────────────────────────────── */
.screen { display: none; }
.screen.active { display: block; }

/* ── Loading spinner ─────────────────────────────────────────── */
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--daily);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Primary button ──────────────────────────────────────────── */
.btn-primary {
  display: block;
  width: 100%;
  padding: 13px 20px;
  border-radius: var(--radius-md);
  border: none;
  background: linear-gradient(135deg, var(--daily), var(--weekly));
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
  text-align: center;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--daily) 40%, transparent);
  letter-spacing: 0.01em;
}
.btn-primary:hover   { opacity: 0.92; box-shadow: 0 4px 20px color-mix(in srgb, var(--daily) 50%, transparent); transform: translateY(-1px); }
.btn-primary:active  { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* ── Toast ───────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--color-text-primary);
  color: var(--color-background-primary);
  padding: 9px 20px;
  border-radius: 100px;
  font-size: 0.84rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 20000;
  white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }