/* public/shared.css
   Common design tokens, previously copy-pasted into every page's own
   <style> block (30+ copies of the same :root). Centralizing them here
   means a palette tweak happens once instead of a 30-file find/replace,
   and keeps every page's light-mode defaults guaranteed identical.
   tabbar.js's html[data-theme="dark"] block still overrides these for
   dark mode — that logic is unchanged, it just now overrides one
   canonical set of light-mode values instead of 30 duplicated ones. */
:root{
  --ink:#1B1B2F;
  --cream:#FFF8F0;
  --coral:#FF6F59;
  --gold:#E8B86D;
  --rose:#D88C9A;
  --line:rgba(27,27,47,0.12);
  --ink-rgb:27,27,47;
  --card-bg:#fff;
  --muted:rgba(var(--ink-rgb),0.65);
  --muted-strong:rgba(var(--ink-rgb),0.7);
  --switch-off:rgba(var(--ink-rgb),0.15);
  --msg-error-bg:rgba(255,111,89,0.12); --msg-error-text:#B8401F;
  --msg-success-bg:rgba(122,168,122,0.15); --msg-success-text:#3E6B3E;

  /* Coral passes contrast fine as a background (white text on it) or as a
     decorative accent (icons, borders, dividers), but at ~2.76:1 it fails
     WCAG AA as foreground text on white/cream — this darker variant is
     for that one specific case: color:var(--coral-text) instead of
     color:var(--coral) wherever coral is used as text/link color. */
  --coral-text:#C93D26;
}

*{box-sizing:border-box;}

/* Shared loading state — replaces a plain "Loading…" text jump with a
   small spinner, used as: <div id="loading" class="loading-state">
   <div class="spinner"></div></div>. The #loading id stays whatever each
   page's own script already toggles/hides. */
.loading-state{ padding:60px 0; text-align:center; }
.spinner{
  width:28px; height:28px; margin:0 auto;
  border:3px solid rgba(var(--ink-rgb),0.12);
  border-top-color:var(--coral);
  border-radius:50%;
  animation:cc-spin 0.7s linear infinite;
}
@keyframes cc-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .spinner{ animation:none; border-top-color:rgba(var(--ink-rgb),0.35); }
}

/* Deep-link highlight — briefly tints whatever item a dashboard "Recent
   moments" link jumped straight to, applied/removed by deep-link.js. */
.deep-link-highlight{ animation:cc-deep-link-fade 2s ease; border-radius:12px; }
@keyframes cc-deep-link-fade{
  0%{ background:rgba(255,111,89,0.22); }
  100%{ background:transparent; }
}
@media (prefers-reduced-motion: reduce){
  .deep-link-highlight{ animation:none; background:rgba(255,111,89,0.22); }
}