/* Book AI design tokens.
   One place for every colour, size, shadow and movement the interface uses.
   Components (app.css) and the reader (book.css) read these and add no
   literal values of their own, apart from the materials of a physical book.
   No web fonts: nothing is requested from another origin. */

:root {
  color-scheme: light dark;

  /* ---- colour: warm paper, ink, one bronze accent ------------------------ */
  --c-canvas: light-dark(#f6f3ed, #121110);
  --c-canvas-2: light-dark(#efebe3, #0c0b0a);
  --c-surface: light-dark(#fffdfa, #1c1a17);
  --c-surface-2: light-dark(#f9f6f0, #24211d);
  --c-surface-3: light-dark(#f0ece4, #2d2a25);
  --c-ink: light-dark(#1c1a17, #f0eadf);
  --c-ink-2: light-dark(#4f4a43, #c7bfb1);
  --c-ink-3: light-dark(#68625a, #9c9486);
  --c-line: light-dark(rgba(28, 26, 23, 0.08), rgba(240, 234, 223, 0.09));
  --c-line-2: light-dark(rgba(28, 26, 23, 0.16), rgba(240, 234, 223, 0.2));
  --c-accent: light-dark(#8a5a1c, #dcae62);
  --c-accent-strong: light-dark(#6c4510, #ecc888);
  --c-accent-wash: light-dark(#f3e9d6, #352a16);
  --c-on-accent: light-dark(#fffdfa, #1c1a17);
  --c-ok: light-dark(#27653f, #8fcaa3);
  --c-ok-wash: light-dark(#e2f0e5, #1b2c21);
  --c-warn: light-dark(#7d5108, #e3bb6c);
  --c-warn-wash: light-dark(#f7ecd3, #33290f);
  --c-bad: light-dark(#9c2c20, #f0a195);
  --c-bad-wash: light-dark(#f8e3de, #3a1c17);
  --c-info: light-dark(#2d4d70, #a3bfdc);
  --c-info-wash: light-dark(#e3ebf3, #1b2734);
  --c-mark: light-dark(#f6dc8c, #6b5514);
  --c-raised: light-dark(#fffdfa, #47423a); /* the thumb of a control, lifted off its track */
  --fill: color-mix(in srgb, var(--c-ink) 7%, transparent); /* the body of a default button, a chip, a track */
  --field-bg: var(--c-surface); /* a text field; a card sets it one tone down */
  --c-shadow: light-dark(rgba(46, 34, 14, 0.6), rgba(0, 0, 0, 0.9));
  --c-scrim: light-dark(rgba(30, 24, 14, 0.32), rgba(0, 0, 0, 0.56));

  /* ---- typography --------------------------------------------------------- */
  /* Latin faces first, then a Hebrew book face: each letter is taken from the first face that has it. */
  --font-display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', 'New Peninim MT', 'Arial Hebrew', Georgia, serif;
  --font-read: 'Iowan Old Style', Charter, 'Palatino Linotype', Georgia, serif;
  --font-read-he: 'New Peninim MT', 'Arial Hebrew', 'David', 'Times New Roman', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --text-2xs: 0.6875rem; /* 11px: small capitals labels */
  --text-xs: 0.75rem; /* 12px: captions */
  --text-sm: 0.8125rem; /* 13px: secondary */
  --text-base: 0.875rem; /* 14px: controls, lists, notes */
  --text-md: 0.9375rem; /* 15px: body */
  --text-lg: 1.0625rem; /* 17px: emphasised body, list titles */
  --text-xl: 1.3125rem; /* 21px: card titles */
  --text-2xl: clamp(1.5rem, 0.6vw + 1.3rem, 1.75rem); /* section titles */
  --text-3xl: clamp(1.9rem, 1.5vw + 1.4rem, 2.6rem); /* page titles */
  --text-read: 1.03rem; /* book text in the working screens */
  --text-read-he: 1.2rem; /* Hebrew book text: its letters read smaller at the same size */
  --text-prose: clamp(1.05rem, 0.3vw + 1rem, 1.2rem); /* book text set for reading */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.5;
  --lh-read: 1.72;
  --track-tight: -0.014em;
  --track-caps: 0.09em;

  /* ---- space: a 4px grid --------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 44px;
  --sp-9: 60px;
  --sp-10: 84px;
  --gutter: clamp(16px, 3.2vw, 44px);
  --measure: 68ch;

  /* ---- shape ---------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --control-h: 36px;
  --control-h-sm: 30px;
  --hit: 44px;
  --sidebar-w: 268px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 56px;
  --tabbar-h: 58px;

  /* ---- elevation: soft, warm, layered --------------------------------------- */
  --e-1: 0 0 0 0.5px color-mix(in srgb, var(--c-shadow) 12%, transparent), 0 1px 2px color-mix(in srgb, var(--c-shadow) 8%, transparent), 0 3px 10px -3px color-mix(in srgb, var(--c-shadow) 10%, transparent);
  --e-2: 0 0 0 0.5px color-mix(in srgb, var(--c-shadow) 13%, transparent), 0 4px 12px -3px color-mix(in srgb, var(--c-shadow) 13%, transparent), 0 14px 32px -12px color-mix(in srgb, var(--c-shadow) 18%, transparent);
  --e-3: 0 0 0 0.5px color-mix(in srgb, var(--c-shadow) 15%, transparent), 0 10px 24px -8px color-mix(in srgb, var(--c-shadow) 22%, transparent), 0 30px 64px -20px color-mix(in srgb, var(--c-shadow) 34%, transparent);
  --e-4: 0 0 0 0.5px color-mix(in srgb, var(--c-shadow) 18%, transparent), 0 24px 48px -14px color-mix(in srgb, var(--c-shadow) 40%, transparent), 0 60px 120px -30px color-mix(in srgb, var(--c-shadow) 50%, transparent);

  /* ---- surfaces that let what is behind them show through -------------------- */
  --material-bar: color-mix(in srgb, var(--c-canvas) 76%, transparent);
  --material-panel: color-mix(in srgb, var(--c-surface) 84%, transparent);
  --material-blur: saturate(1.7) blur(22px);

  /* ---- movement ----------------------------------------------------------------- */
  --d-1: 90ms; /* a press */
  --d-2: 170ms; /* hover, small fades */
  --d-3: 260ms; /* menus, toggles, toasts */
  --d-4: 400ms; /* panels, dialogs, screens */
  --d-5: 640ms; /* a book opening */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.9, 0.4);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* A spring that settles without wobbling (1.5% past the mark), and a livelier one (5%). */
  --spring: linear(0, 0.0402, 0.1361, 0.2589, 0.389, 0.5139, 0.6263, 0.7228, 0.8023, 0.8656, 0.9142, 0.9503, 0.976, 0.9936, 1.0047, 1.0112, 1.0143, 1.0152, 1.0146, 1.0131, 1.0112, 1.0093, 1.0074, 1.0057, 1.0042, 1.003, 1.002, 1.0013, 1);
  --spring-lively: linear(0, 0.0555, 0.1863, 0.3496, 0.5161, 0.6674, 0.794, 0.8924, 0.9636, 1.0108, 1.0385, 1.0515, 1.0542, 1.0502, 1.0427, 1.0337, 1.0247, 1.0167, 1.0101, 1.0051, 1.0014, 0.9991, 0.9977, 0.9971, 0.9971, 0.9973, 0.9978, 0.9983, 1);

  /* ---- how a control answers ------------------------------------------------------ */
  --state-hover: color-mix(in srgb, var(--c-ink) 6%, transparent);
  --state-press: color-mix(in srgb, var(--c-ink) 11%, transparent);
  --state-selected: var(--c-accent-wash);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--c-accent) 38%, transparent);
  --disabled: 0.42;

  /* ---- stacking ---------------------------------------------------------------------- */
  --z-sticky: 20;
  --z-bar: 30;
  --z-drawer: 60;
  --z-popover: 80;
  --z-toast: 200;
}

:root[data-appearance='light'] { color-scheme: light; }
:root[data-appearance='dark'] { color-scheme: dark; }

/* A finger needs more room than a pointer. */
@media (pointer: coarse) {
  :root {
    --control-h: 44px;
    --control-h-sm: 38px;
  }
}

/* People who ask for less movement get changes of state without travel. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-1: 0.01ms;
    --d-2: 0.01ms;
    --d-3: 0.01ms;
    --d-4: 0.01ms;
    --d-5: 0.01ms;
  }
}