/* The studio palette, type and spacing. Canvas colours keep their production meaning. */
@property --scale { syntax: "<number>"; inherits: true; initial-value: 1; }
:root {
  color-scheme: light dark;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* 1 at 1920 px, rising by 0.3 over the next 1920 px to 1.3 at 3840 px and staying there;
     tan(atan2()) is how CSS divides one length by another */
  --scale: clamp(1, 1 + tan(atan2(100vw - 1920px, 6400px)), 1.3);
  --fs-1: calc(12px * var(--scale)); --lh-1: calc(18px * var(--scale));
  --fs-2: calc(14px * var(--scale)); --lh-2: calc(20px * var(--scale));
  --fs-3: calc(15px * var(--scale)); --lh-3: calc(24px * var(--scale)); --fs-3m: calc(13px * var(--scale));
  --fs-4: calc(17px * var(--scale)); --lh-4: calc(24px * var(--scale));
  --fs-5: calc(20px * var(--scale)); --lh-5: calc(28px * var(--scale));
  --fs-6: calc(40px * var(--scale)); --lh-6: calc(48px * var(--scale));

  --sp-h: calc(2px * var(--scale)); --sp-1: calc(4px * var(--scale)); --sp-2: calc(8px * var(--scale));
  --sp-3: calc(12px * var(--scale)); --sp-4: calc(16px * var(--scale)); --sp-6: calc(24px * var(--scale));
  --sp-8: calc(32px * var(--scale));
  --row: calc(40px * var(--scale)); --row-compact: calc(36px * var(--scale)); --row-thumb: calc(72px * var(--scale));
  --ctl: calc(40px * var(--scale)); --ctl-md: calc(44px * var(--scale));
  --rail: calc(240px * var(--scale)); --topbar: calc(64px * var(--scale)); --statusbar: calc(32px * var(--scale)); --filterbar: calc(64px * var(--scale));
  --sheet: calc(420px * var(--scale)); --icon: calc(18px * var(--scale));
  /* the details panel widens with the window, so long artwork names fit */
  --inspector: clamp(calc(320px * var(--scale)), 18vw, calc(460px * var(--scale)));
  /* a strip of a design's patches beside a preview */
  --strip: clamp(calc(120px * var(--scale)), 9vw, calc(180px * var(--scale)));
  /* Tiles have a bounded reading size; wider windows add columns. */
  --tile: calc(208px * var(--scale));
  --thumb-row: calc(64px * var(--scale));
  --radius: 6px; --radius-panel: 10px;

  --bg-app: light-dark(#f6f6f2, #181c1a);
  --bg-panel: light-dark(#ffffff, #222824);
  --bg-inset: light-dark(#eef0ea, #2b332d);
  --bg-hover: light-dark(#e8ede7, #333d35);
  --bg-selected: light-dark(#e4eee7, #2d4135);
  --text-1: light-dark(#24352b, #f0f3ed);
  --text-2: light-dark(#59665d, #c5cec6);
  --text-3: light-dark(#6c776e, #a7b3a9);
  --border-1: light-dark(#cbd2c9, #566259);
  --border-2: light-dark(#e0e5dc, #38443b);
  --accent: light-dark(#315e4c, #b0d4ba);
  --accent-text-on: light-dark(#ffffff, #1e3226);
  --ok: light-dark(#157232, #4cc26a); --ok-bg: light-dark(#e3f3e7, #17301f);
  --warn: light-dark(#7f5500, #e0a72e); --warn-bg: light-dark(#fdf0d0, #33280f);
  --error: light-dark(#c81e2b, #ff6b6b); --error-bg: light-dark(#fce6e8, #3a1b1e);
  --info: light-dark(#0b63c9, #5aa9ff); --info-bg: light-dark(#e1edfb, #162a42);
  --paper: #ffffff;
  --bg-canvas: light-dark(#e9ede7, #121714);
  --primary: light-dark(#315e4c, #b0d4ba);
  --on-primary: light-dark(#ffffff, #1e3226);
  --shadow-pop: 0 1px 2px light-dark(rgb(0 0 0 / .12), rgb(0 0 0 / .5)), 0 8px 24px light-dark(rgb(0 0 0 / .12), rgb(0 0 0 / .5));
  --backdrop: rgb(0 0 0 / .4);

  /* overlays: canvas only; identical in both themes */
  --ov-cut: #ff2fd0; --ov-hole: #ffa6ff; --ov-bleed: #ffd633; --ov-cell: #33d6ff; --ov-extent: #ffffff;
  --ov-halo: rgb(0 0 0 / .8);
  --ov-w-cut: 1.5; --ov-w-hole: 1; --ov-w-bleed: 1.5; --ov-w-cell: 1; --ov-w-extent: 1;
  /* a die's text boxes, in the colours patch-server pictures them in: green for the one read at
     the left, violet for the one read at the right, neither a problem's colour; and the ink of
     the number set in each */
  --ov-text-left: rgb(44 160 44); --ov-text-right: rgb(111 66 193); --ov-text-ink: #16191b; --ov-w-text: 1.5;
  /* a lint's problems, in the colours patch-server draws them in: red, amber, blue */
  --problem-error: rgb(214 39 40); --problem-warning: rgb(240 160 0); --problem-notice: rgb(31 119 180);

  /* a comparison's difference: the colour of a change by where it falls, the importer's proof
     book's, as the server draws them; identical in both themes */
  --diff-patch: rgb(220 30 30); --diff-cut: rgb(225 0 190); --diff-cutaway: rgb(235 150 0); --diff-outside: rgb(128 128 128);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-tile="s"] { --tile: calc(128px * var(--scale)); }
:root[data-tile="l"] { --tile: calc(260px * var(--scale)); }
:root[data-tile="xl"] { --tile: calc(336px * var(--scale)); }

/* base */
html { font: var(--fs-3)/var(--lh-3) var(--font-ui); background: var(--bg-app); color: var(--text-1);
       font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
body { margin: 0; }
.mono { font-family: var(--font-mono); font-size: var(--fs-3m); }
.num  { text-align: right; font-variant-numeric: tabular-nums; }
.t2 { color: var(--text-2); } .t3 { color: var(--text-3); }
.fs-1 { font-size: var(--fs-1); line-height: var(--lh-1); } .fs-2 { font-size: var(--fs-2); line-height: var(--lh-2); }
/* an outline, not a shadow, so the ring survives forced colours */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } }