/* ============================================================
   HearthBoard — design tokens
   Palette derived from the end-goal mockups: warm off-white
   surfaces, near-black ink + buttons, per-person accent colors.
   ============================================================ */

:root {
  color-scheme: light;

  /* --- Surfaces & ink --- */
  --bg:            #ececec;   /* app canvas behind cards (light) */
  --surface:       #ffffff;   /* cards / panels */
  --surface-2:     #f6f5f3;   /* subtle inset / hover */
  --surface-3:     #efeeeb;   /* deeper inset */
  --ink:           #1c1c1e;   /* primary text + primary buttons */
  --ink-2:         #55555a;   /* secondary text */
  --ink-3:         #8a8a90;   /* tertiary / captions */
  --hairline:      #e6e4e0;   /* borders / dividers */
  --hairline-2:    #d9d7d2;

  /* --- Brand accent (the near-black pill buttons) --- */
  --accent:        #1c1c1e;
  --accent-ink:    #ffffff;

  /* --- Person / scope colors ---
     Spec: Hyrum = blue, Annie = coral, Family = amber. */
  --person-hyrum:      #3b7fe0;
  --person-hyrum-soft: #e7f0fc;
  --person-annie:      #e0604f;
  --person-annie-soft: #fbe9e6;
  --person-family:     #b08a2e;
  --person-family-soft:#f6efdd;

  /* --- Category / status --- */
  --good:          #2fa36b;
  --good-soft:     #e4f4ec;
  --warn:          #d98a2b;
  --danger:        #d5493c;

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(20,20,25,.05), 0 1px 1px rgba(20,20,25,.04);
  --shadow-md: 0 4px 14px rgba(20,20,25,.06), 0 1px 3px rgba(20,20,25,.05);
  --shadow-lg: 0 12px 34px rgba(20,20,25,.10);

  /* --- Radii --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* --- Type --- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --fs-hero:  clamp(26px, 3.4vw, 40px);
  --fs-h1:    clamp(22px, 2.4vw, 30px);
  --fs-h2:    18px;
  --fs-body:  15px;
  --fs-sm:    13px;
  --fs-xs:    11.5px;

  /* --- Spacing scale --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* --- Layout --- */
  --sidebar-w: 248px;
  --phone-max: 460px;
  --tabbar-h: 68px;
}

/* Optional dark treatment for overnight dim on the wall. */
:root[data-theme="night"] {
  color-scheme: dark;
  --bg:        #0d0d10;
  --surface:   #16161a;
  --surface-2: #1e1e24;
  --surface-3: #24242b;
  --ink:       #f2f1ee;
  --ink-2:     #a9a8ad;
  --ink-3:     #74747b;
  --hairline:  #2a2a31;
  --hairline-2:#34343c;
  --accent:    #f2f1ee;
  --accent-ink:#16161a;
  --shadow-sm: none;
  --shadow-md: 0 6px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
}