/* ── 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 ── */
  --warn:   #9B6714;  --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);
}