/* Velumi — design tokens, chrome type, icon set. The ONE place with numbers that
   mean something (UI standard, epic 54): app.css and editor.css only reference these.

   Text roles by ladder step (story 018/B1):
     --g9 ink · --g8 chrome text · --g7 labels, secondary text, hints, empty states,
     counts · --g6 idle icons + disabled controls only · --g5 placeholders + ghost
     text only. No step below --g7 carries words the user needs.
   Fills: rest transparent · hover one step darker than the ground (--g2 on paper,
     --g3 on the --g2 rail) · active / selected two steps, or paper on --g2.
   Breakpoints (story 021/G1), mirrored in frontend/src/ui/bp.ts:
     1440 wide · 1200 desk · 1024 rail · 720 phone-wide · 640 phone — nothing else. */
:root {
  color-scheme: light;   /* decision (B7): Velumi is paper; night reading = a dark paper preset later, not a system theme */
  --g0:#FFFFFF; --g1:#FAFAFA; --g2:#F4F4F4; --g3:#EBEBEB; --g4:#DDDDDD;
  --g5:#B8B8B8; --g6:#8A8A8A; --g7:#555555; --g8:#2E2E2E; --g9:#171717;
  --icon-gold:#B98226; --icon-teal:#4E8F86; --icon-violet:#8B6E9E;
  --icon-rust:#C0663B; --icon-sky:#5B86B8; --icon-moss:#7A8F4A; --icon-ink:var(--g9);   /* gold darkened one step (white glyph 3.3:1, story 026); ink = the user's ink */
  --accent: var(--g9);
  --paper: var(--g0);   /* the page-sheet surface; user-tintable in Settings */
  --wash: color-mix(in srgb, var(--paper) 50%, var(--g3));   /* block backgrounds that follow the paper tint */
  /* semantic color — the only non-ladder colors chrome may use */
  --selection: color-mix(in srgb, var(--accent) 15%, transparent);   /* text selection, everywhere text can be selected */
  --selection-block: color-mix(in srgb, var(--accent) 7%, transparent);   /* selected blocks: one quiet wash behind the run (issue 79) */
  --focus-wash: color-mix(in srgb, var(--accent) 3%, transparent);   /* a focused table cell */
  --scrim: color-mix(in srgb, var(--g9) 20%, transparent);           /* behind a layer that takes over navigation */
  --danger:#B4433D;                                                   /* destructive actions, errors */
  --on-tile:#FFFFFF;                                                  /* the glyph on a user-colored icon tile */
  --callout-warn:#FBF3E6; --callout-tip:#EEF5F1; --callout-info:#EEF2F7; --callout-caution:#FAECEA; --callout-important:#F1EEF8;   /* semantic callouts keep fixed hues (decisions §10; caution + important story 040) */
  /* depth: ONE shadow, floating layers only; hairlines otherwise */
  --float: 0 4px 16px rgba(0,0,0,.08);
  --ring: 2px solid var(--accent);   /* focus, 2px offset (inset only inside scroll boxes) */
  /* corners: xs = 16px tiles only · s = controls, rows · m = pop-overs, cards, blocks · l = sheet, covers */
  --r-xs:4px; --r-s:6px; --r-m:10px; --r-l:14px;
  /* heights — the only four (story 019/D1); coarse pointers set them all to 40 */
  --h-icon:24px;   /* inline icon buttons: ×, tree actions, add-root */
  --h-ctl:28px;    /* compact controls: segments, small buttons, menu rows, tabs, pop-over inputs, toolbar, select */
  --h-row:32px;    /* rows: tree, form, buttons, header buttons, pop-over header, icon grid */
  --h-head:44px;   /* header rows: content header, panel tab row, nav top */
  /* layers (story 020/E2) */
  --z-pop:20; --z-inline:25; --z-menu:30; --z-sheet:30; --z-scrim:39; --z-overlay:40;
  /* frames */
  --gutter: max(24px, calc((100vw - 960px) / 2));   /* the public frame's 960px container */
  --font:"Instrument Sans", system-ui, sans-serif;
  --serif:"Source Serif 4", "Iowan Old Style", Georgia, serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --nav-type: 500 13px/1.2 var(--font);      /* the one chrome type style: rows and controls */
  --nav-text: 400 13px/1.5 var(--font);      /* the same size for anything that may wrap: notes, hints, empty states */
  --page-font: var(--serif); --page-size:16px; --page-align:left; --measure:72ch;
}

/* icons: 16px stroke SVGs as CSS masks — they take currentColor */
.i { display:inline-block; width:16px; height:16px; flex:none; background:currentColor;
     -webkit-mask:var(--svg) center / contain no-repeat; mask:var(--svg) center / contain no-repeat; }
.i.lg { width:20px; height:20px; }
.i-plus { --svg: url(icons/plus.svg?v=5); }
.i-chevron { --svg: url(icons/chevron.svg?v=5); }
.i-more { --svg: url(icons/more.svg?v=5); }
.i-panel { --svg: url(icons/panel.svg?v=5); }
.i-type { --svg: url(icons/type.svg?v=6); }
.i-settings { --svg: url(icons/settings.svg?v=5); }
.i-search { --svg: url(icons/search.svg?v=5); }
.i-close { --svg: url(icons/close.svg?v=5); }
.i-check { --svg: url(icons/check.svg?v=5); }
.i-arrow { --svg: url(icons/arrow.svg?v=5); }
.i-link { --svg: url(icons/link.svg?v=5); }
.i-outline { --svg: url(icons/outline.svg?v=1); }
/* callout kinds (story 040) */
.i-note { --svg: url(icons/note.svg?v=1); }
.i-tip { --svg: url(icons/tip.svg?v=1); }
.i-warning { --svg: url(icons/warning.svg?v=1); }
.i-caution { --svg: url(icons/caution.svg?v=1); }
.i-important { --svg: url(icons/important.svg?v=1); }
.i-page { --svg: url(icons/page.svg?v=5); }
.i-book { --svg: url(icons/book.svg?v=5); }
.i-pen { --svg: url(icons/pen.svg?v=5); }
.i-notebook { --svg: url(icons/notebook.svg?v=5); }
.i-map { --svg: url(icons/map.svg?v=5); }
.i-camera { --svg: url(icons/camera.svg?v=5); }
.i-coffee { --svg: url(icons/coffee.svg?v=5); }
.i-leaf { --svg: url(icons/leaf.svg?v=5); }
.i-star { --svg: url(icons/star.svg?v=5); }
.i-heart { --svg: url(icons/heart.svg?v=5); }
.i-flag { --svg: url(icons/flag.svg?v=5); }
.i-bolt { --svg: url(icons/bolt.svg?v=5); }
.i-sun { --svg: url(icons/sun.svg?v=5); }
.i-globe { --svg: url(icons/globe.svg?v=5); }
/* tile glyphs (story 026): the fourteen page icons redrawn on a 12 grid at 1.5px — the icon rule says redraw, never scale */
.i.t12.i-page { --svg: url(icons/t12/page.svg?v=1); }
.i.t12.i-book { --svg: url(icons/t12/book.svg?v=1); }
.i.t12.i-pen { --svg: url(icons/t12/pen.svg?v=1); }
.i.t12.i-notebook { --svg: url(icons/t12/notebook.svg?v=1); }
.i.t12.i-map { --svg: url(icons/t12/map.svg?v=1); }
.i.t12.i-camera { --svg: url(icons/t12/camera.svg?v=1); }
.i.t12.i-coffee { --svg: url(icons/t12/coffee.svg?v=1); }
.i.t12.i-leaf { --svg: url(icons/t12/leaf.svg?v=1); }
.i.t12.i-star { --svg: url(icons/t12/star.svg?v=1); }
.i.t12.i-heart { --svg: url(icons/t12/heart.svg?v=1); }
.i.t12.i-flag { --svg: url(icons/t12/flag.svg?v=1); }
.i.t12.i-bolt { --svg: url(icons/t12/bolt.svg?v=1); }
.i.t12.i-sun { --svg: url(icons/t12/sun.svg?v=1); }
.i.t12.i-globe { --svg: url(icons/t12/globe.svg?v=1); }

/* page icon tile: user-colored, the icon drawn in white on top */
.page-ico { width:16px; height:16px; border-radius:4px; background:var(--tile, var(--g4));
             display:grid; place-items:center; color:#fff; flex:none; }
.page-ico .i { width:12px; height:12px; }
.page-ico.plain, .ico.plain { background:var(--g3); color:var(--g7); }   /* no color = gray tile, ink-side glyph (story 026) */
.page-ico.lg { width:24px; height:24px; border-radius:6px; }
.page-ico.lg .i { width:16px; height:16px; }