/*
 * Spesen v2 — Design Tokens + base styles
 *
 * Tokens + base styles are VERBATIM from the claude.ai/design prototype
 * `Spesen App.html` lines 10-41 (the :root custom-property block + global base
 * rules), adapted ONLY to drop prototype-frame artifacts:
 *   - the `@media(max-width:740px){.side-panel{display:none}}` rule is removed —
 *     the desktop side panel is a prototype presentation shell, not part of the
 *     production app (design-core §5.6/§5.7).
 *
 * Source of truth: design/spesen-app/expense-app/project/Spesen App.html:11-21.
 * Do NOT retune these values — the visual gate diffs against the prototype.
 */

:root{
  --hc-blue:#14324E; --hc-blue-deep:#0E2438;
  --hc-coral:#E94D3A; --hc-coral-soft:#F9E1DD;
  --hc-white:#FFFFFF; --hc-bg-alt:#F0F0F0; --hc-bg-soft:#F7F7F7;
  --hc-gray-1:#C2C2C2; --hc-gray-2:#A4A3A7; --hc-gray-3:#87878B; --hc-gray-4:#5B5D64;
  --hc-amber:#C98A1A; --hc-amber-soft:#FBF1DE; --hc-green:#2E7D4F;
  --fg-1:var(--hc-blue); --fg-2:var(--hc-gray-4); --fg-3:var(--hc-gray-3);
  --border:#E2E2E3; --border-strong:#C2C2C2;
  --font:'Carlito','Calibri','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --mono:'Consolas','Menlo','Courier New',monospace;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font); color:var(--fg-1);
  background:var(--hc-bg-alt);
  background-image:radial-gradient(var(--hc-gray-1) 0.5px, transparent 0.5px);
  background-size:24px 24px;
  -webkit-font-smoothing:antialiased; line-height:1.45;
}
.mono{font-family:var(--mono);}
h1,h2,h3,h4{font-weight:500;line-height:1.22;color:var(--fg-1);margin:0;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;}
@keyframes spin{to{transform:rotate(360deg);}}
.screen-scroll{animation:fade .22s ease;}
@keyframes fade{from{opacity:.4;}to{opacity:1;}}
.screen-scroll::-webkit-scrollbar{width:0;}
::selection{background:var(--hc-coral-soft);}