/* The two looks of the app around the wireframes (Board 2): Retro, the playground's
   neo-brutalist look, and Clean, the dashboard's. Colours and type match the repo skins in
   review/site/skins; the extra tokens are Board 2's chrome values. boot.js sets data-skin on
   <html> before the first paint. */

:root,
:root[data-skin="retro"] {
  --bg: #f9dcd4;
  --canvas: #f9dcd4;
  --dot: rgba(39, 24, 19, 0.2);
  --surface: #ffffff;
  --surface2: #ffe9e3;
  --head: #ffe9e3;
  --panel: #ffffff;
  --topbar: #ffe9e3;
  --topbar-shadow: 0 4px 0 rgba(39, 24, 19, 0.15);
  --rail: #ffffff;
  --ink: #271813;
  --muted: #5b4138;
  --line: #271813;
  --control: #271813;
  --soft: rgba(39, 24, 19, 0.22);
  --accent: #ff5f1f;
  --on-accent: #271813;
  --accent-ink: #ab3600;
  --accent-line: #271813;
  --tint: rgba(255, 95, 31, 0.14);
  --danger: #b91c1c;
  --warn: #ef4444;
  --bw: 3px;
  --bwc: 2px;
  --r: 0px;
  --rc: 0px;
  --rs: 0px;
  --pill: 0px;
  --shadow: 6px 6px 0 #271813;
  --shadow-c: 2px 2px 0 #271813;
  --shadow-r: 3px 3px 0 #271813;
  --shadow-sm: none;
  --device-shadow: none;
  --ui: "Space Grotesk", system-ui, sans-serif;
  --display: "Space Grotesk", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --hw: 700;
  --ht: uppercase;
  --hs: 0.04em;
  --lw: 700;
  --lt: uppercase;
  --ls: 0.05em;
  --lsz: 11px;
  --ew: 700;
  --et: uppercase;
  --es: 0.08em;
  --esz: 10.5px;
  --dark: #271813;
  --on-dark: #ffffff;
  --dark-shadow: 3px 3px 0 #ff5f1f;
  --sel: #ff5f1f;
  --measure: #e8336f;
  --field-bg: #ffffff;
  --scrim: rgba(39, 24, 19, 0.35);

  /* Sizes and weights that differ by skin */
  --card-title: 13px;
  --title: 16px;
  --big-title: 28px;
  --big-title-w: 700;
  --big-title-s: 0.02em;
  --micro: 9.5px;
  --micro-w: 700;
  --micro-s: 0.08em;
  --micro-t: uppercase;
  --seg-size: 10.5px;
  --tile-size: 11px;
  --tile-r: 0px;
  --name-w: 700;
  --tag-s: 0.08em;
  --tag-t: uppercase;

  /* Tile and chrome icon colours */
  --ic-ink: #271813;
  --ic-soft: #ffe9e3;
  --ic-strong: #ff5f1f;
  --ic-strong-line: #271813;
  --ic-on-strong: #271813;
  --ic-track: #271813;
}

:root[data-skin="clean"] {
  --bg: #f7f1e3;
  --canvas: #f1e9d8;
  --dot: rgba(28, 34, 48, 0.13);
  --surface: #fffdf8;
  --surface2: #f1e9d8;
  --head: #fffdf8;
  --panel: #fffdf8;
  --topbar: #fffdf8;
  --topbar-shadow: none;
  --rail: #fffdf8;
  --ink: #1c2230;
  --muted: #474e5f;
  --line: #e6dccb;
  --control: #d3c6ad;
  --soft: #e6dccb;
  --accent: #9a3412;
  --on-accent: #ffffff;
  --accent-ink: #9a3412;
  --accent-line: #9a3412;
  --tint: rgba(154, 52, 18, 0.1);
  --danger: #b91c1c;
  --warn: #b91c1c;
  --bw: 1px;
  --bwc: 1px;
  --r: 14px;
  --rc: 10px;
  --rs: 8px;
  --pill: 999px;
  --shadow: 0 1px 2px rgba(28, 34, 48, 0.05), 0 10px 28px -12px rgba(28, 34, 48, 0.18);
  --shadow-c: 0 1px 2px rgba(28, 34, 48, 0.07);
  --shadow-r: 0 1px 2px rgba(28, 34, 48, 0.07);
  --shadow-sm: 0 1px 2px rgba(28, 34, 48, 0.07);
  --device-shadow: 0 2px 6px rgba(28, 34, 48, 0.12), 0 40px 70px -30px rgba(28, 34, 48, 0.55);
  --ui: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --display: "Barlow", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --hw: 600;
  --ht: none;
  --hs: -0.01em;
  --lw: 600;
  --lt: none;
  --ls: 0;
  --lsz: 13px;
  --ew: 700;
  --et: none;
  --es: 0;
  --esz: 12.5px;
  --dark: #1c2230;
  --on-dark: #ffffff;
  --dark-shadow: 0 12px 28px -12px rgba(28, 34, 48, 0.6);
  --sel: #9a3412;
  --measure: #c0265d;
  --field-bg: #ffffff;
  --scrim: rgba(28, 34, 48, 0.32);

  --card-title: 16px;
  --title: 20px;
  --big-title: 34px;
  --big-title-w: 600;
  --big-title-s: -0.01em;
  --micro: 12px;
  --micro-w: 400;
  --micro-s: 0;
  --micro-t: none;
  --seg-size: 13px;
  --tile-size: 12px;
  --tile-r: 12px;
  --name-w: 600;
  --tag-s: 0;
  --tag-t: none;

  --ic-ink: #1c2230;
  --ic-soft: #f1e9d8;
  --ic-strong: #9a3412;
  --ic-strong-line: #9a3412;
  --ic-on-strong: #ffffff;
  --ic-track: #d3c6ad;
}