/* ============================================
   DESIGN TOKENS — "Ledger meets contact sheet"
   ============================================ */
:root{
  color-scheme: light;
  /* Paper & ink */
  --paper:        #EFF1EE;
  --paper-raised: #FFFFFF;
  --paper-sunken: #E4E7E1;
  --ink:          #1C2230;
  --ink-soft:     #5B6270;
  --ink-faint:    #9AA0A6;
  --line:         #D8DAD3;
  --line-strong:  #C4C8BF;

  /* Stamp colors (status) */
  --stamp-green:      #2F8F5B;
  --stamp-green-bg:   #E4F2E9;
  --stamp-red:         #C1392B;
  --stamp-red-bg:      #FBE7E4;
  --stamp-amber:       #C67D12;
  --stamp-amber-bg:    #F7ECD8;
  --stamp-navy:        #2A4C7A;
  --stamp-navy-bg:     #E4EBF3;

  /* Accent (used sparingly — primary actions) */
  --accent:       #2A4C7A;
  --accent-hover: #1F3A5F;
  --accent-soft:  #E4EBF3;

  /* Type — rounded, friendly display face; rounded-terminal body face;
     numbers always monospaced so money/IDs align like a real ledger */
  --font-display: 'Baloo 2', 'Barlow Condensed', sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* Uniform control sizing */
  --field-h: 44px;
  --field-radius: 14px;

  /* iOS "liquid glass" surfaces */
  --glass-bg: rgba(255,255,255,0.63);
  --glass-bg-dark: rgba(28,34,48,0.63);
  --glass-border: rgba(255,255,255,0.55);
  --glass-blur: 22px;

  /* Radius & shadow */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(28,34,48,0.06);
  --shadow-md: 0 4px 14px rgba(28,34,48,0.08);
  --shadow-lg: 0 12px 32px rgba(28,34,48,0.14);

  /* Themeable chrome surfaces — themes override just these instead of the
     structural rules in layout.css, so the dark/pastel palettes stay in one file. */
  --sidebar-bg:        var(--ink);
  --topbar-bg:         rgba(239,241,238,0.86);
  --mobile-topbar-bg:  rgba(239,241,238,0.92);
  --nav-indicator-bg:  rgba(225,225,225,0.92);
  --toast-bg:          var(--ink);
  --toast-fg:          #FFFFFF;

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h: 64px;
  --bottomnav-h: 64px;
  --content-max: 1180px;
}

/* Large desktop monitors (1440p/4K) — let the content actually use the screen
   instead of stranding a big empty gap on the right of a fixed 1180px column. */
@media (min-width: 1700px){
  :root{ --content-max: 1440px; }
}
@media (min-width: 2200px){
  :root{ --content-max: 1760px; --sidebar-w: 272px; }
}
@media (min-width: 2800px){
  :root{ --content-max: 2100px; --sidebar-w: 300px; }
}