/* ============================================================================
   FAMILY OBSERVATORY : DESIGN TOKENS
   The single source of truth. Public site AND /observatory labs link this file.
   Never fork these values into a page. v1.0.0 : 2026-07-10
   ----------------------------------------------------------------------------
   Emotional brief: calm, trustworthy, private, substantial, non-medical,
   non-alarmist. A premium consumer-technology feel that respects older adults.
   ========================================================================== */

:root {
  /* --- Brand: evergreen presence -----------------------------------------
     Pine-teal reads as calm, steady, evergreen, "present" and "okay". It is
     deliberately NOT clinical blue (hospital) and NOT alarm red (security). */
  --brand:            #2E6E62;   /* primary */
  --brand-strong:     #235349;   /* pressed / deep */
  --brand-soft:       #E7F0ED;   /* tint surface */
  --brand-softer:     #F3F8F6;   /* faint wash */
  --brand-ink:        #16332D;   /* text on brand-soft */

  /* --- Warmth: honey accent (used sparingly, for warmth not alarm) -------- */
  --accent:           #E0A04A;
  --accent-strong:    #C6832F;
  --accent-soft:      #FBF1DF;

  /* --- Neutrals: warm ivory canvas, deep ink ----------------------------- */
  --bg:               #FBF8F2;   /* page canvas, warm ivory */
  --surface:          #FFFFFF;   /* cards, panels */
  --surface-2:        #F6F2E9;   /* alt section band */
  --text:             #1E2A27;   /* primary ink */
  --text-2:           #46534F;   /* secondary */
  --muted:            #6B7772;   /* captions, meta */
  --border:           #E6DFD1;   /* hairlines */
  --border-strong:    #D6CDBB;

  /* --- Status: plain-language states -------------------------------------
     Never communicated by color alone. Always paired with a label + icon. */
  --ok:               #2E7D5B;   /* All Good           */
  --ok-soft:          #E4F1EA;
  --due:              #C6832F;   /* Check-in Due       */
  --due-soft:         #FBF0DA;
  --waiting:          #7C6BA8;   /* No Response Yet    */
  --waiting-soft:     #EEEAF5;
  --help:             #C4553D;   /* Help Requested (warm terracotta, not fire-red) */
  --help-soft:        #F8E7E1;
  --notified:         #35617A;   /* Family Notified    */
  --notified-soft:    #E3EEF3;

  /* --- Focus: visible, high-contrast, never removed ---------------------- */
  --focus:            #1B5E4F;
  --focus-ring:       0 0 0 3px #FBF8F2, 0 0 0 6px #2E6E62;

  /* --- Typography --------------------------------------------------------
     Display serif = warmth + substance (trust). UI sans = clarity + legibility.
     System-first for performance and privacy. A licensed variable serif
     ("Source Serif 4" / similar) is the documented Phase-2 upgrade; the stack
     below degrades gracefully to it. */
  --font-display: "Source Serif 4", "Iowan Old Style", "Palatino Linotype",
                  Palatino, Georgia, "Times New Roman", serif;
  --font-sans:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                  Arial, "Noto Sans", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Type scale (1.200 minor-third, generous for older-adult legibility).
     Base is 18px, not 16px: this product's readers are 40-90+. */
  --fs-base:  1.125rem;   /* 18px body baseline            */
  --fs-sm:    1rem;       /* 16px meta/fine (never smaller for content) */
  --fs-xs:    0.8125rem;  /* 13px labels/eyebrows only     */
  --fs-lg:    1.35rem;
  --fs-xl:    1.62rem;
  --fs-2xl:   1.95rem;
  --fs-3xl:   2.5rem;
  --fs-4xl:   3.15rem;
  --fs-5xl:   3.95rem;
  --fs-6xl:   4.75rem;

  --lh-tight: 1.08;
  --lh-snug:  1.28;
  --lh-body:  1.62;   /* roomy for readability */

  --tracking-eyebrow: 0.16em;
  --tracking-wordmark: 0.24em;

  /* --- Spacing (4px base) ------------------------------------------------ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* --- Radius ------------------------------------------------------------ */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   30px;
  --radius-pill: 999px;

  /* --- Borders ----------------------------------------------------------- */
  --border-hair:  1px solid var(--border);
  --border-solid: 1px solid var(--border-strong);

  /* --- Shadows (soft, low, premium: no harsh drop shadows) --------------- */
  --shadow-xs: 0 1px 2px rgba(30, 42, 39, 0.06);
  --shadow-sm: 0 2px 8px rgba(30, 42, 39, 0.06), 0 1px 2px rgba(30, 42, 39, 0.05);
  --shadow-md: 0 10px 30px rgba(30, 42, 39, 0.08), 0 2px 6px rgba(30, 42, 39, 0.05);
  --shadow-lg: 0 24px 60px rgba(30, 42, 39, 0.12), 0 6px 16px rgba(30, 42, 39, 0.06);

  /* --- Containers / layout ----------------------------------------------- */
  --container-sm: 40rem;
  --container-md: 60rem;
  --container-lg: 74rem;
  --container-xl: 82rem;
  --gutter:       clamp(1.25rem, 4vw, 3rem);

  /* --- Touch (senior-first: larger than the 44px WCAG floor) ------------- */
  --touch-min:    48px;
  --touch-senior: 64px;   /* senior check-in controls */

  /* --- Motion (respects reduced-motion; motion is never load-bearing) ---- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  140ms;
  --dur:       220ms;
  --dur-slow:  420ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}