/* ── Landscape design tokens ───────────────────────────────────────────────
   The single place a colour, radius, shadow, font or spacing step is decided.
   Nothing below this file should contain a raw hex value.

   Palette is "Forest" — deep forest green chrome, pine accent, green-biased
   neutrals. Chosen over the lighter "Sage" variant in the redesign mockup.

   Load order matters: this file comes first, landscape.css second. The legacy
   bridge at the bottom re-points the old variable names (--bg, --blue, --nav-bg …)
   at these tokens, so every page written against the old steel-blue palette
   re-skins without being touched. Bridged names are deprecated: new CSS should
   use the tokens directly, and the bridge shrinks as screens get restyled.
   ────────────────────────────────────────────────────────────────────────── */

/* Self-hosted so the Content-Security-Policy can stay font-src 'self', and so
   the app keeps its typography with no third-party request on every page load.
   Latin + latin-ext subsets only; the sans and mono files are variable fonts,
   which is why one file covers the whole 400-700 range. */
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('/fonts/instrument-sans-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url('/fonts/instrument-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── Surfaces, lines, ink ── */
  --ground:    #F6F8F6;   /* the page behind everything */
  --surface:   #FFFFFF;   /* cards, panels, drawers */
  --surface-2: #F0F4F1;   /* recessed: table headers, board columns, inputs at rest */
  --surface-3: #E6EDE8;   /* deepest recess: meter tracks, empty wells */
  --line:      #DBE4DD;   /* structural borders */
  --line-soft: #EAF0EC;   /* row separators inside a panel */
  --ink:       #14211B;   /* primary text */
  --ink-2:     #4A5B52;   /* secondary text, labels */
  --ink-3:     #7A8A80;   /* tertiary: hints, timestamps, placeholders */

  /* ── Accent (pine) ── */
  --accent:      #1E6B4F;
  --accent-2:    #2E8B66;  /* hover / brighter step */
  --accent-soft: #E3F0E9;  /* tinted fill behind accent text */
  --accent-line: #BEDACB;  /* border to pair with accent-soft */

  /* ── Forest (the chrome: sidebar, dark bands) ── */
  --forest:       #103A2C;
  --forest-2:     #0B2A20;
  --forest-ink:   #DCEAE1;
  --forest-ink-2: #8FAE9D;
  --forest-line:  #1D4B3B;

  /* ── Status ── */
  /* Darkened from #9B6714 on 2026-09-01: against --warn-soft it measured 4.27:1, under the
     4.5:1 floor for small text, which the new uppercase level pills made visible. The hue is
     unchanged to the eye and every existing warn use (warranty category dots, warning badges)
     gets the same improvement. */
  --warn:   #855610;  --warn-soft:   #FAF0DC;  --warn-line:   #E8D3A8;
  --danger: #A03729;  --danger-soft: #FAE8E5;  --danger-line: #EBC5BE;
  --info:   #2C5F80;  --info-soft:   #E5EEF4;  --info-line:   #C2D8E5;

  /* ── Work-type (card category) ──
     One hue per category, drawn from the status ramp rather than invented, so a
     board full of category dots still reads as one palette. Project work is the
     default and gets the accent; the two support types are told apart by warm
     vs cool; internal is deliberately the quietest, because it is cost, not
     revenue, and should not compete for attention. */
  --cat-project:  var(--accent);
  --cat-billable: var(--info);
  --cat-warranty: var(--warn);
  --cat-internal: var(--ink-3);

  /* ── Elevation ── */
  --shadow:    0 1px 2px rgba(16,58,44,.05), 0 6px 20px -8px rgba(16,58,44,.14);
  --shadow-lg: 0 24px 60px -18px rgba(11,42,32,.35);

  /* ── Radii ── */
  --r:      10px;   /* panels, cards, drawers */
  --r-sm:    7px;   /* buttons, inputs, board cards */
  --r-pill: 999px;

  /* ── Type ──
     Serif is deliberately reserved for large figures (billing totals, stat
     tiles). It is not a heading face. */
  --sans:  'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', ui-serif, Georgia, serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-micro:  10px;    /* uppercase eyebrow / column label */
  --fs-xs:     11.5px;  /* meta, counts, timestamps */
  --fs-sm:     12.5px;  /* dense controls, chips */
  --fs-base:   13.5px;  /* body */
  --fs-md:     15px;    /* emphasis, palette input */
  --fs-lg:     19px;    /* drawer title */
  --fs-xl:     24px;    /* page h1 */
  --fs-figure: 31px;    /* serif stat value */

  /* ── Spacing (4px base) ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;  --sp-10: 40px;

  /* ── Shell metrics ── */
  /* Vertical space the shell takes before page content starts: sticky top bar
     plus .app-content's padding, top and bottom. Full-height pages size
     themselves with calc(100vh - var(--chrome-h)) rather than a magic number,
     so changing the top bar does not silently break four screens. */
  --chrome-h:      91px;
  --sidebar-w:     236px;
  --drawer-w:      860px;   /* default; the widen control goes to --drawer-w-wide */
  --drawer-w-wide: 1240px;
}

/* Dark theme. Set by theme-init.js before first paint and toggled by theme.js,
   both of which write data-theme on <html>. Only the primitives are redefined —
   every alias in the bridge below is a var() reference and follows automatically. */
html[data-theme="dark"] {
  --ground:    #0B1411;
  --surface:   #111D18;
  --surface-2: #17241E;
  --surface-3: #1D2C25;
  --line:      #26362E;
  --line-soft: #1C2A23;
  --ink:       #E4EDE7;
  --ink-2:     #A2B3A9;
  --ink-3:     #75877C;

  --accent:      #4FB88C;
  --accent-2:    #63D3A3;
  --accent-soft: #143024;
  --accent-line: #245741;

  --forest:       #0A1F18;
  --forest-2:     #07160F;
  --forest-ink:   #DCEAE1;
  --forest-ink-2: #7E9C8B;
  --forest-line:  #183B2E;

  --warn:   #D6A44A;  --warn-soft:   #2C2311;  --warn-line:   #4A3A18;
  --danger: #E07A68;  --danger-soft: #2E1815;  --danger-line: #4C2721;
  --info:   #79AECF;  --info-soft:   #132630;  --info-line:   #22414F;

  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 6px 20px -8px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px -18px rgba(0,0,0,.7);

  color-scheme: dark;
}

/* ── Legacy bridge ─────────────────────────────────────────────────────────
   Old names from the steel-blue palette, re-pointed at Forest tokens. This is
   what lets the existing page CSS adopt the new palette untouched.
   Deprecated: delete each line once nothing references it. */
:root {
  --bg:          var(--ground);
  --border:      var(--line);
  --text:        var(--ink);
  --muted:       var(--ink-3);
  --green:       var(--accent-2);
  --yellow:      var(--warn);
  --red:         var(--danger);
  --blue:        var(--accent);
  --blue-strong: var(--accent-2);
  --blue-soft:   var(--accent-soft);
  --radius:      var(--r);

  --nav-bg:       var(--forest);
  --nav-fg:       var(--forest-ink);
  --nav-fg-muted: var(--forest-ink-2);
  --nav-active:   rgba(255,255,255,.10);

  --danger-bg:  var(--danger-soft);  --danger-fg:  var(--danger);  --danger-border:  var(--danger-line);
  --success-bg: var(--accent-soft);  --success-fg: var(--accent);  --success-border: var(--accent-line);
  --warn-bg:    var(--warn-soft);    --warn-fg:    var(--warn);    --warn-border:    var(--warn-line);
  --info-bg:    var(--info-soft);    --info-fg:    var(--info);    --info-border:    var(--info-line);
}