/* ==========================================================================
   We Care — design tokens
   A quiet palette: warm paper, sage green, soft sky, a touch of sand, and a
   gentle rose reserved for moments of care. Nothing loud, nothing alarming.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Type: system stacks only (no third-party font requests = better privacy) */
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, Georgia, "Times New Roman", serif;

  /* Surfaces */
  --bg: #F6F4EF;
  --surface: #FFFFFF;
  --surface-2: #F1EEE6;
  --surface-3: #E8E4D9;
  --ambient-1: rgba(160, 199, 180, 0.34);
  --ambient-2: rgba(166, 191, 214, 0.28);

  /* Ink */
  --ink: #22302B;
  --ink-2: #4F605A;
  --ink-3: #66756F;
  --line: #E4E0D5;
  --line-strong: #CFCABB;

  /* Brand (sage) */
  --primary: #3F6B5B;
  --primary-hover: #315548;
  --on-primary: #FFFFFF;
  --primary-soft: #DEEAE3;
  --primary-soft-hover: #D0E1D8;
  --on-primary-soft: #2E5245;

  /* Sky — calm, informational */
  --accent-soft: #DFE9F2;
  --accent-ink: #3D6180;

  /* Sand — warm, "someone is reaching out" */
  --warm-soft: #F5E9DA;
  --warm-ink: #7C5229;

  /* Rose — care & crisis, used sparingly */
  --care-soft: #FBEFEA;
  --care-line: #E6B7A8;
  --care-ink: #8F4535;

  --focus: #2F6FA8;
  --overlay: rgba(24, 34, 30, 0.42);

  /* Breathing orb */
  --orb-a: #D6E8DE;
  --orb-b: #6E9F8A;
  --orb-glow: rgba(110, 159, 138, 0.35);

  /* Shape & depth */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(34, 48, 43, 0.05), 0 2px 10px rgba(34, 48, 43, 0.04);
  --shadow-2: 0 2px 4px rgba(34, 48, 43, 0.05), 0 14px 36px rgba(34, 48, 43, 0.08);
  --shadow-3: 0 10px 28px rgba(34, 48, 43, 0.12), 0 30px 70px rgba(34, 48, 43, 0.16);

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

  /* Type scale */
  --t-xs: 0.8125rem;
  --t-sm: 0.9rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  --t-3xl: clamp(2.3rem, 1.4rem + 3.4vw, 3.7rem);

  /* Layout */
  --maxw: 1080px;
  --maxw-text: 680px;
  --header-h: 68px;
  --tabbar-h: 68px;
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* ---- Dark: explicit choice ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F1513;
  --surface: #17201D;
  --surface-2: #1E2A26;
  --surface-3: #283832;
  --ambient-1: rgba(90, 140, 118, 0.18);
  --ambient-2: rgba(80, 110, 140, 0.16);
  --ink: #E7EEEA;
  --ink-2: #B3C2BB;
  --ink-3: #8FA098;
  --line: #263330;
  --line-strong: #34453F;
  --primary: #8EC4AC;
  --primary-hover: #A6D4C0;
  --on-primary: #0E1A15;
  --primary-soft: #213429;
  --primary-soft-hover: #294034;
  --on-primary-soft: #C1E2D2;
  --accent-soft: #1D2A36;
  --accent-ink: #A9C7E0;
  --warm-soft: #2B241C;
  --warm-ink: #E6C29E;
  --care-soft: #2E1F1B;
  --care-line: #7A4A3E;
  --care-ink: #F0BBAC;
  --focus: #7DB4E6;
  --overlay: rgba(4, 8, 6, 0.62);
  --orb-a: #2C4A3E;
  --orb-b: #8EC4AC;
  --orb-glow: rgba(142, 196, 172, 0.25);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 36px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 10px 28px rgba(0, 0, 0, 0.4), 0 30px 70px rgba(0, 0, 0, 0.45);
}

/* ---- Dark: follow the system unless the person chose light ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0F1513;
    --surface: #17201D;
    --surface-2: #1E2A26;
    --surface-3: #283832;
    --ambient-1: rgba(90, 140, 118, 0.18);
    --ambient-2: rgba(80, 110, 140, 0.16);
    --ink: #E7EEEA;
    --ink-2: #B3C2BB;
    --ink-3: #8FA098;
    --line: #263330;
    --line-strong: #34453F;
    --primary: #8EC4AC;
    --primary-hover: #A6D4C0;
    --on-primary: #0E1A15;
    --primary-soft: #213429;
    --primary-soft-hover: #294034;
    --on-primary-soft: #C1E2D2;
    --accent-soft: #1D2A36;
    --accent-ink: #A9C7E0;
    --warm-soft: #2B241C;
    --warm-ink: #E6C29E;
    --care-soft: #2E1F1B;
    --care-line: #7A4A3E;
    --care-ink: #F0BBAC;
    --focus: #7DB4E6;
    --overlay: rgba(4, 8, 6, 0.62);
    --orb-a: #2C4A3E;
    --orb-b: #8EC4AC;
    --orb-glow: rgba(142, 196, 172, 0.25);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 36px rgba(0, 0, 0, 0.3);
    --shadow-3: 0 10px 28px rgba(0, 0, 0, 0.4), 0 30px 70px rgba(0, 0, 0, 0.45);
  }
}