@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=Varela+Round&display=swap');

:root {
  --ink: #141413;
  --paper: #FFFFFF;         /* admin: white ground for minimal look (brand PDF's cream #F1EFE8 stays for the customer product) */
  --paper-warm: #F1EFE8;    /* brand-canonical paper — kept available if needed */
  --grey: #888780;
  --clay: #F0997B;
  --amber: #EF9F27;
  --cta: #D85A30;

  --border-soft: rgba(20, 20, 19, 0.08);       /* thin ink lines instead of grey — reads cleaner on white */
  --border-strong: rgba(20, 20, 19, 0.16);
  --hover-bg: rgba(20, 20, 19, 0.04);
  --active-bg: rgba(216, 90, 48, 0.06);        /* whisper of CTA orange on active surfaces */
  --active-accent: var(--cta);                 /* used for the 2px accent bar on active nav / filter */

  --font-display: 'Varela Round', system-ui, -apple-system, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radius: 10px;
  --radius-lg: 16px;

  --sidebar-w: 220px;
  --topbar-h: 56px;

  --gradient-spec: linear-gradient(90deg, #D85A30 0%, #EF9F27 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 14px; line-height: 22px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 400; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: 26px; line-height: 32px; letter-spacing: -0.02em; }
h2 { font-size: 22px; line-height: 28px; letter-spacing: -0.015em; }
h3 { font-size: 18px; line-height: 24px; }
a { color: var(--ink); }
button { font-family: inherit; font-size: inherit; }
code, .mono { font-family: var(--font-mono); }
small, .label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--grey);
}