@worknice/whiteboard 0.0.2 → 0.0.3

package/dist/shared.css

@@ -1,391 +1,407 @@
-/* universal */
-
-a,
-abbr,
-address,
-area,
-article,
-aside,
-audio,
-b,
-base,
-bdi,
-bdo,
-blockquote,
-body,
-br,
-button,
-canvas,
-caption,
-cite,
-code,
-col,
-colgroup,
-data,
-datalist,
-dd,
-del,
-details,
-dfn,
-dialog,
-div,
-dl,
-dt,
-em,
-embed,
-fieldset,
-figcaption,
-figure,
-footer,
-form,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-head,
-header,
-hgroup,
-hr,
-html,
-i,
-iframe,
-img,
-input,
-ins,
-kbd,
-label,
-legend,
-li,
-link,
-main,
-map,
-mark,
-menu,
-meta,
-meter,
-nav,
-noscript,
-object,
-ol,
-optgroup,
-option,
-output,
-p,
-picture,
-pre,
-progress,
-q,
-rp,
-rt,
-ruby,
-s,
-samp,
-script,
-search,
-section,
-select,
-slot,
-small,
-source,
-span,
-strong,
-style,
-sub,
-summary,
-sup,
-table,
-tbody,
-td,
-template,
-textarea,
-tfoot,
-th,
-thead,
-time,
-title,
-tr,
-track,
-u,
-ul,
-var,
-video,
-wbr {
+a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, link, main, map, mark, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, picture, pre, progress, q, rp, rt, ruby, s, samp, script, search, section, select, slot, small, source, span, strong, style, sub, summary, sup, table, tbody, td, template, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr {
   all: unset;
   box-sizing: border-box;
 }
 
-svg,
-math {
+svg, math {
   box-sizing: border-box;
 }
 
-head,
-link,
-meta,
-noscript,
-script,
-style,
-title {
+head, link, meta, noscript, script, style, title {
   display: none;
 }
 
-address,
-article,
-aside,
-blockquote,
-details,
-dialog,
-dd,
-div,
-dl,
-dt,
-fieldset,
-figcaption,
-figure,
-footer,
-form,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-header,
-hgroup,
-hr,
-li,
-main,
-nav,
-ol,
-p,
-pre,
-section,
-ul {
+address, article, aside, blockquote, details, dialog, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, li, main, nav, ol, p, pre, section, ul {
   display: block;
 }
 
-audio,
-canvas,
-iframe,
-img,
-math,
-object,
-svg,
-video {
-  display: block;
+audio, canvas, iframe, img, math, object, svg, video {
   max-width: 100%;
+  display: block;
 }
 
 table {
   display: table;
 }
+
 thead {
   display: table-header-group;
 }
+
 tfoot {
   display: table-footer-group;
 }
+
 tbody {
   display: table-row-group;
 }
+
 tr {
   display: table-row;
 }
-th,
-td {
-  display: table-cell;
+
+th, td {
   text-align: start;
+  display: table-cell;
+}
+
+a, button:not(:disabled) {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
 }
 
 body {
   -webkit-font-smoothing: antialiased;
   -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
-  display: block;
   height: 100dvh;
+  display: block;
 }
 
-:root {
-  color-scheme: light dark;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    color-scheme: dark light;
-  }
+#__next {
+  overflow: hidden;
 }
 
-/* global */
-
 :root {
-  --size-n5: 1px; /* -1 */
-  --size-n4: 2px; /* -1 */
-  --size-n3: 3px; /* -3 */
-  --size-n2: 6px; /* -3 */
-  --size-n1: 12px; /* -6 */
-  --size-00: 18px;
-  --size-p1: 24px; /* +6 */
-  --size-p2: 36px; /* +12 */
-  --size-p3: 48px; /* +12 */
-  --size-p4: 72px; /* +24 */
-  --size-p5: 96px; /* +24 */
-
-  --typeface-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
-    Cantarell, "Helvetica Neue", sans-serif;
+  --size-n5: 1px;
+  --size-n4: 2px;
+  --size-n3: 4px;
+  --size-n2: 8px;
+  --size-n1: 12px;
+  --size-00: 16px;
+  --size-p1: 20px;
+  --size-p2: 24px;
+  --size-p3: 32px;
+  --size-p4: 48px;
+  --size-p5: 64px;
+  --size-p6: 80px;
+  --typeface-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   --typeface-brand: var(--typeface-system);
   --typeface-monospace: monospace;
+  --font-regular: normal 400 14px / var(--size-p1) var(--typeface-system);
+  --font-regular-bold: normal 700 14px / var(--size-p1) var(--typeface-system);
+  --font-regular-italic: italic 400 14px / var(--size-p1) var(--typeface-system);
+  --font-regular-bold-italic: italic 700 14px / var(--size-p1) var(--typeface-system);
+  --font-small: normal 400 12px / var(--size-p1) var(--typeface-system);
+  --font-small-bold: normal 700 12px / var(--size-p1) var(--typeface-system);
+  --font-small-italic: italic 400 12px / var(--size-p1) var(--typeface-system);
+  --font-small-bold-italic: italic 700 12px / var(--size-p1) var(--typeface-system);
+  --font-tiny: normal 400 10px / var(--size-00) var(--typeface-system);
+  --font-tiny-bold: normal 700 10px / var(--size-00) var(--typeface-system);
+  --font-tiny-italic: italic 400 10px / var(--size-00) var(--typeface-system);
+  --font-tiny-bold-italic: italic 700 10px / var(--size-00) var(--typeface-system);
+  --font-monospace: normal 400 14px / var(--size-p1) var(--typeface-monospace);
+  --font-h1: normal 600 34px / 150% var(--typeface-brand);
+  --font-h2: normal 600 30px / 150% var(--typeface-brand);
+  --font-h3: normal 600 26px / 150% var(--typeface-brand);
+  --font-h4: normal 600 22px / 150% var(--typeface-brand);
+  --font-h5: normal 600 18px / 150% var(--typeface-brand);
+  --font-h6: normal 600 16px / 150% var(--typeface-brand);
+  --color-black: #000;
+  --color-white: #fff;
+  --color-purple-s04: #360828;
+  --color-purple-s03: #4e0a3b;
+  --color-purple-s02: #660a4d;
+  --color-purple-s01: #800e61;
+  --color-purple-000: #90116e;
+  --color-purple-t01: #a83083;
+  --color-purple-t02: #b24990;
+  --color-purple-t03: #be609d;
+  --color-purple-t04: #c977ab;
+  --color-purple-t05: #d38cb7;
+  --color-purple-t06: #e0a0c7;
+  --color-purple-t07: #e6b5d3;
+  --color-purple-t08: #edcddf;
+  --color-purple-t09: #f4e2ec;
+  --color-purple-t10: #fdf8fb;
+  --color-maroon-s04: #340d1b;
+  --color-maroon-s03: #4a1628;
+  --color-maroon-s02: #601d34;
+  --color-maroon-s01: #7b223f;
+  --color-maroon-000: #95254b;
+  --color-maroon-t01: #ac1852;
+  --color-maroon-t02: #c43d69;
+  --color-maroon-t03: #cf5778;
+  --color-maroon-t04: #d9708a;
+  --color-maroon-t05: #df889b;
+  --color-maroon-t06: #e6a0ae;
+  --color-maroon-t07: #eab6c0;
+  --color-maroon-t08: #eeced3;
+  --color-maroon-t09: #f6e2e5;
+  --color-maroon-t10: #fdf8f9;
+  --color-yellow-s04: #211b0c;
+  --color-yellow-s03: #332710;
+  --color-yellow-s02: #423412;
+  --color-yellow-s01: #504317;
+  --color-yellow-000: #60511c;
+  --color-yellow-t01: #716023;
+  --color-yellow-t02: #826e2a;
+  --color-yellow-t03: #947f31;
+  --color-yellow-t04: #a78f38;
+  --color-yellow-t05: #b99f3f;
+  --color-yellow-t06: #cdb047;
+  --color-yellow-t07: #e9c959;
+  --color-yellow-t08: #f3d262;
+  --color-yellow-t09: #f8e5b2;
+  --color-yellow-t10: #fcf9f1;
+  --color-green-s04: #131e15;
+  --color-green-s03: #1c2d20;
+  --color-green-s02: #253b29;
+  --color-green-s01: #304a33;
+  --color-green-000: #3b5a3e;
+  --color-green-t01: #466a4a;
+  --color-green-t02: #527a56;
+  --color-green-t03: #5e8c63;
+  --color-green-t04: #6b9e70;
+  --color-green-t05: #76ae7c;
+  --color-green-t06: #8bc090;
+  --color-green-t07: #a2cfa5;
+  --color-green-t08: #badfbc;
+  --color-green-t09: #d4edd6;
+  --color-green-t10: #f4fbf5;
+  --color-blue-s04: #171c25;
+  --color-blue-s03: #232937;
+  --color-blue-s02: #2e3648;
+  --color-blue-s01: #3a455a;
+  --color-blue-000: #46536c;
+  --color-blue-t01: #53637c;
+  --color-blue-t02: #60728f;
+  --color-blue-t03: #6e83a3;
+  --color-blue-t04: #768cae;
+  --color-blue-t05: #90a4c3;
+  --color-blue-t06: #a6b5ce;
+  --color-blue-t07: #bac5d8;
+  --color-blue-t08: #cfd6e3;
+  --color-blue-t09: #e3e7ee;
+  --color-blue-t10: #f9f9fb;
+  --color-teal-s04: #101d24;
+  --color-teal-s03: #182c35;
+  --color-teal-s02: #1f3a45;
+  --color-teal-s01: #284953;
+  --color-teal-000: #315864;
+  --color-teal-t01: #3c6976;
+  --color-teal-t02: #457987;
+  --color-teal-t03: #508a9b;
+  --color-teal-t04: #5b9caf;
+  --color-teal-t05: #68b1c6;
+  --color-teal-t06: #7ebed1;
+  --color-teal-t07: #96cdde;
+  --color-teal-t08: #b3ddea;
+  --color-teal-t09: #d2ebf4;
+  --color-teal-t10: #f5fafc;
+  --color-orange-s04: #2b160a;
+  --color-orange-s03: #431e0f;
+  --color-orange-s02: #5c2415;
+  --color-orange-s01: #6e3313;
+  --color-orange-000: #813f11;
+  --color-orange-t01: #984c17;
+  --color-orange-t02: #ae571c;
+  --color-orange-t03: #c76421;
+  --color-orange-t04: #e77628;
+  --color-orange-t05: #ec8542;
+  --color-orange-t06: #f69c63;
+  --color-orange-t07: #f6b48c;
+  --color-orange-t08: #f7cdb3;
+  --color-orange-t09: #f8e2d5;
+  --color-orange-t10: #fcf8f6;
+  --color-red-s04: #330f11;
+  --color-red-s03: #4a171c;
+  --color-red-s02: #611d26;
+  --color-red-s01: #7a2628;
+  --color-red-000: #912f30;
+  --color-red-t01: #ab393a;
+  --color-red-t02: #c34243;
+  --color-red-t03: #e15252;
+  --color-red-t04: #e46b66;
+  --color-red-t05: #e8857e;
+  --color-red-t06: #eb9f97;
+  --color-red-t07: #efb5af;
+  --color-red-t08: #f2cdc9;
+  --color-red-t09: #f6e2e0;
+  --color-red-t10: #fcf8f8;
+  --color-grey-s04: #191c21;
+  --color-grey-s03: #252930;
+  --color-grey-s02: #31363f;
+  --color-grey-s01: #3e4550;
+  --color-grey-000: #4b5360;
+  --color-grey-t01: #5a6371;
+  --color-grey-t02: #677282;
+  --color-grey-t03: #768295;
+  --color-grey-t04: #828fa3;
+  --color-grey-t05: #97a3b6;
+  --color-grey-t06: #abb4c3;
+  --color-grey-t07: #bdc4d0;
+  --color-grey-t08: #d2d6de;
+  --color-grey-t09: #e4e7eb;
+  --color-grey-t10: #f9f9fa;
+  --shadow-default: 0px 1px 4px 0px #00000014;
+  --shadow-heavy: 0px 2px 8px 0px #00000029;
+  --tone-default: var(--color-grey-s01);
+  --tone-primary: var(--color-purple-000);
+  --tone-muted: var(--color-grey-t04);
+  --tone-danger: var(--color-red-t02);
+  --tone-warning: var(--color-yellow-t02);
+  --tone-success: var(--color-green-t02);
+  --tone-info: var(--color-teal-t02);
+  --tone-light: var(--color-grey-t08);
+}
 
-  --font-regular: normal 400 16px / var(--size-p1) var(--typeface-system);
-  --font-monospace: normal 400 16px / var(--size-p1) var(--typeface-monospace);
-
-  --font-bold: normal 600 16px / var(--size-p1) var(--typeface-system);
-  --font-italic: italic 400 16px / var(--size-p1) var(--typeface-system);
-  --font-bold-italic: italic 600 16px / var(--size-p1) var(--typeface-system);
-
-  --font-title: normal 800 66px / var(--size-p4) var(--typeface-brand);
-  --font-heading: normal 800 36px / var(--size-p3) var(--typeface-brand);
-  --font-subheading: normal 800 30px / var(--size-p2) var(--typeface-brand);
-
-  --font-label: normal 800 16px / var(--size-p1) var(--typeface-system);
-  --font-hero: normal 400 36px / var(--size-p3) var(--typeface-system);
-  --font-small: normal 400 12px / var(--size-00) var(--typeface-system);
-
-  --color-neutral-shade-5: oklch(14.49% 0 0);
-  --color-neutral-shade-4: oklch(20.04% 0 0);
-  --color-neutral-shade-3: oklch(23.88% 0 0);
-  --color-neutral-shade-2: oklch(27.99% 0 0);
-  --color-neutral-shade-1: oklch(31.82% 0 0);
-  --color-neutral-vivid: oklch(44.5% 0 0);
-  --color-neutral-muted: oklch(72.1% 0 0);
-  --color-neutral-pastel: oklch(84.2% 0 0);
-  --color-neutral-tint-1: oklch(85.4% 0 0);
-  --color-neutral-tint-2: oklch(88.2% 0 0);
-  --color-neutral-tint-3: oklch(91.1% 0 0);
-  --color-neutral-tint-4: oklch(93.9% 0 0);
-  --color-neutral-tint-5: oklch(97% 0 0);
-
-  --color-red-shade-5: oklch(14.49% 0.0197 22.1);
-  --color-red-shade-4: oklch(20.04% 0.0174 22.1);
-  --color-red-shade-3: oklch(23.88% 0.0262 22.1);
-  --color-red-shade-2: oklch(27.99% 0.0343 22.1);
-  --color-red-shade-1: oklch(31.82% 0.0408 22.1);
-  --color-red-vivid: oklch(44.5% 0.18 22.1);
-  --color-red-muted: oklch(72.1% 0.079 22.1);
-  --color-red-pastel: oklch(84.2% 0.135 22.1);
-  --color-red-tint-1: oklch(85.4% 0.036 22.1);
-  --color-red-tint-2: oklch(88.2% 0.029 22.1);
-  --color-red-tint-3: oklch(91.1% 0.023 22.1);
-  --color-red-tint-4: oklch(93.9% 0.013 22.1);
-  --color-red-tint-5: oklch(97% 0.007 22.1);
-
-  --color-orange-shade-5: oklch(14.49% 0.0197 59.5);
-  --color-orange-shade-4: oklch(20.04% 0.0174 59.5);
-  --color-orange-shade-3: oklch(23.88% 0.0262 59.5);
-  --color-orange-shade-2: oklch(27.99% 0.0343 59.5);
-  --color-orange-shade-1: oklch(31.82% 0.0408 59.5);
-  --color-orange-vivid: oklch(44.5% 0.18 59.5);
-  --color-orange-muted: oklch(72.1% 0.079 59.5);
-  --color-orange-pastel: oklch(84.2% 0.135 59.5);
-  --color-orange-tint-1: oklch(85.4% 0.036 59.5);
-  --color-orange-tint-2: oklch(88.2% 0.029 59.5);
-  --color-orange-tint-3: oklch(91.1% 0.023 59.5);
-  --color-orange-tint-4: oklch(93.9% 0.013 59.5);
-  --color-orange-tint-5: oklch(97% 0.007 59.5);
-
-  --color-yellow-shade-5: oklch(14.49% 0.0197 93.3);
-  --color-yellow-shade-4: oklch(20.04% 0.0174 93.3);
-  --color-yellow-shade-3: oklch(23.88% 0.0262 93.3);
-  --color-yellow-shade-2: oklch(27.99% 0.0343 93.3);
-  --color-yellow-shade-1: oklch(31.82% 0.0408 93.3);
-  --color-yellow-vivid: oklch(44.5% 0.18 93.3);
-  --color-yellow-muted: oklch(72.1% 0.079 93.3);
-  --color-yellow-pastel: oklch(84.2% 0.135 93.3);
-  --color-yellow-tint-1: oklch(85.4% 0.036 93.3);
-  --color-yellow-tint-2: oklch(88.2% 0.029 93.3);
-  --color-yellow-tint-3: oklch(91.1% 0.023 93.3);
-  --color-yellow-tint-4: oklch(93.9% 0.013 93.3);
-  --color-yellow-tint-5: oklch(97% 0.007 93.3);
-
-  --color-green-shade-5: oklch(14.49% 0.0197 147.15);
-  --color-green-shade-4: oklch(20.04% 0.0174 147.15);
-  --color-green-shade-3: oklch(23.88% 0.0262 147.15);
-  --color-green-shade-2: oklch(27.99% 0.0343 147.15);
-  --color-green-shade-1: oklch(31.82% 0.0408 147.15);
-  --color-green-vivid: oklch(44.5% 0.18 147.15);
-  --color-green-muted: oklch(72.1% 0.079 147.15);
-  --color-green-pastel: oklch(84.2% 0.135 147.15);
-  --color-green-tint-1: oklch(85.4% 0.036 147.15);
-  --color-green-tint-2: oklch(88.2% 0.029 147.15);
-  --color-green-tint-3: oklch(91.1% 0.023 147.15);
-  --color-green-tint-4: oklch(93.9% 0.013 147.15);
-  --color-green-tint-5: oklch(97% 0.007 147.15);
-
-  --color-teal-shade-5: oklch(14.49% 0.0197 218.38);
-  --color-teal-shade-4: oklch(20.04% 0.0174 218.38);
-  --color-teal-shade-3: oklch(23.88% 0.0262 218.38);
-  --color-teal-shade-2: oklch(27.99% 0.0343 218.38);
-  --color-teal-shade-1: oklch(31.82% 0.0408 218.38);
-  --color-teal-vivid: oklch(44.5% 0.18 218.38);
-  --color-teal-muted: oklch(72.1% 0.079 218.38);
-  --color-teal-pastel: oklch(84.2% 0.135 218.38);
-  --color-teal-tint-1: oklch(85.4% 0.036 218.38);
-  --color-teal-tint-2: oklch(88.2% 0.029 218.38);
-  --color-teal-tint-3: oklch(91.1% 0.023 218.38);
-  --color-teal-tint-4: oklch(93.9% 0.013 218.38);
-  --color-teal-tint-5: oklch(97% 0.007 218.38);
-
-  --color-blue-shade-5: oklch(14.49% 0.0197 259);
-  --color-blue-shade-4: oklch(20.04% 0.0174 259);
-  --color-blue-shade-3: oklch(23.88% 0.0262 259);
-  --color-blue-shade-2: oklch(27.99% 0.0343 259);
-  --color-blue-shade-1: oklch(31.82% 0.0408 259);
-  --color-blue-vivid: oklch(44.5% 0.18 259);
-  --color-blue-muted: oklch(72.1% 0.079 259);
-  --color-blue-pastel: oklch(84.2% 0.135 259);
-  --color-blue-tint-1: oklch(85.4% 0.036 259);
-  --color-blue-tint-2: oklch(88.2% 0.029 259);
-  --color-blue-tint-3: oklch(91.1% 0.023 259);
-  --color-blue-tint-4: oklch(93.9% 0.013 259);
-  --color-blue-tint-5: oklch(97% 0.007 259);
-
-  --color-purple-shade-5: oklch(14.49% 0.0197 342.6);
-  --color-purple-shade-4: oklch(20.04% 0.0174 342.6);
-  --color-purple-shade-3: oklch(23.88% 0.0262 342.6);
-  --color-purple-shade-2: oklch(27.99% 0.0343 342.6);
-  --color-purple-shade-1: oklch(31.82% 0.0408 342.6);
-  --color-purple-vivid: oklch(44.5% 0.18 342.6);
-  --color-purple-muted: oklch(72.1% 0.079 342.6);
-  --color-purple-pastel: oklch(84.2% 0.135 342.6);
-  --color-purple-tint-1: oklch(85.4% 0.036 342.6);
-  --color-purple-tint-2: oklch(88.2% 0.029 342.6);
-  --color-purple-tint-3: oklch(91.1% 0.023 342.6);
-  --color-purple-tint-4: oklch(93.9% 0.013 342.6);
-  --color-purple-tint-5: oklch(97% 0.007 342.6);
+@supports (color: lab(0% 0 0)) {
+  :root {
+    --color-purple-s04: lab(10.0022% 25.4732 -8.94786);
+    --color-purple-s03: lab(16.5022% 34.4439 -12.0944);
+    --color-purple-s02: lab(22.5006% 42.9427 -15.0839);
+    --color-purple-s01: lab(29.0053% 50.6619 -17.7879);
+    --color-purple-000: lab(33.0269% 55.2029 -19.3824);
+    --color-purple-t01: lab(41.4974% 55.1815 -19.3764);
+    --color-purple-t02: lab(47.501% 49.5339 -17.397);
+    --color-purple-t03: lab(54.0029% 43.8823 -15.4105);
+    --color-purple-t04: lab(60.4942% 38.2237 -13.4269);
+    --color-purple-t05: lab(66.5022% 32.5397 -11.4305);
+    --color-purple-t06: lab(72.9974% 28.7879 -10.1077);
+    --color-purple-t07: lab(78.9986% 21.6941 -7.61763);
+    --color-purple-t08: lab(85.4965% 13.6953 -4.80902);
+    --color-purple-t09: lab(91.5032% 7.53409 -2.6458);
+    --color-purple-t10: lab(98.0031% 1.97041 -.691807);
+    --color-maroon-s04: lab(9.99908% 20.9561 1.16742);
+    --color-maroon-s03: lab(16.4945% 26.4561 1.4814);
+    --color-maroon-s02: lab(22.5018% 32.4336 2.27157);
+    --color-maroon-s01: lab(28.9994% 40.2031 4.99596);
+    --color-maroon-000: lab(35.0033% 48.6421 6.0398);
+    --color-maroon-t01: lab(38.4451% 59.0069 7.32463);
+    --color-maroon-t02: lab(47.5011% 56.6057 6.61669);
+    --color-maroon-t03: lab(53.9954% 50.5357 6.85142);
+    --color-maroon-t04: lab(60.4979% 43.6197 5.68397);
+    --color-maroon-t05: lab(66.5011% 35.7023 4.52987);
+    --color-maroon-t06: lab(73.0046% 28.2885 3.52187);
+    --color-maroon-t07: lab(79.0034% 20.3354 2.53297);
+    --color-maroon-t08: lab(85.4965% 12.4139 1.54674);
+    --color-maroon-t09: lab(91.4983% 7.44468 .927663);
+    --color-maroon-t10: lab(98.003% 1.68055 .209415);
+    --color-yellow-s04: lab(9.99624% 1.29871 9.71398);
+    --color-yellow-s03: lab(16.505% 3.37684 16.8854);
+    --color-yellow-s02: lab(22.5033% 3.14651 23.1595);
+    --color-yellow-s01: lab(29.005% 1.6176 28.1483);
+    --color-yellow-000: lab(34.9951% 1.5284 32.0706);
+    --color-yellow-t01: lab(41.4981% 1.73685 36.0533);
+    --color-yellow-t02: lab(47.5015% 1.90368 39.837);
+    --color-yellow-t03: lab(54.0038% 1.827 43.9482);
+    --color-yellow-t04: lab(60.4968% 1.99881 47.9833);
+    --color-yellow-t05: lab(66.5007% 2.15012 51.7647);
+    --color-yellow-t06: lab(73.0056% 2.32029 55.8528);
+    --color-yellow-t07: lab(82.1678% 2.43753 58.7109);
+    --color-yellow-t08: lab(85.5046% 2.44528 58.8458);
+    --color-yellow-t09: lab(91.4985% 1.13246 27.2572);
+    --color-yellow-t10: lab(98.0056% .167042 4.01384);
+    --color-green-s04: lab(10.003% -7.02213 4.57836);
+    --color-green-s03: lab(16.5061% -9.66655 6.0676);
+    --color-green-s02: lab(22.4997% -12.2195 7.99987);
+    --color-green-s01: lab(28.9973% -14.6955 10.7525);
+    --color-green-000: lab(35.0025% -16.713 12.2301);
+    --color-green-t01: lab(41.4988% -18.8138 13.7726);
+    --color-green-t02: lab(47.5004% -20.7467 15.1803);
+    --color-green-t03: lab(53.9968% -22.85 16.7188);
+    --color-green-t04: lab(60.4956% -25.0114 18.3012);
+    --color-green-t05: lab(66.2044% -26.8844 19.6719);
+    --color-green-t06: lab(72.9984% -25.0058 18.2948);
+    --color-green-t07: lab(78.995% -21.3816 15.641);
+    --color-green-t08: lab(85.4975% -17.7567 12.9913);
+    --color-green-t09: lab(91.5034% -11.6912 8.55393);
+    --color-green-t10: lab(97.998% -3.07056 2.24683);
+    --color-blue-s04: lab(9.9951% .0827089 -7.30749);
+    --color-blue-s03: lab(16.4995% .235334 -10.0043);
+    --color-blue-s02: lab(22.4985% .14089 -12.2839);
+    --color-blue-s01: lab(29.0043% -.197023 -14.0111);
+    --color-blue-000: lab(34.9952% -.208318 -15.9092);
+    --color-blue-t01: lab(41.5032% -1.4728 -16.2386);
+    --color-blue-t02: lab(47.5031% -1.62649 -17.9383);
+    --color-blue-t03: lab(54.0012% -1.78918 -19.7127);
+    --color-blue-t04: lab(57.4572% -1.87787 -20.7244);
+    --color-blue-t05: lab(66.505% -1.67066 -18.4318);
+    --color-blue-t06: lab(73.003% -1.33029 -14.7334);
+    --color-blue-t07: lab(78.9975% -1.00923 -11.172);
+    --color-blue-t08: lab(85.5039% -.655174 -7.25503);
+    --color-blue-t09: lab(91.504% -.342786 -3.80002);
+    --color-blue-t10: lab(97.9979% -.061512 -.680637);
+    --color-teal-s04: lab(10.0025% -4.27514 -6.39224);
+    --color-teal-s03: lab(16.5001% -5.67302 -8.94335);
+    --color-teal-s02: lab(22.4948% -7.66191 -10.2513);
+    --color-teal-s01: lab(28.9996% -10.4556 -9.77436);
+    --color-teal-000: lab(34.9946% -11.8383 -11.0709);
+    --color-teal-t01: lab(41.5021% -13.3025 -12.4333);
+    --color-teal-t02: lab(47.497% -14.6846 -13.7304);
+    --color-teal-t03: lab(53.9959% -16.2842 -15.2303);
+    --color-teal-t04: lab(60.5049% -17.8182 -16.6592);
+    --color-teal-t05: lab(68.0388% -19.5234 -18.2586);
+    --color-teal-t06: lab(73.0049% -17.5327 -16.409);
+    --color-teal-t07: lab(78.9989% -15.3448 -14.3471);
+    --color-teal-t08: lab(85.4991% -12.0369 -11.2646);
+    --color-teal-t09: lab(91.5038% -7.45219 -6.97418);
+    --color-teal-t10: lab(98.0043% -1.39949 -1.30959);
+    --color-orange-s04: lab(10.0002% 10.1484 11.1914);
+    --color-orange-s03: lab(16.4941% 17.287 18.0753);
+    --color-orange-s02: lab(22.5019% 25.3713 22.6193);
+    --color-orange-s01: lab(28.9951% 25.2468 31.6541);
+    --color-orange-000: lab(34.9949% 27.0011 39.0994);
+    --color-orange-t01: lab(41.5035% 30.3282 43.9777);
+    --color-orange-t02: lab(47.5048% 33.4867 48.5543);
+    --color-orange-t03: lab(53.997% 36.9588 53.5919);
+    --color-orange-t04: lab(62.4155% 41.3745 60.0038);
+    --color-orange-t05: lab(66.5013% 36.6726 53.0748);
+    --color-orange-t06: lab(73.002% 30.325 43.9833);
+    --color-orange-t07: lab(79.0012% 21.1738 30.7058);
+    --color-orange-t08: lab(85.5002% 12.7194 18.4447);
+    --color-orange-t09: lab(91.4966% 6.36935 9.23502);
+    --color-orange-t10: lab(97.9973% 1.08057 1.5673);
+    --color-red-s04: lab(9.99999% 18.6137 7.80677);
+    --color-red-s03: lab(16.4947% 25.1851 9.99947);
+    --color-red-s02: lab(22.498% 31.5293 11.5779);
+    --color-red-s01: lab(29.0012% 37.0381 20.2629);
+    --color-red-000: lab(34.9946% 41.9897 23.4741);
+    --color-red-t01: lab(41.5025% 47.4099 26.5105);
+    --color-red-t02: lab(47.4943% 52.2892 29.2328);
+    --color-red-t03: lab(55.3901% 56.5631 31.6224);
+    --color-red-t04: lab(60.5043% 47.5767 26.5969);
+    --color-red-t05: lab(66.5054% 38.0638 21.2903);
+    --color-red-t06: lab(72.9976% 28.8028 16.1006);
+    --color-red-t07: lab(79.0022% 20.7781 11.6195);
+    --color-red-t08: lab(85.498% 12.8313 7.17409);
+    --color-red-t09: lab(91.4995% 6.53803 3.65618);
+    --color-red-t10: lab(97.9947% 1.12095 .626826);
+    --color-grey-s04: lab(10.0014% -.375159 -3.76356);
+    --color-grey-s03: lab(16.5048% -.518873 -5.18973);
+    --color-grey-s02: lab(22.4989% -.637889 -6.47081);
+    --color-grey-s01: lab(28.998% -.835016 -7.55729);
+    --color-grey-000: lab(34.996% -.935718 -8.54992);
+    --color-grey-t01: lab(41.4995% -1.16855 -9.44594);
+    --color-grey-t02: lab(47.4985% -1.29238 -10.4341);
+    --color-grey-t03: lab(53.9955% -1.42419 -11.4959);
+    --color-grey-t04: lab(58.8594% -1.52367 -12.3012);
+    --color-grey-t05: lab(66.505% -1.38858 -11.2203);
+    --color-grey-t06: lab(73.0025% -1.10519 -8.92031);
+    --color-grey-t07: lab(78.9987% -.833809 -6.73392);
+    --color-grey-t08: lab(85.4945% -.541925 -4.37425);
+    --color-grey-t09: lab(91.499% -.292778 -2.36434);
+    --color-grey-t10: lab(98.0011% -.0513196 -.414193);
+  }
 }
 
 body {
-  background-color: var(--color-blue-tint-5);
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABCSURBVHgB7dOxCQAgDETRU0TQ/TcVFbFQcIIrIqS4D+nCa0JC6+vAsAjjBAr8BY653zAlagv8M1FgLRlsurJAD+AFpUkK9JbtVqUAAAAASUVORK5CYII=);
-  background-size: 20px 20px;
-  color: var(--color-neutral-shade-5);
+  accent-color: var(--purple-650);
+  background: var(--color-grey-t10);
+  color: var(--tone-default);
   font: var(--font-regular);
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: var(--color-blue-shade-4);
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABASURBVHgB7dEhDgAgDEPRQjBDInDc/4adhCtMjGSiXzcvS9bWPheJdSQnUOAv0OkgGZnmXzgiI5uGaPqywArgAwbDB1BUNxceAAAAAElFTkSuQmCC);
-    color: var(--color-neutral-tint-5);
-  }
-}
-
-@media (max-width: 768px) {
+@media (max-width: 600px) {
   :root {
-    --font-title: normal 800 48px / var(--size-p3) var(--typeface-brand);
-    --font-heading: normal 800 36px / var(--size-p2) var(--typeface-brand);
-    --font-subheading: normal 800 24px / var(--size-p1) var(--typeface-brand);
-    --font-hero: normal 400 36px / var(--size-p2) var(--typeface-system);
+    --font-h1: normal 600 28px / 150% var(--typeface-brand);
+    --font-h2: normal 600 26px / 150% var(--typeface-brand);
+    --font-h3: normal 600 24px / 150% var(--typeface-brand);
+    --font-h4: normal 600 22px / 150% var(--typeface-brand);
   }
 }
+