/* ═══════════════════════════════════════════════════════════════════
   JLog Brand Tokens — SINGLE SOURCE OF TRUTH (Phase 1a, app surface)
   ───────────────────────────────────────────────────────────────────
   These are the canonical brand values. Other shared stylesheets
   (theme.css, design-system.css) @import this file FIRST, then map
   their own legacy variables onto these anchors. Change a brand value
   HERE and it propagates everywhere that consumes the tokens.

   NOTE on --jl-border: theme.css intentionally re-declares --jl-border
   for dark app-chrome (#334155) and light app-chrome (#e2e8f0) AFTER
   this import, so dashboards keep their existing borders. The parchment
   value below is the brand divider for light/marketing surfaces.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --jl-green:     #1A2E26;   /* brand green — the anchor */
  --jl-green-mid: #1C5636;   /* lighter shade — dark-surface hovers only */
  --jl-gold:      #E8A13F;   /* accent */
  --jl-paper:     #F7F5F0;   /* light background */
  --jl-ink:       #2D2D2D;   /* body text */
  --jl-muted:     #5A6B62;   /* secondary text */
  --jl-border:    #E8E5DD;   /* borders / dividers (light/brand surfaces) */
  --jl-white:     #FFFFFF;
  --jl-radius:    14px;

  --jl-font-head: 'DM Serif Display', Georgia, serif;   /* headings only */
  --jl-font-body: 'Inter', system-ui, sans-serif;       /* body, UI, data, forms */
  --jl-font-mono: 'JetBrains Mono', monospace;           /* HS codes */
}