/* Family Hub design tokens. Every color, size and curve the UI uses comes from here.
   Theme packs (core/themes.js) override the color tokens at runtime; nothing else should
   hard-code a color. Member colors come in as --m on an element and get tinted with
   color-mix(), so pastels work in light and dark alike. */

@font-face { font-family: 'Fraunces'; src: url('../fonts/Fraunces.ttf') format('truetype');
  font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans.ttf') format('truetype');
  font-weight: 100 1000; font-display: swap; }

:root {
  /* type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --t-2xs: 11px; --t-xs: 12px; --t-sm: 13.5px; --t-base: 15px; --t-md: 17px;
  --t-lg: 20px; --t-xl: 26px; --t-2xl: 32px; --t-3xl: 44px; --t-4xl: 64px;
  --lh-tight: 1.15; --lh: 1.4;

  /* space (4px grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* shape */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px;

  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;

  /* layout */
  --rail-w: 92px;
  --tabbar-h: 64px;
  --hour-h: 56px;
  --touch: 44px;

  /* color: light defaults (Classic pack). themes.js overrides these. */
  --bg: #F6F2EA;          /* app chrome, rail */
  --canvas: #FFFFFF;      /* calendar paper */
  --surface: #FFFFFF;     /* cards */
  --surface-2: #FBF8F3;   /* inset rows, inputs */
  --line: #ECE5DA;
  --line-strong: #DDD4C6;
  --ink: #2B2621;
  --ink-2: #6F665D;
  --ink-3: #A39A90;
  --accent: #EE7B6A;
  --accent-ink: #FFFFFF;
  --ok: #4FA884;
  --danger: #D9534F;
  --tint-amt: 20%;        /* how strong member pastels are */
  --tint-strong: 34%;
  --shadow-1: 0 1px 2px rgba(60, 45, 30, .06), 0 1px 1px rgba(60, 45, 30, .04);
  --shadow-2: 0 6px 20px rgba(60, 45, 30, .10), 0 2px 6px rgba(60, 45, 30, .06);
  --shadow-3: 0 18px 50px rgba(40, 30, 20, .22);
  --scrim: rgba(30, 24, 18, .38);
  --bg-art: none;         /* optional pack decoration (gradient / pattern) */

  color-scheme: light;
}

:root[data-mode="dark"] {
  --bg: #15171B; --canvas: #1B1E23; --surface: #22262C; --surface-2: #2A2F36;
  --line: #2E333A; --line-strong: #3A4048;
  --ink: #EEF0F2; --ink-2: #A9B0B8; --ink-3: #737A83;
  --accent-ink: #1A1410;
  --tint-amt: 30%; --tint-strong: 44%;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, .6);
  --scrim: rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* Member color helpers: set style="--m: #EF7E6E" on an element. */
.m-tint { background: color-mix(in oklab, var(--m, var(--ink-3)) var(--tint-amt), var(--surface)); }
.m-tint-strong { background: color-mix(in oklab, var(--m, var(--ink-3)) var(--tint-strong), var(--surface)); }
.m-fill { background: var(--m, var(--ink-3)); color: #fff; }
.m-ink { color: color-mix(in oklab, var(--m, var(--ink)) 70%, var(--ink)); }