/* Harrowfield Check-in: shared design tokens for the mockup round.
   Brand source: harrowfield.co.nz (logo PNG pixel samples + site CSS, 27 Sep 2026).
   Logo colours: ink #121417, teal #399b9b, brown #625033, tan #b09f80, grey #898584.
   Site ground: cream #f4ede5, pale teal #deebe9. Site face: Spartan (now League Spartan). */

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@500;600;700&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* Type */
  --font-display: 'League Spartan', system-ui, sans-serif;   /* headings, big numbers, brand moments */
  --font-body: 'Source Sans 3', system-ui, sans-serif;       /* all UI text and prose */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
  --fs-17: 17px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-40: 40px; --fs-56: 56px;
  --lh-body: 1.55; --lh-prose: 1.65; --lh-head: 1.15;
  --track-head: -0.02em; --track-big: -0.03em; --track-label: 0.04em;

  /* Neutrals: warm, tinted toward the brand cream. Never pure #fff / #000 / slate. */
  --ground: #f4ede5;        /* brand cream: page background */
  --ground-2: #ede4d8;      /* recessed wells, table header band */
  --surface: #fffcf8;       /* cards / sheets */
  --surface-2: #faf6f0;     /* hover rows, secondary panels */
  --hairline: #e4d9cb;      /* 1px borders and row rules */
  --hairline-strong: #d3c5b3;
  --ink: #121417;           /* brand near-black: primary text */
  --ink-2: #4a443d;         /* secondary text */
  --ink-3: #7b736a;         /* muted labels, metadata */

  /* Brand by role */
  --teal: #399b9b;          /* brand teal: large fills, chart "now" marks, brand moments */
  --teal-ink: #1e6f6f;      /* teal for text and links on light (AA on --surface) */
  --teal-deep: #155555;     /* pressed states */
  --teal-tint: #deebe9;     /* brand pale teal: selected rows, tags */
  --teal-wash: #eef5f3;     /* faint teal background */
  --brown: #625033;         /* brand brown: secondary emphasis, "then" marks */
  --tan: #b09f80;           /* brand tan: decorative, hollow markers, dividers with meaning */
  --tan-tint: #efe5d6;      /* tan wash */
  --grey: #898584;          /* brand grey: neutral chart marks */

  /* Status (reserved; always with icon + label, never colour alone) */
  --good: #1e6f6f;          /* moved the right way = teal-ink */
  --watch: #8a5a1f;         /* flat / needs attention: warm brown-amber from the brand browns */
  --watch-tint: #f5e8d3;

  /* Chart encodings (validated 27 Sep: hue alone fails the chroma floor because the brand
     is muted, so "then vs now" is carried by hollow vs filled + direct labels, hue secondary) */
  --mark-now: #1f8f8e;      /* filled dot */
  --mark-then: #9a7440;     /* hollow ring, 2px */
  --grid: #ebe2d6;

  /* Spacing (4px base). Breaks deliberately at 40 for the brief headline block. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* Radius scales with element size */
  --r-xs: 4px;   /* chips, bars */
  --r-sm: 6px;   /* buttons, inputs */
  --r-md: 10px;  /* cards */
  --r-lg: 16px;  /* phone sheets, large panels */

  /* Elevation: base (ground) -> raised (cards) -> floating (menus, toasts). Warm-tinted, layered, low opacity. */
  --e1: 0 1px 1px rgba(98, 80, 51, 0.05), 0 1px 3px rgba(98, 80, 51, 0.06);
  --e2: 0 1px 2px rgba(98, 80, 51, 0.06), 0 6px 16px rgba(98, 80, 51, 0.08);
  --e3: 0 2px 4px rgba(98, 80, 51, 0.08), 0 16px 40px rgba(98, 80, 51, 0.14);

  /* Density (product UI) */
  --row: 40px; --row-compact: 32px; --control: 36px; --control-touch: 48px;

  /* Motion: transform + opacity only, spring-ish */
  --ease: cubic-bezier(0.22, 1.2, 0.36, 1);
  --dur: 180ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-14); line-height: var(--lh-body);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-family: var(--font-display); line-height: var(--lh-head); letter-spacing: var(--track-head); margin: 0; font-weight: 600; }
.num, table td.n, .tnum { font-variant-numeric: tabular-nums; }
.label { font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3); }

/* Interactive baseline: every clickable thing gets hover, focus-visible, active. */
a, button, [role="button"], .tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--teal-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--teal-deep); }
a.btn, a.btn:hover { text-decoration: none; }
nav a, .crumbs a, .breadcrumb a { text-decoration: none; }
nav a:hover, .crumbs a:hover, .breadcrumb a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: var(--r-xs); }
button { font: inherit; }
.btn {
  display: inline-flex; align-items: center; gap: var(--s2); height: var(--control); padding: 0 var(--s4);
  border-radius: var(--r-sm); border: 1px solid var(--hairline-strong); background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: var(--fs-14); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(0.98); }
.btn.primary { background: var(--teal-ink); border-color: var(--teal-ink); color: #fffcf8; }
.btn.primary:hover { background: var(--teal-deep); }