/* Mom & Calm — design tokens.
   Light is the default; dark comes from the system or Settings → Theme
   (html[data-theme="light" | "dark"] overrides the system). */

:root {
  color-scheme: light;

  /* brand accents (brief §5) */
  --rose: #C8607A;
  --rose-deep: #A9465F;      /* text-safe rose on paper (4.9:1) */
  --plum: #5B2F4A;
  --plum-soft: #7A4A66;
  --paper: #F7F2EC;
  --blush: #F6E3E7;
  --sage: #E3EFE6;
  --gold: #E8B949;
  --gold-wash: #FBF1D6;

  /* surfaces & ink */
  --bg: var(--paper);
  --bg-deep: #EFE7DE;
  --surface: #FFFDFA;
  --surface-2: #FBF6F0;
  --surface-sunk: #F2EAE1;
  --line: #E6DBD0;
  --line-strong: #D6C7B8;
  --ink: #2E1E28;            /* body text, 14:1 on paper */
  --ink-2: #5E4D57;          /* secondary, 7:1 */
  --ink-3: #8A7882;          /* hints, 3.9:1 — large/secondary only */
  --accent: var(--rose);
  --accent-ink: var(--rose-deep);
  --accent-wash: var(--blush);
  --on-accent: #FFFFFF;
  --focus: #3F7FB5;

  /* hero (deep plum card) */
  --hero-bg: #5B2F4A;
  --hero-bg-2: #7B3C5C;
  --hero-ink: #FFF6F1;
  --hero-ink-2: #F0D6DE;

  /* member colours: solid (dots, borders, 3:1+ on paper) + wash (backgrounds) */
  --m-rose: #C8607A;   --m-rose-wash: #F6E3E7;
  --m-sage: #5E8C6A;   --m-sage-wash: #E3EFE6;
  --m-sky: #3F7FB5;    --m-sky-wash: #E1ECF6;
  --m-lilac: #8A6BB8;  --m-lilac-wash: #ECE5F5;
  --m-peach: #D2703F;  --m-peach-wash: #FBE6DA;
  --m-gold: #B5870E;   --m-gold-wash: #FAF0D2;
  --m-teal: #2E8A86;   --m-teal-wash: #DDF0EE;
  --m-slate: #5A6474;  --m-slate-wash: #E6E9EE;

  /* type */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body: 'Lexend', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.6rem, 1.2rem + 1.8vw, 2.1rem);
  --fs-hero: clamp(2.3rem, 1.6rem + 3.4vw, 3.4rem);

  /* shape & space */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --gap: 16px;
  --gutter: 16px;
  --tap: 44px;
  --shadow-1: 0 1px 2px rgba(74, 38, 58, 0.06), 0 2px 8px rgba(74, 38, 58, 0.05);
  --shadow-2: 0 2px 4px rgba(74, 38, 58, 0.05), 0 12px 32px -8px rgba(74, 38, 58, 0.16);
  --shadow-hero: 0 24px 48px -20px rgba(91, 47, 74, 0.55);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-med: 320ms;

  --tabbar-h: 68px;
  --banner-h: 0px;
  --grain-opacity: 0.05;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1C1419;
    --bg-deep: #160F14;
    --surface: #271D23;
    --surface-2: #2E232A;
    --surface-sunk: #1F171C;
    --line: #3B2E36;
    --line-strong: #4D3D47;
    --ink: #F6ECEF;
    --ink-2: #CDBBC4;
    --ink-3: #9C8894;
    --accent: #E7889F;
    --accent-ink: #F0A3B5;
    --accent-wash: #3E2431;
    --on-accent: #2A0F1C;
    --blush: #3E2431;
    --sage: #22332A;
    --gold-wash: #3A2F17;
    --focus: #8FC1EC;
    --hero-bg: #3A1D30;
    --hero-bg-2: #5B2F4A;
    --m-rose: #E7889F;  --m-rose-wash: #43242F;
    --m-sage: #8DBE99;  --m-sage-wash: #22352A;
    --m-sky: #82B4E3;   --m-sky-wash: #1E2F40;
    --m-lilac: #B9A0E2; --m-lilac-wash: #2F2742;
    --m-peach: #F0A07A; --m-peach-wash: #43281C;
    --m-gold: #E8C25E;  --m-gold-wash: #3A3019;
    --m-teal: #6CC5C0;  --m-teal-wash: #183634;
    --m-slate: #A6B0BF; --m-slate-wash: #2A2E35;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.25), 0 14px 32px -10px rgba(0, 0, 0, 0.55);
    --shadow-hero: 0 24px 48px -22px rgba(0, 0, 0, 0.7);
    --grain-opacity: 0.07;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1C1419;
  --bg-deep: #160F14;
  --surface: #271D23;
  --surface-2: #2E232A;
  --surface-sunk: #1F171C;
  --line: #3B2E36;
  --line-strong: #4D3D47;
  --ink: #F6ECEF;
  --ink-2: #CDBBC4;
  --ink-3: #9C8894;
  --accent: #E7889F;
  --accent-ink: #F0A3B5;
  --accent-wash: #3E2431;
  --on-accent: #2A0F1C;
  --blush: #3E2431;
  --sage: #22332A;
  --gold-wash: #3A2F17;
  --focus: #8FC1EC;
  --hero-bg: #3A1D30;
  --hero-bg-2: #5B2F4A;
  --m-rose: #E7889F;  --m-rose-wash: #43242F;
  --m-sage: #8DBE99;  --m-sage-wash: #22352A;
  --m-sky: #82B4E3;   --m-sky-wash: #1E2F40;
  --m-lilac: #B9A0E2; --m-lilac-wash: #2F2742;
  --m-peach: #F0A07A; --m-peach-wash: #43281C;
  --m-gold: #E8C25E;  --m-gold-wash: #3A3019;
  --m-teal: #6CC5C0;  --m-teal-wash: #183634;
  --m-slate: #A6B0BF; --m-slate-wash: #2A2E35;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.25), 0 14px 32px -10px rgba(0, 0, 0, 0.55);
  --shadow-hero: 0 24px 48px -22px rgba(0, 0, 0, 0.7);
  --grain-opacity: 0.07;
}

/* Member colour helper: <span class="dot" data-color="lilac"> */
[data-color="rose"]  { --m: var(--m-rose);  --m-wash: var(--m-rose-wash); }
[data-color="sage"]  { --m: var(--m-sage);  --m-wash: var(--m-sage-wash); }
[data-color="sky"]   { --m: var(--m-sky);   --m-wash: var(--m-sky-wash); }
[data-color="lilac"] { --m: var(--m-lilac); --m-wash: var(--m-lilac-wash); }
[data-color="peach"] { --m: var(--m-peach); --m-wash: var(--m-peach-wash); }
[data-color="gold"]  { --m: var(--m-gold);  --m-wash: var(--m-gold-wash); }
[data-color="teal"]  { --m: var(--m-teal);  --m-wash: var(--m-teal-wash); }
[data-color="slate"] { --m: var(--m-slate); --m-wash: var(--m-slate-wash); }