/* tokens.css — DoctorPay design system: Minimalism & Swiss Style + Söhne (Klim) */

/* ---- Söhne (UI) + Söhne Mono (figures). Trial files, Latin-subset. ---- */
@font-face { font-family: 'Söhne'; font-weight: 400; font-style: normal; font-display: swap; src: url('/app/fonts/Sohne-Buch.otf') format('opentype'); }
@font-face { font-family: 'Söhne'; font-weight: 500; font-style: normal; font-display: swap; src: url('/app/fonts/Sohne-Kraftig.otf') format('opentype'); }
@font-face { font-family: 'Söhne'; font-weight: 600; font-style: normal; font-display: swap; src: url('/app/fonts/Sohne-Halbfett.otf') format('opentype'); }
@font-face { font-family: 'Söhne'; font-weight: 700; font-style: normal; font-display: swap; src: url('/app/fonts/Sohne-Fett.otf') format('opentype'); }
@font-face { font-family: 'Söhne Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/app/fonts/SohneMono-Buch.otf') format('opentype'); }
@font-face { font-family: 'Söhne Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/app/fonts/SohneMono-Kraftig.otf') format('opentype'); }

:root {
  --font: 'Söhne', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Söhne Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Swiss monochrome: near-black ink on paper, hairline structure, single accent */
  --bg: #fafafa;            /* paper */
  --surface: #ffffff;
  --surface-2: #f4f4f5;     /* zinc-100 — muted fills */
  --border: #e4e4e7;        /* zinc-200 — hairline */
  --border-strong: #d4d4d8; /* zinc-300 */
  --ink: #09090b;           /* near-black — Swiss "black" primary actions */
  --text: #18181b;          /* zinc-900 — body text */
  --text-muted: #52525b;    /* zinc-600 */
  --text-faint: #a1a1aa;    /* zinc-400 */

  /* the single vibrant accent (selection, links, focus) — kept under --primary for compat */
  --primary: #2563eb;       --primary-hover: #1d4ed8;  --primary-soft: #eff4ff;

  /* semantic financial — always paired with icon/text, never color alone */
  --positive: #15803d;      --positive-soft: #f0fdf4;
  --warning: #b45309;       --warning-soft: #fffbeb;
  --negative: #b91c1c;      --negative-soft: #fef2f2;

  /* Swiss: depth from hairlines, not shadow. Radius near-zero. */
  --shadow-sm: none;
  --shadow-md: 0 1px 0 var(--border);
  --r-sm: 2px; --r-md: 3px; --r-lg: 4px;

  /* 8px base grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --grid-cols: 12; --grid-gap: 16px; --maxw: 1360px;

  /* type scale — typography is the primary visual element */
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 15px; --fs-xl: 19px; --fs-2xl: 26px; --fs-3xl: 34px;
  --lh-tight: 1.15; --lh: 1.5;
  --tracking-tight: -0.02em; --tracking-caps: 0.06em;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* ensure the hidden attribute wins over display rules */
html, body {
  margin: 0; font-family: var(--font); font-size: var(--fs-md); line-height: var(--lh);
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); margin: 0; }
/* tabular Söhne Mono for every figure — Swiss precision, zero layout shift */
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; text-align: right; }
.eyebrow { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-faint); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }