/* Design tokens (spec 3.2-3.4). Every text color is >= 4.5:1 on --bg, --surface and --surface-2 in its
   mode (WCAG 2.x formula). Color is never the only signal: every status also has an icon and a word. */
:root {
  color-scheme: light dark;
  --bg: #F6F4EF; --surface: #FFFFFF; --surface-2: #EFECE4;
  --text: #1B1E24; --muted: #5B6170;
  --accent: #A3480A; --on-accent: #FFFFFF;
  --ok: #1E7A4C; --warn: #94560A; --bad: #B3261E;
  --line: #DEDAD0; --focus: #2457C5;
  /* tinted washes for cards and chips (not text) */
  --ok-wash: #E3F1E8; --warn-wash: #FBEEDB; --bad-wash: #FBE4E1; --accent-wash: #F7E7DA;
  /* feature colors (icon chips, section labels; text-safe) */
  --f-health: #0F766E; --f-delivery: #8A5A00; --f-doorbell: #6D28D9; --f-spot: #136C37;
  --f-snow: #0369A1; --f-critter: #8A4B14; --f-party: #B93D0B; --f-visits: #BE185D; --f-lights: #9F1239; --f-core: #5B6170;
  /* the porch light: the brand's warm glow */
  --glow: rgba(242, 160, 61, 0.28); --glow-soft: rgba(242, 160, 61, 0.10);
  --shadow: 0 1px 2px rgba(27, 30, 36, 0.06), 0 6px 20px rgba(27, 30, 36, 0.07);
  --shadow-lift: 0 2px 4px rgba(27, 30, 36, 0.08), 0 14px 34px rgba(27, 30, 36, 0.12);
  --edge: transparent;
  --picture-bg: #D9D4C8;
  --scrim: rgba(14, 19, 32, 0.55);

  /* type: rem, so browser zoom and text size settings work (17 px body) */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --fs-display: 2.125rem; --fs-title: 1.375rem; --fs-headline: 1.0625rem; --fs-body: 1.0625rem; --fs-caption: 0.8125rem;
  --lh: 1.45;

  /* 4-px grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --r-card: 20px; --r-chip: 12px; --r-pill: 999px;

  /* motion */
  --t-fast: 200ms; --ease: cubic-bezier(.2, .7, .3, 1); --spring: cubic-bezier(.2, .9, .3, 1.2); --t-card: 320ms;
  --tabbar-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1320; --surface: #161C2C; --surface-2: #1F2638;
    --text: #EEF0F5; --muted: #A4ABBD;
    --accent: #F5B544; --on-accent: #1B1300;
    --ok: #57C98F; --warn: #F2B655; --bad: #FF8A80;
    --line: #2A3247; --focus: #8AB4F8;
    --ok-wash: rgba(87, 201, 143, 0.13); --warn-wash: rgba(242, 182, 85, 0.14); --bad-wash: rgba(255, 138, 128, 0.14); --accent-wash: rgba(245, 181, 68, 0.13);
    --f-health: #5EEAD4; --f-delivery: #FBBF24; --f-doorbell: #C4B5FD; --f-spot: #86EFAC;
    --f-snow: #7DD3FC; --f-critter: #FDBA74; --f-party: #FB923C; --f-visits: #F9A8D4; --f-lights: #FDA4AF; --f-core: #A4ABBD;
    --glow: rgba(245, 181, 68, 0.22); --glow-soft: rgba(245, 181, 68, 0.07);
    --shadow: none; --shadow-lift: 0 10px 30px rgba(0, 0, 0, 0.35);
    --edge: rgba(255, 255, 255, 0.06); /* dark mode: a 1-px lighter top edge instead of a shadow */
    --picture-bg: #1F2638;
    --scrim: rgba(0, 0, 0, 0.6);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 100ms; --t-card: 100ms; --spring: linear; }
}