/* Shared geometry and typography. Themes may replace palette values, never these contracts. */
:root {
  color-scheme: light dark;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-caption: 12px; --lh-caption: 16px;
  --fs-small: 13px; --lh-small: 18px;
  --fs-body: 15px; --lh-body: 22px;
  --fs-input: 16px; --lh-input: 22px;
  --fs-h3: 17px; --lh-h3: 24px;
  --fs-h2: 20px; --lh-h2: 26px;
  --fs-h1: 24px; --lh-h1: 30px;
  --fs-display: clamp(28px, 7vw, 40px);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px;
  --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --elevation-1: 0 1px 2px rgb(16 20 30 / 8%);
  --elevation-2: 0 8px 24px rgb(16 20 30 / 14%);
  --elevation-3: 0 16px 40px rgb(16 20 30 / 20%);
  --bg: #f3f4f7; --bg-elev: #fff; --bg-elev-2: #e9ebf0; --bg-sunken: #eceef2;
  --fg: #1b2030; --fg-muted: #586074; --fg-faint: #8a92a4;
  --border: #e0e3ea; --border-strong: #cbd1dd;
  --accent: #5b6cff; --accent-fg: #fff; --accent-weak: rgb(91 108 255 / 12%);
  --success: #1f9d6b; --success-weak: rgb(31 157 107 / 14%);
  --warning: #c9821f; --warning-weak: rgb(201 130 31 / 15%);
  --danger: #d8443c; --danger-weak: rgb(216 68 60 / 12%);
  /* `--ring` is composed from its parts so a control painted ON the accent (a filled
     segment) can redraw the same ring in a colour that shows against its own fill,
     without hard-coding the width the contrast swap below changes. */
  --link: var(--accent); --ring-w: 3px; --ring-c: var(--accent-weak);
  --ring: 0 0 0 var(--ring-w) var(--ring-c);
  /* The touch floor: 44px is a finger target (Apple HIG, DESIGN-SYSTEM.md §3.6). It is the
     minimum HIT box of a control in a control context, not a visual size to inflate text
     links to. A fine primary pointer relaxes it below. */
  --tap-min: 44px;
  --topbar-h: 44px;
  --tabbar-h: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --row-thumb-w: 56px;
  --row-min-h: 88px;
  --cover-ratio: 2 / 3;
  --cover-radius: var(--radius);
  --shelf-item-w: 128px;
  --lib-card-min: 176px;
  --page-max: 1240px;
  --maxw: var(--page-max);
  --sheet-max-h: 85dvh;
  --z-header: 100;
  --z-tabbar: 100;
  --z-sheet: 200;
  --z-toast: 300;
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
  /* Compatibility aliases for legacy selectors in base.css. Values remain canonical here. */
  --header-h: var(--topbar-h);
  --shadow-sm: var(--elevation-1);
  --shadow-md: var(--elevation-2);
  --shadow-lg: var(--elevation-3);
  --cover-shadow: var(--shadow-md);
  --transition: var(--motion-fast) var(--motion-ease);
}
/* A mouse or trackpad needs no finger-sized floor. With 44px kept on desktop every button,
   field, chip and row link rendered 44px tall around 13–15px text — the "huge, different
   sizes" controls the owner reported on 2026-10-03. A fine primary pointer gets the
   standard 36px desktop control height instead; touch screens (phones, tablets, and the
   e2e phone profiles, which emulate touch) keep 44px. */
@media (pointer: fine) {
  :root { --tap-min: 36px; }
}
/* PJ-21 / R-529 -- e-ink contrast posture. The Palma (and any other reader that sends
   `prefers-contrast: more`) renders in a handful of grey levels with no real alpha
   compositing, so a translucent tint can wash out to nothing and a soft glow can
   vanish entirely. Every colour in this file already flows through the tokens above,
   so redefining the handful that carry transparency here reaches every surface that
   uses them -- no per-component override needed. `!important` is required: themes.css
   loads after this file and redefines several of these same tokens per `[data-theme]`
   /`[data-mode]` combination at higher selector specificity, and this posture must win
   over every theme, not just the default one.
   - `-weak` tokens (chip/badge fills) go from a ~12-18% alpha tint to an OPAQUE mix of
     the same hue against the surface they actually sit on -- same look, no alpha.
   - Shadows are dropped: a soft rgba drop-shadow carries no information an e-ink panel
     can render, and `--cover-shadow` (defined above as `var(--shadow-md)`) drops with it.
   - The focus ring becomes a solid, opaque 2px ring instead of a 3px translucent glow. */
@media (prefers-contrast: more) {
  :root {
    --shadow-sm: none !important;
    --shadow-md: none !important;
    --shadow-lg: none !important;
    --ring-w: 2px !important;
    --ring-c: var(--accent) !important;
    --accent-weak: color-mix(in srgb, var(--accent) 20%, var(--bg-elev)) !important;
    --danger-weak: color-mix(in srgb, var(--danger) 20%, var(--bg-elev)) !important;
    --success-weak: color-mix(in srgb, var(--success) 22%, var(--bg-elev)) !important;
    --warning-weak: color-mix(in srgb, var(--warning) 24%, var(--bg-elev)) !important;
    --border: var(--border-strong) !important;
  }
}