/* Fındık design tokens — the only colours, sizes and radii the app and the family panel use.
   Zeynep's colours (2026-10-21): powder pink main, mint green and baby blue helpers.
   Text contrast checked: ink on bg ≥ 12:1, white on --accent 5.1:1, --accent-ink on bg ≥ 6:1. */
:root {
  --bg: #fff8fa;
  --surface: #ffffff;
  --surface-2: #fdeef3;
  --line: #f2dde5;
  --ink: #2b1d23;
  --ink-2: #6c5660;
  --ink-3: #9a8590;
  --accent: #b8436e;          /* rose: the one strong element per view (primary button) */
  --on-accent: #ffffff;
  --accent-ink: #9c355c;      /* accent-coloured text on light surfaces */
  --accent-soft: #fadbe5;     /* powder pink surfaces */
  --mint: #237a5b;            /* mint ink: success marks, second chart series */
  --mint-soft: #d9f4e8;
  --sky: #2f6fa3;             /* baby-blue ink: info, third chart series */
  --sky-soft: #dcedfa;
  --good: var(--mint);        /* small marks only, never big slabs */
  --good-soft: var(--mint-soft);
  --bad: #c2413f;
  --bad-soft: #fbe3e1;
  --warn: #a8701c;
  --warn-soft: #fbefd6;
  --lilac: var(--sky);        /* kept for older code: now baby blue */
  --lilac-soft: var(--sky-soft);
  --nut: #8a5a2e;             /* hazelnut brown: nuts in pictures and the nut counter */

  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.875rem;
  --fs-2xl: 2.5rem;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(90, 30, 55, .06), 0 6px 20px rgba(90, 30, 55, .07);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 160ms; --t-med: 260ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1216; --surface: #241a1f; --surface-2: #2e2128; --line: #3d2c34;
    --ink: #f8ecf1; --ink-2: #d2bcc6; --ink-3: #a08a94;
    --accent: #ec8fb0; --on-accent: #2b1d23; --accent-ink: #f3a9c3; --accent-soft: #42232f;
    --mint: #6fd3ab; --mint-soft: #1c3329; --sky: #8cc3ee; --sky-soft: #1b2b3a; --nut: #d9a571;
    --bad: #f07b72; --bad-soft: #3a1f1d; --warn: #e2b04f; --warn-soft: #3a2f17;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  }
}
:root[data-theme="dark"] {
  --bg: #1a1216; --surface: #241a1f; --surface-2: #2e2128; --line: #3d2c34;
  --ink: #f8ecf1; --ink-2: #d2bcc6; --ink-3: #a08a94;
  --accent: #ec8fb0; --on-accent: #2b1d23; --accent-ink: #f3a9c3; --accent-soft: #42232f;
  --mint: #6fd3ab; --mint-soft: #1c3329; --sky: #8cc3ee; --sky-soft: #1b2b3a; --nut: #d9a571;
  --bad: #f07b72; --bad-soft: #3a1f1d; --warn: #e2b04f; --warn-soft: #3a2f17;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font);
  font-size: var(--fs-md); line-height: 1.5; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
button { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.25em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}