/* 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));
  --weight-text: 400;
  --weight-medium: 500;
  --weight-strong: 600;
  --weight-heading: 650;
  --weight-bold: 700;
  --fs-title: calc(30px * var(--scale));
  --lh-title: calc(38px * var(--scale));
  --fs-title-small: calc(24px * var(--scale));
  --lh-title-small: calc(30px * var(--scale));
  --tracking-title: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-label: 0.1em;

  --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));
  --production-measure: 72ch;
  --production-ticket: calc(300px * var(--scale));
  --production-identity: calc(112px * var(--scale));
  --production-workbench: calc(1520px * var(--scale));
  --production-count: calc(64px * var(--scale));
  --production-order-identity: calc(160px * var(--scale));
  --batch-colour-swatch: calc(14px * var(--scale));
  --print-check-size: calc(20px * var(--scale));
  --production-print-ledger: calc(720px * var(--scale));
  --production-patch-thumb: calc(48px * var(--scale));
  --production-patch-width: calc(320px * var(--scale));
  --production-search-ticket: calc(340px * var(--scale));
  --production-job-actions: calc(184px * var(--scale));
  --production-packing-actions: calc(176px * var(--scale));
  --production-key-width: calc(140px * var(--scale));
  --production-intake-minimum: calc(200px * var(--scale));
  --production-textarea-height: calc(96px * var(--scale));
  --production-graph-height: calc(260px * var(--scale));
  --production-graph-stroke: 3;
  --production-graph-label: 14px;
  --production-highlight-fill: rgb(255 214 51 / 0.18);
  --production-highlight-stroke: 2px;
  --production-number-halo: 0.12em;
  --production-cut-dash: 5 3;
  --production-die-stroke: 0.8px;
  --radius: 6px;
  --radius-panel: 10px;
  --radius-small: 2px;
  --radius-pill: 999px;
  --rule: 1px;
  --order-patch-column: calc(260px * var(--scale));
  --order-thumb: calc(96px * var(--scale));

  --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);
  --danger-quiet: light-dark(#92565f, #c48f91);
  --info: light-dark(#0b63c9, #5aa9ff);
  --info-bg: light-dark(#e1edfb, #162a42);
  --paper: #ffffff;
  --bg-canvas: light-dark(#e9ede7, #121714);
  --shadow-pop:
    0 1px 2px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5)),
    0 8px 24px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5));
  --backdrop: rgb(0 0 0 / 0.4);
  --shadow-sheet: 0 4px 16px rgb(25 45 30 / 0.08);
  --shadow-drawer: -24px 0 80px rgb(0 0 0 / 0.2);

  /* 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 / 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);
  /* the hatching of what is not mapped: the blank where a line has no patch to show */
  --hatching-faint: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--error) 14%, transparent) 0 calc(8px * var(--scale)),
    transparent 0 calc(16px * var(--scale))
  );
  /* the column that a setting's field keeps to, so that a number is not a line long */
  --setting: calc(280px * var(--scale));
  --ink: #24352b;
  --ink-quiet: #6c776e;
  /* a cubby's cards, told from its neighbours' by a faint tint */
  --card-other: color-mix(in srgb, var(--paper) 90%, #315e4c);
  --card-marked: color-mix(in srgb, var(--paper) 62%, #7f5500);
  --die-edge: #1b1b1f;
  --die-cutout: #74747f;
  --print-ink: #222;
  --print-muted: #555;
  --print-rule: #ddd;
  /* the least width that the roll is drawn at, below which a stack scrolls */
  --roll-least: calc(900px * var(--scale));
}
: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));
}