:root{
  /* Name typography (kids/members) */
  --member-name-weight: 400;
  --member-name-size: 18px;

  /* Avatar */
  --avatar-size: 140px; /* can be overridden by app */
  --avatar-shadow: 0 2px 10px rgba(0,0,0,.08);

  /* Family brand in top bars */
  --family-name-weight: 600;
  --family-name-size: 18px;

  /* Page title (e.g., Routines, Calendar) */
  --title-weight: 500;
  --title-size: 20px;

  /* Shared layout tokens */
  --page-scale: 1;
}

*{box-sizing:border-box}

/* Baseline colors/typography (apps may override their :root values) */
html,body{height:100%}
body{margin:0;background:var(--bg, #ffffff);color:var(--ink, #1f2937);font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;}

/* Shared header scaffolding */
.top-bar, .app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:var(--card, #ffffff);border-bottom:1px solid #e6e6ef;position:sticky;top:0;z-index:10}
.left-section,.right-section{display:flex;align-items:center;gap:12px}
.center-section{display:flex;flex-direction:column;align-items:center;gap:4px}
.title{font-family:Poppins, Inter, ui-sans-serif;font-weight:var(--title-weight);font-size:var(--title-size);letter-spacing:.01em}
.menu-btn{border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer}

/* Shared top strip (extracted from index.html) */
.top-strip{display:flex;align-items:center;justify-content:space-between;padding:12px 32px;background:#ffffff;border-bottom:1px solid #e6e6ef;position:sticky;top:0;z-index:10}
.top-left{display:flex;align-items:center;gap:24px}
.family-title{font-family:Poppins, Inter, ui-sans-serif;font-weight:500;font-size:26px;letter-spacing:.02em}
.top-clock{font-family:Inter, ui-sans-serif;font-weight:300;font-size:32px;letter-spacing:0.12em;color:#4b5563}
.weather{display:flex;align-items:center;gap:16px;color:#374151;font-family:Inter, ui-sans-serif}
.weather .day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0;border-radius:0;background:transparent;border:none}
.weather .label{font-weight:300;font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:.06em}
.weather .temp{font-weight:300;font-size:14px;letter-spacing:.02em;color:#111827}
.weather .icon{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;font-size:22px}

/* Shared identity styles used by calendar and routines */
.member-name, .kid-name{
  font-family: Poppins, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  font-weight: var(--member-name-weight);
  font-size: var(--member-name-size);
  line-height: 1.2;
}

/* Consistent round avatar */
.avatar{
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  object-fit: cover;
  display:block;
  box-shadow: var(--avatar-shadow);
}

/* Shared member color system
   Edit ONLY these dark/base variables to change branding across apps.
   Light variants are derived automatically with color-mix.
*/
:root{
  --color-mom-dark: #07d3ad;
  --color-eleanor-dark: #2d8cff;
  --color-cecilia-dark: #b910ab;
  --color-henry-dark: #f53a0b;
  --color-philippa-dark: #b86aef;
  --color-karla-dark: #f29509;
  --color-dad-dark: #2563eb; /* blue */
  --color-anyone-dark: #10b981; /* emerald */
}

/* Map kid/member classes to event variables for apps (calendar + routines) */
.kid-mom{ --evt-border: var(--color-mom-dark); --evt-bg: color-mix(in srgb, var(--color-mom-dark) 28%, white); --evt-text:#0b1020; }
.kid-eleanor{ --evt-border: var(--color-eleanor-dark); --evt-bg: color-mix(in srgb, var(--color-eleanor-dark) 28%, white); --evt-text:#0b1020; }
.kid-cecilia{ --evt-border: var(--color-cecilia-dark); --evt-bg: color-mix(in srgb, var(--color-cecilia-dark) 28%, white); --evt-text:#0b1020; }
.kid-henry{ --evt-border: var(--color-henry-dark); --evt-bg: color-mix(in srgb, var(--color-henry-dark) 28%, white); --evt-text:#0b1020; }
.kid-philippa{ --evt-border: var(--color-philippa-dark); --evt-bg: color-mix(in srgb, var(--color-philippa-dark) 28%, white); --evt-text:#0b1020; }
.kid-karla{ --evt-border: var(--color-karla-dark); --evt-bg: color-mix(in srgb, var(--color-karla-dark) 28%, white); --evt-text:#0b1020; }
.kid-dad{ --evt-border: var(--color-dad-dark); --evt-bg: color-mix(in srgb, var(--color-dad-dark) 28%, white); --evt-text:#0b1020; }
.kid-anyone{ --evt-border: var(--color-anyone-dark); --evt-bg: color-mix(in srgb, var(--color-anyone-dark) 28%, white); --evt-text:#0b1020; }

/* Family label in headers */
.family-name{
  font-family: Poppins, Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  font-weight: var(--family-name-weight);
  font-size: var(--family-name-size);
}