/* Design tokens — the only place colours, type, spacing, radii and motion are defined.
   State colours were checked with a CVD/contrast validator against both surfaces. */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* neutrals — warm sand */
  --bg: #F4EFE6;
  --surface: #FAF7F1;
  --surface-sunk: #EDE6DA;
  --line: #E1D8C9;
  --line-strong: #CBBFAC;
  --text: #29231D;
  --text-2: #5F554B;
  --text-3: #74695D;          /* ≥ 4.5:1 on --bg and --surface */
  --line-input: #958877;      /* form field borders: ≥ 3:1 (WCAG 1.4.11) */

  /* the one accent — terracotta */
  --accent: #AD4522;
  --accent-text: #A13F1E;
  --accent-wash: #F0DDD1;
  --on-accent: #FFF8F1;

  /* states — traffic light: done = green, over = red, not yet entered = yellow.
     Checked as a set for colour-vision deficiency; "drüber" also carries a hatch,
     yellow sits below 3:1 on sand so every yellow cell also carries a label. */
  --state-in: #1C7F55;
  --on-in: #F5FBF7;
  --state-in-wash: #DCEBDF;
  --state-over: #96280E;
  --on-over: #FFF3EE;
  --state-none: #D9A82E;
  --on-none: #2A2006;
  --hatch: rgba(255, 245, 238, .22);
  --cell-empty: #E9E2D6;

  --focus: #29231D;

  /* type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: .75rem;     /* 12 */
  --fs-sm: .875rem;    /* 14 */
  --fs-md: 1rem;       /* 16 */
  --fs-lg: 1.1875rem;  /* 19 */
  --fs-xl: 1.5rem;     /* 24 */
  --fs-2xl: 2rem;      /* 32 */
  --fs-hero: clamp(6rem, 30vw, 8.5rem);
  --lh-tight: 1.15;
  --lh-text: 1.5;

  /* spacing — 4px grid */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gutter: 20px;
  --page-max: 30rem;
  --tap: 44px;

  /* radii — deliberately small and not uniform */
  --r-xs: 3px;   /* heatmap cells */
  --r-sm: 6px;   /* inputs, small buttons */
  --r-md: 10px;  /* big tap targets */
  --r-lg: 14px;  /* sheets */

  --hairline: 1px solid var(--line);

  /* motion */
  --ease-out: cubic-bezier(.16, .84, .3, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.42, .52, 1);
  --ease-roll: cubic-bezier(.2, .9, .25, 1.06);
  --t-fast: 180ms;
  --t-base: 280ms;
  --t-slow: 420ms;
}

/* dark — deep warm grey, never pure black */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1F1C19;
    --surface: #262320;
    --surface-sunk: #191714;
    --line: #36312B;
    --line-strong: #4C453D;
    --text: #EEE7DB;
    --text-2: #BDB3A4;
    --text-3: #9C9282;
  --line-input: #7A7064;
    --accent: #B75135;
    --accent-text: #E38763;
    --accent-wash: #3A2720;
    --on-accent: #FFF4EC;
    --state-in: #35AA76;
    --on-in: #0C1F16;
    --state-in-wash: #1E3328;
    --state-over: #B54245;
    --on-over: #FFF2F0;
    --state-none: #A77F19;
    --on-none: #1B1505;
    --hatch: rgba(255, 240, 238, .2);
    --cell-empty: #2C2824;
    --focus: #EEE7DB;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1F1C19;
  --surface: #262320;
  --surface-sunk: #191714;
  --line: #36312B;
  --line-strong: #4C453D;
  --text: #EEE7DB;
  --text-2: #BDB3A4;
  --text-3: #9C9282;
  --line-input: #7A7064;
  --accent: #B75135;
  --accent-text: #E38763;
  --accent-wash: #3A2720;
  --on-accent: #FFF4EC;
  --state-in: #35AA76;
  --on-in: #0C1F16;
  --state-in-wash: #1E3328;
  --state-over: #B54245;
  --on-over: #FFF2F0;
  --state-none: #A77F19;
  --on-none: #1B1505;
  --hatch: rgba(255, 240, 238, .2);
  --cell-empty: #2C2824;
  --focus: #EEE7DB;
}