/* ============================================================================
   skin-100hp.css — 100 Healthy Plants drop-in skin
   ----------------------------------------------------------------------------
   A self-contained :root + html[data-theme="dark"] token override block for
   grafting onto the base app (per skin-spec.md §6). No @imports — paste or link
   this single file after the base app's own token sheet to fully re-skin it.

   Fonts: load Fraunces, Inter and IBM Plex Mono separately, e.g.
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..900&family=Inter:wght@400..700&family=IBM+Plex+Mono:wght@400..600&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  /* Canvas & surfaces */
  --bg: #faf6ef;
  --surface: #fffdf8;
  --surface-2: #f5ead9;
  --surface-3: #eee0ca;

  /* Text (brand navy as ink) */
  --text: #172c3e;
  --text-2: #51606e;
  --text-3: #8494a2;

  /* Hairlines */
  --hairline: #e9dcc6;
  --hairline-2: #dccfb6;

  /* Accent — terracotta */
  --accent: #e17333;
  --accent-press: #c95d20;
  --accent-tint: #fdeadd;
  --on-accent: #fffdf8;

  /* Semantic */
  --ok: #4a7c59;      --ok-tint: #e6efe9;
  --watch: #a06b12;   --watch-tint: #f7ecd6;
  --urgent: #982119;  --urgent-tint: #f6e3e1;

  /* Type */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Radii */
  --r-tile: 26px;
  --r-card: 20px;
  --r-field: 14px;
  --r-pill: 980px;

  /* Depth — near-flat */
  --shadow-1: 0 1px 2px rgba(23, 44, 62, 0.05);
  --shadow-pop: 0 12px 34px rgba(23, 44, 62, 0.18);

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

html[data-theme="dark"] {
  --bg: #10161e;
  --surface: #182230;
  --surface-2: #223044;
  --surface-3: #2c3d55;

  --text: #f7ecd9;
  --text-2: #c2b49c;
  --text-3: #8d99a8;

  --hairline: #263447;
  --hairline-2: #33455c;

  --accent: #ef8b4d;
  --accent-press: #f59a62;
  --accent-tint: #3a2718;
  --on-accent: #10161e;

  --ok: #6fae83;      --ok-tint: #1b2f24;
  --watch: #d9a53f;   --watch-tint: #33290f;
  --urgent: #d95f4e;  --urgent-tint: #3a1a15;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-pop: 0 14px 40px rgba(0, 0, 0, 0.55);
}