/* EyesPen shared design tokens (public site now, the notebook app when root adopts them).
   The values are the notebook's own (web/app.css :root and [data-theme="graphite"]): black on white, one accent that
   means "the AI", the Apple system stack. Adopting this file must not change how the app looks.
   Theme: system by default; [data-theme="light"] or [data-theme="graphite"] (alias "dark") on <html> wins. */

@font-face { font-family: "EP Frank Ruhl"; src: url(/web/fonts/frank-ruhl-libre-hebrew-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "EP Frank Ruhl"; src: url(/web/fonts/frank-ruhl-libre-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }

:root {
  /* type: the app's stack; a serif display face only for large public headlines (Frank Ruhl Libre, SIL OFL 1.1) */
  --font-ui: "EP Noto", "Noto Sans Hebrew", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --font-display: "EP Frank Ruhl", "Times New Roman", Georgia, serif;
  --font-math: "Times New Roman", "STIX Two Math", Cambria, serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-ui: 15px; --fs-body: 16px; --fs-lead: clamp(17px, 1.1vw + 12px, 20px);
  --fs-title: 17px; --fs-h3: 19px; --fs-h2: clamp(24px, 1.6vw + 16px, 32px); --fs-h1: clamp(38px, 4.6vw + 14px, 76px);
  --lh-ui: 1.4; --lh-body: 1.6; --lh-title: 1.25; --lh-display: 1.08;
  --fw-reg: 400; --fw-med: 500; --fw-bold: 600;

  /* color (day) */
  --fg: #111; --muted: #636363; --faint: #767676; --line: #e5e5e2; --desk: #f1f1ef; --paper: #fff;
  --surface: #fff; --bg: #fff; --chip: #ededeb; --on-fg: #fff; --fg-press: #333;
  --accent: #ab400a; --accent-ink: #ab400a; --accent-soft: #fff2e8;   /* the site's readable orange (brand.css); the app sets its own */ --on-accent: #fff;
  --ok: #1d7a3e; --ok-soft: #e9f5ec; --warn: #9a5b00; --warn-soft: #fbf1e2; --danger: #b3261e; --danger-soft: #fdecec;
  --ink-user: #111; --ink-ai: #1a5cff;                       /* on the page itself: paper stays white in both themes */
  --ring: rgba(0,0,0,.12); --edge: rgba(0,0,0,.06); --scrim: rgba(0,0,0,.18);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08); --shadow-md: 0 1px 2px rgba(0,0,0,.08), 0 10px 28px -10px rgba(0,0,0,.22);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  color-scheme: light;

  /* space (4px base) and shape */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: clamp(16px, 4vw, 48px); --measure: 64ch; --page-max: 1200px;
  --r-xs: 4px; --r-sm: 6px; --r: 12px; --r-lg: 14px; --r-pill: 999px; --r-round: 50%;
  --tap: 44px;

  /* motion: short and eased; everything collapses under prefers-reduced-motion (ui.css) */
  --ease: cubic-bezier(.4,0,.2,1); --t: .22s; --t-fast: var(--t); --t-slow: var(--t);   /* one tempo, as web/app.css */
}

:root[data-theme="graphite"], :root[data-theme="dark"] {
  --fg: #e6e7e9; --muted: #a8abb1; --faint: #9a9da3; --line: #45484e; --desk: #26282b; --paper: #fff;
  --surface: #313337; --bg: #1f2023; --chip: #3c3f44; --on-fg: #1d1e20; --fg-press: #c9cace;
  --accent: #ff9b60; --accent-soft: #3d3027; --on-accent: #26282b;
  --ok: #7fd08a; --ok-soft: #22382a; --warn: #e0a64a; --warn-soft: #3f3322; --danger: #ffb4ab; --danger-soft: #4a2727;
  --ring: rgba(255,255,255,.16); --edge: rgba(255,255,255,.07); --scrim: rgba(0,0,0,.42);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -10px rgba(0,0,0,.6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fg: #e6e7e9; --muted: #a8abb1; --faint: #9a9da3; --line: #45484e; --desk: #26282b; --paper: #fff;
    --surface: #313337; --bg: #1f2023; --chip: #3c3f44; --on-fg: #1d1e20; --fg-press: #c9cace;
    --accent: #ff9b60; --accent-soft: #3d3027; --on-accent: #26282b;
    --ok: #7fd08a; --ok-soft: #22382a; --warn: #e0a64a; --warn-soft: #3f3322; --danger: #ffb4ab; --danger-soft: #4a2727;
    --ring: rgba(255,255,255,.16); --edge: rgba(255,255,255,.07); --scrim: rgba(0,0,0,.42);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -10px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}