/* ============================================================
   Canvass Planner — Design Tokens
   Single source of truth. Imported by every page / stylesheet.
   ============================================================ */

:root {
  /* ── Surfaces ───────────────────────────────────────────── */
  --bg:              #faf7f0;
  --bg-deep:         #f4efe2;
  --surface-low:     #f4f1e9;
  --surface:         #fffdf7;
  --surface-strong:  #ffffff;
  --surface-dim:     #ebe5d9;

  /* ── Ink ────────────────────────────────────────────────── */
  --ink:             #0f1a12;
  --ink-strong:      #050d07;
  --ink-soft:        #3d4a40;
  --ink-muted:       #6b7a6f;
  --ink-faint:       #97a59b;

  /* ── Brand green (canonical scale) ──────────────────────── */
  --green-950:       #050d07;
  --green-900:       #0a2e18;
  --green-800:       #0d3f28;
  --green-700:       #0f4525;
  --green-600:       #167a3e;
  --green-500:       #1d9b53;
  --green-300:       #7aeea5;
  --green-100:       #e4f6ea;
  --green-50:        #f2fbf5;

  /* ── Ochre / clay accent (field-craft warmth) ───────────── */
  --ochre-700:       #8a5014;
  --ochre-600:       #b3701e;
  --ochre-500:       #c9802b;
  --ochre-400:       #d99848;
  --ochre-200:       #eccb93;
  --ochre-100:       #f6e6c4;

  /* ── Semantic ───────────────────────────────────────────── */
  --accent:          var(--ochre-500);
  --accent-ink:      var(--ochre-700);
  --ok:              var(--green-600);
  --warn:            #b86a1a;
  --error:           #c62828;

  /* ── Lines ──────────────────────────────────────────────── */
  --line:            rgba(15, 26, 18, 0.08);
  --line-strong:     rgba(15, 26, 18, 0.16);
  --line-ink:        rgba(15, 26, 18, 0.88);

  /* ── Shadow ─────────────────────────────────────────────── */
  --shadow-xs:       0 1px 2px rgba(15, 26, 18, 0.04);
  --shadow-sm:       0 2px 8px rgba(15, 26, 18, 0.05), 0 1px 2px rgba(15, 26, 18, 0.04);
  --shadow:          0 8px 22px rgba(15, 26, 18, 0.07), 0 2px 6px rgba(15, 26, 18, 0.04);
  --shadow-md:       0 14px 36px rgba(15, 26, 18, 0.09);
  --shadow-lg:       0 28px 60px rgba(15, 26, 18, 0.14);

  /* ── Radii (tighter — field-utility, not pill-SaaS) ─────── */
  --r-xs:            2px;
  --r-sm:            4px;
  --r:               6px;
  --r-md:            8px;
  --r-lg:            12px;
  --r-xl:            16px;
  --r-2xl:           22px;

  /* ── Typography ─────────────────────────────────────────── */
  --font-hl: "Fraunces", "Source Serif 4", Georgia, serif;
  --font-bd: "Figtree", -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
  --font-mo: "DM Mono", "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;

  /* Font-feature & variation settings for Fraunces (serif display) */
  --fraunces-display: "SOFT" 30, "WONK" 1;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.32, 0, 0.67, 0);

  /* ── Layout ─────────────────────────────────────────────── */
  --sidebar-w:       68px;
  --sidebar-w-open:  224px;
  --topbar-h:        58px;

  /* ── Legacy aliases (keep existing CSS working) ─────────── */
  --primary:         var(--green-900);
  --primary-cont:    var(--green-800);
  --primary-fixed:   #b5f5cd;
  --primary-fixed-dim: var(--green-300);
  --on-primary:      #ffffff;
  --on-primary-cont: #6b8a6f;
  --secondary:       #4f6354;
  --tertiary:        #1a1203;
  --tertiary-fixed:  #f1e1c4;
  --tertiary-fixed-dim: #d4c5a9;
  --on-tertiary-fixed-var: #504531;
  --on-surface:         var(--ink);
  --on-surface-variant: var(--ink-soft);
  --outline:            var(--ink-muted);
  --outline-variant:    #bfc8c0;
  --accent-light:  var(--ochre-100);
  --accent-dim:    var(--ochre-600);
  --surface-high:   #e0dacf;
  --surface-highest:#d2cdc3;
  --surface-white:  #ffffff;
  --primary-grad: linear-gradient(135deg, #060d08 0%, #0a2e18 50%, #0d3520 100%);
}

/* ============================================================
   Shared base: typography primitives that every page inherits.
   Pages can still override, but this gives us a consistent floor.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-bd);
  font-feature-settings: "ss01", "cv11";
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display type (Fraunces) — characterful by default */
h1, h2, h3, .display {
  font-family: var(--font-hl);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.02;
  color: var(--ink-strong);
}

/* Mono signature: used for run IDs, scores, timestamps, numerals */
.mono, code, kbd, samp {
  font-family: var(--font-mo);
  font-feature-settings: "ss01", "zero";
}

/* Tabular figures for any data-like number */
.num-tab {
  font-variant-numeric: tabular-nums;
}

/* A thin ochre hairline used as a signature accent */
.hairline {
  display: inline-block;
  width: 54px;
  height: 2px;
  background: var(--ochre-500);
  border-radius: 2px;
  vertical-align: middle;
}