@ersbeth/picokit 0.0.1

package/dist/tokens.css

@@ -0,0 +1,1256 @@
+@layer tokens {
+    html {
+        /* ANIMATIONS */
+
+        --animation-fade-in: fade-in 0.5s var(--ease-3);
+        --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
+        --animation-fade-out: fade-out 0.5s var(--ease-3);
+        --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
+        --animation-scale-up: scale-up 0.5s var(--ease-3);
+        --animation-scale-down: scale-down 0.5s var(--ease-3);
+        --animation-slide-out-up: slide-out-up 0.5s var(--ease-3);
+        --animation-slide-out-down: slide-out-down 0.5s var(--ease-3);
+        --animation-slide-out-right: slide-out-right 0.5s var(--ease-3);
+        --animation-slide-out-left: slide-out-left 0.5s var(--ease-3);
+        --animation-slide-in-up: slide-in-up 0.5s var(--ease-3);
+        --animation-slide-in-down: slide-in-down 0.5s var(--ease-3);
+        --animation-slide-in-right: slide-in-right 0.5s var(--ease-3);
+        --animation-slide-in-left: slide-in-left 0.5s var(--ease-3);
+        --animation-shake-x: shake-x 0.75s var(--ease-out-5);
+        --animation-shake-y: shake-y 0.75s var(--ease-out-5);
+        --animation-shake-z: shake-z 1s var(--ease-in-out-3);
+        --animation-spin: spin 2s linear infinite;
+        --animation-ping: ping 5s var(--ease-out-3) infinite;
+        --animation-blink: blink 1s var(--ease-out-3) infinite;
+        --animation-float: float 3s var(--ease-in-out-3) infinite;
+        --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
+        --animation-pulse: pulse 2s var(--ease-out-3) infinite;
+    }
+
+    /* KEYFRAMES */
+
+    @keyframes fade-in {
+        to {
+            opacity: 1;
+        }
+    }
+    @keyframes fade-in-bloom {
+        0% {
+            opacity: 0;
+            filter: brightness(1) blur(20px);
+        }
+        10% {
+            opacity: 1;
+            filter: brightness(2) blur(10px);
+        }
+        100% {
+            opacity: 1;
+            filter: brightness(1) blur(0);
+        }
+    }
+    @keyframes fade-out {
+        to {
+            opacity: 0;
+        }
+    }
+    @keyframes fade-out-bloom {
+        100% {
+            opacity: 0;
+            filter: brightness(1) blur(20px);
+        }
+        10% {
+            opacity: 1;
+            filter: brightness(2) blur(10px);
+        }
+        0% {
+            opacity: 1;
+            filter: brightness(1) blur(0);
+        }
+    }
+    @keyframes scale-up {
+        to {
+            transform: scale(1.25);
+        }
+    }
+    @keyframes scale-down {
+        to {
+            transform: scale(0.75);
+        }
+    }
+    @keyframes slide-out-up {
+        to {
+            transform: translateY(-100%);
+        }
+    }
+    @keyframes slide-out-down {
+        to {
+            transform: translateY(100%);
+        }
+    }
+    @keyframes slide-out-right {
+        to {
+            transform: translateX(100%);
+        }
+    }
+    @keyframes slide-out-left {
+        to {
+            transform: translateX(-100%);
+        }
+    }
+    @keyframes slide-in-up {
+        from {
+            transform: translateY(100%);
+        }
+    }
+    @keyframes slide-in-down {
+        from {
+            transform: translateY(-100%);
+        }
+    }
+    @keyframes slide-in-right {
+        from {
+            transform: translateX(-100%);
+        }
+    }
+    @keyframes slide-in-left {
+        from {
+            transform: translateX(100%);
+        }
+    }
+    @keyframes shake-x {
+        0%,
+        100% {
+            transform: translateX(0%);
+        }
+        20% {
+            transform: translateX(-5%);
+        }
+        40% {
+            transform: translateX(5%);
+        }
+        60% {
+            transform: translateX(-5%);
+        }
+        80% {
+            transform: translateX(5%);
+        }
+    }
+    @keyframes shake-y {
+        0%,
+        100% {
+            transform: translateY(0%);
+        }
+        20% {
+            transform: translateY(-5%);
+        }
+        40% {
+            transform: translateY(5%);
+        }
+        60% {
+            transform: translateY(-5%);
+        }
+        80% {
+            transform: translateY(5%);
+        }
+    }
+    @keyframes shake-z {
+        0%,
+        100% {
+            transform: rotate(0deg);
+        }
+        20% {
+            transform: rotate(-2deg);
+        }
+        40% {
+            transform: rotate(2deg);
+        }
+        60% {
+            transform: rotate(-2deg);
+        }
+        80% {
+            transform: rotate(2deg);
+        }
+    }
+    @keyframes spin {
+        to {
+            transform: rotate(1turn);
+        }
+    }
+    @keyframes ping {
+        90%,
+        100% {
+            transform: scale(2);
+            opacity: 0;
+        }
+    }
+    @keyframes blink {
+        0%,
+        100% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0.5;
+        }
+    }
+    @keyframes float {
+        50% {
+            transform: translateY(-25%);
+        }
+    }
+    @keyframes bounce {
+        25% {
+            transform: translateY(-20%);
+        }
+        40% {
+            transform: translateY(-3%);
+        }
+        0%,
+        60%,
+        100% {
+            transform: translateY(0);
+        }
+    }
+    @keyframes pulse {
+        50% {
+            transform: scale(0.9, 0.9);
+        }
+    }
+}
+@layer tokens {
+    html {
+        --ratio-square: 1;
+        --ratio-landscape: 4 / 3;
+        --ratio-portrait: 3 / 4;
+        --ratio-wide: 16 / 9;
+        --ratio-ultrawide: 18 / 5;
+        --ratio-golden: 1.618 / 1;
+    }
+}
+@layer tokens {
+    html {
+        /* BORDER WIDTH */
+
+        --border-width-scale: 1;
+        --border-width-s: calc(var(--border-width-scale) * 0.0625rem);
+        --border-width-m: calc(var(--border-width-scale) * 0.125rem);
+        --border-width-l: calc(var(--border-width-scale) * 0.1875rem);
+
+        /* BORDER RADIUS */
+
+        --border-radius-scale: 1;
+        --border-radius-s: calc(var(--border-radius-scale) * 0.1875rem);
+        --border-radius-m: calc(var(--border-radius-scale) * 0.375rem);
+        --border-radius-l: calc(var(--border-radius-scale) * 0.75rem);
+
+        --border-radius-pill: 9999px;
+        --border-radius-circle: 50%;
+        --border-radius-square: 0px;
+    }
+}
+@layer tokens {
+    html {
+        /* Animation duration based on https://design.brainly.com/8adfd5f36/p/091f75-ux-motion */
+        --duration-instant: 0ms; /* e.g. text change */
+        --duration-quick-1: 80ms; /* e.g. checkbox, radio, hover */
+        --duration-quick-2: 120ms; /* e.g. toggle, tab, chip, color, fade */
+        --duration-moderate-1: 180ms; /* e.g. dropdown, tooltip */
+        --duration-moderate-2: 260ms; /* e.g. modal, toast, dialog, notification */
+        --duration-gentle-1: 320ms; /* e.g. bottom sheet, card expand */
+        --duration-gentle-2: 420ms; /* e.g. advanced animations */
+
+        /* 
+         * Calculated animation duration based on https://design.brainly.com/8adfd5f36/p/091f75-ux-motion/t/page-091f75-75547432-5018fa-12
+         * Demo: https://codepen.io/T3sT3ro/pen/RNwRLWx
+         * unitless values
+         */
+        --animated-element-distance: 0;
+        --animated-element-width: 0;
+        --animated-element-height: 0;
+
+        /* Calculated animation duration in milliseconds */
+        --duration-calculated: calc(
+            (
+                (0.5 * var(--animated-element-distance, 0)) +
+                (0.35 * var(--animated-element-width, 0)) +
+                (0.3 * var(--animated-element-height, 0))
+            ) *
+            1ms
+        );
+    }
+}
+@layer tokens {
+    html {
+        --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
+        --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
+        --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
+        --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
+        --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
+
+        --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
+        --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
+        --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
+        --ease-in-4: cubic-bezier(0.9, 0, 1, 1);
+        --ease-in-5: cubic-bezier(1, 0, 1, 1);
+
+        --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
+        --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
+        --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
+        --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
+        --ease-out-5: cubic-bezier(0, 0, 0, 1);
+
+        --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
+        --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
+        --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
+        --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
+        --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
+
+        --ease-elastic-out-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
+        --ease-elastic-out-2: cubic-bezier(0.5, 1, 0.75, 1.25);
+        --ease-elastic-out-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
+        --ease-elastic-out-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
+        --ease-elastic-out-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
+
+        --ease-elastic-in-1: cubic-bezier(0.5, -0.25, 0.75, 1);
+        --ease-elastic-in-2: cubic-bezier(0.5, -0.5, 0.75, 1);
+        --ease-elastic-in-3: cubic-bezier(0.5, -0.75, 0.75, 1);
+        --ease-elastic-in-4: cubic-bezier(0.5, -1, 0.75, 1);
+        --ease-elastic-in-5: cubic-bezier(0.5, -1.25, 0.75, 1);
+
+        --ease-elastic-in-out-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
+        --ease-elastic-in-out-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
+        --ease-elastic-in-out-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
+        --ease-elastic-in-out-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
+        --ease-elastic-in-out-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);
+
+        --ease-step-1: steps(2);
+        --ease-step-2: steps(3);
+        --ease-step-3: steps(4);
+        --ease-step-4: steps(7);
+        --ease-step-5: steps(10);
+
+        --ease-elastic-1: var(--ease-elastic-out-1);
+        --ease-elastic-2: var(--ease-elastic-out-2);
+        --ease-elastic-3: var(--ease-elastic-out-3);
+        --ease-elastic-4: var(--ease-elastic-out-4);
+        --ease-elastic-5: var(--ease-elastic-out-5);
+
+        --ease-squish-1: var(--ease-elastic-in-out-1);
+        --ease-squish-2: var(--ease-elastic-in-out-2);
+        --ease-squish-3: var(--ease-elastic-in-out-3);
+        --ease-squish-4: var(--ease-elastic-in-out-4);
+        --ease-squish-5: var(--ease-elastic-in-out-5);
+
+        --ease-spring-1: linear(
+            0,
+            0.006,
+            0.025 2.8%,
+            0.101 6.1%,
+            0.539 18.9%,
+            0.721 25.3%,
+            0.849 31.5%,
+            0.937 38.1%,
+            0.968 41.8%,
+            0.991 45.7%,
+            1.006 50.1%,
+            1.015 55%,
+            1.017 63.9%,
+            1.001
+        );
+        --ease-spring-2: linear(
+            0,
+            0.007,
+            0.029 2.2%,
+            0.118 4.7%,
+            0.625 14.4%,
+            0.826 19%,
+            0.902,
+            0.962,
+            1.008 26.1%,
+            1.041 28.7%,
+            1.064 32.1%,
+            1.07 36%,
+            1.061 40.5%,
+            1.015 53.4%,
+            0.999 61.6%,
+            0.995 71.2%,
+            1
+        );
+        --ease-spring-3: linear(
+            0,
+            0.009,
+            0.035 2.1%,
+            0.141 4.4%,
+            0.723 12.9%,
+            0.938 16.7%,
+            1.017,
+            1.077,
+            1.121,
+            1.149 24.3%,
+            1.159,
+            1.163,
+            1.161,
+            1.154 29.9%,
+            1.129 32.8%,
+            1.051 39.6%,
+            1.017 43.1%,
+            0.991,
+            0.977 51%,
+            0.974 53.8%,
+            0.975 57.1%,
+            0.997 69.8%,
+            1.003 76.9%,
+            1
+        );
+        --ease-spring-4: linear(
+            0,
+            0.009,
+            0.037 1.7%,
+            0.153 3.6%,
+            0.776 10.3%,
+            1.001,
+            1.142 16%,
+            1.185,
+            1.209 19%,
+            1.215 19.9% 20.8%,
+            1.199,
+            1.165 25%,
+            1.056 30.3%,
+            1.008 33%,
+            0.973,
+            0.955 39.2%,
+            0.953 41.1%,
+            0.957 43.3%,
+            0.998 53.3%,
+            1.009 59.1% 63.7%,
+            0.998 78.9%,
+            1
+        );
+        --ease-spring-5: linear(
+            0,
+            0.01,
+            0.04 1.6%,
+            0.161 3.3%,
+            0.816 9.4%,
+            1.046,
+            1.189 14.4%,
+            1.231,
+            1.254 17%,
+            1.259,
+            1.257 18.6%,
+            1.236,
+            1.194 22.3%,
+            1.057 27%,
+            0.999 29.4%,
+            0.955 32.1%,
+            0.942,
+            0.935 34.9%,
+            0.933,
+            0.939 38.4%,
+            1 47.3%,
+            1.011,
+            1.017 52.6%,
+            1.016 56.4%,
+            1 65.2%,
+            0.996 70.2%,
+            1.001 87.2%,
+            1
+        );
+        --ease-bounce-1: linear(
+            0,
+            0.004,
+            0.016,
+            0.035,
+            0.063,
+            0.098,
+            0.141,
+            0.191,
+            0.25,
+            0.316,
+            0.391 36.8%,
+            0.563,
+            0.766,
+            1 58.8%,
+            0.946,
+            0.908 69.1%,
+            0.895,
+            0.885,
+            0.879,
+            0.878,
+            0.879,
+            0.885,
+            0.895,
+            0.908 89.7%,
+            0.946,
+            1
+        );
+        --ease-bounce-2: linear(
+            0,
+            0.004,
+            0.016,
+            0.035,
+            0.063,
+            0.098,
+            0.141 15.1%,
+            0.25,
+            0.391,
+            0.562,
+            0.765,
+            1,
+            0.892 45.2%,
+            0.849,
+            0.815,
+            0.788,
+            0.769,
+            0.757,
+            0.753,
+            0.757,
+            0.769,
+            0.788,
+            0.815,
+            0.85,
+            0.892 75.2%,
+            1 80.2%,
+            0.973,
+            0.954,
+            0.943,
+            0.939,
+            0.943,
+            0.954,
+            0.973,
+            1
+        );
+        --ease-bounce-3: linear(
+            0,
+            0.004,
+            0.016,
+            0.035,
+            0.062,
+            0.098,
+            0.141 11.4%,
+            0.25,
+            0.39,
+            0.562,
+            0.764,
+            1 30.3%,
+            0.847 34.8%,
+            0.787,
+            0.737,
+            0.699,
+            0.672,
+            0.655,
+            0.65,
+            0.656,
+            0.672,
+            0.699,
+            0.738,
+            0.787,
+            0.847 61.7%,
+            1 66.2%,
+            0.946,
+            0.908,
+            0.885 74.2%,
+            0.879,
+            0.878,
+            0.879,
+            0.885 79.5%,
+            0.908,
+            0.946,
+            1 87.4%,
+            0.981,
+            0.968,
+            0.96,
+            0.957,
+            0.96,
+            0.968,
+            0.981,
+            1
+        );
+        --ease-bounce-4: linear(
+            0,
+            0.004,
+            0.016 3%,
+            0.062,
+            0.141,
+            0.25,
+            0.391,
+            0.562 18.2%,
+            1 24.3%,
+            0.81,
+            0.676 32.3%,
+            0.629,
+            0.595,
+            0.575,
+            0.568,
+            0.575,
+            0.595,
+            0.629,
+            0.676 48.2%,
+            0.811,
+            1 56.2%,
+            0.918,
+            0.86,
+            0.825,
+            0.814,
+            0.825,
+            0.86,
+            0.918,
+            1 77.2%,
+            0.94 80.6%,
+            0.925,
+            0.92,
+            0.925,
+            0.94 87.5%,
+            1 90.9%,
+            0.974,
+            0.965,
+            0.974,
+            1
+        );
+        --ease-bounce-5: linear(
+            0,
+            0.004,
+            0.016 2.5%,
+            0.063,
+            0.141,
+            0.25 10.1%,
+            0.562,
+            1 20.2%,
+            0.783,
+            0.627,
+            0.534 30.9%,
+            0.511,
+            0.503,
+            0.511,
+            0.534 38%,
+            0.627,
+            0.782,
+            1 48.7%,
+            0.892,
+            0.815,
+            0.769 56.3%,
+            0.757,
+            0.753,
+            0.757,
+            0.769 61.3%,
+            0.815,
+            0.892,
+            1 68.8%,
+            0.908 72.4%,
+            0.885,
+            0.878,
+            0.885,
+            0.908 79.4%,
+            1 83%,
+            0.954 85.5%,
+            0.943,
+            0.939,
+            0.943,
+            0.954 90.5%,
+            1 93%,
+            0.977,
+            0.97,
+            0.977,
+            1
+        );
+        --ease-circ-in: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+        --ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+        --ease-circ-out: cubic-bezier(0.075, 0.82, 0.165, 1);
+        --ease-cubic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+        --ease-cubic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
+        --ease-cubic-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+        --ease-expo-in: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+        --ease-expo-in-out: cubic-bezier(1, 0, 0, 1);
+        --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);
+        --ease-quad-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+        --ease-quad-in-out: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+        --ease-quad-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+        --ease-quart-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+        --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1);
+        --ease-quint-in: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+        --ease-quint-in-out: cubic-bezier(0.86, 0, 0.07, 1);
+        --ease-quint-out: cubic-bezier(0.23, 1, 0.32, 1);
+        --ease-sine-in: cubic-bezier(0.47, 0, 0.745, 0.715);
+        --ease-sine-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);
+        --ease-sine-out: cubic-bezier(0.39, 0.575, 0.565, 1);
+    }
+}
+/* MEDIA OS */
+/* MEDIA ORIENTATION */
+/* MEDIA WIDTH */
+@layer tokens {
+    html {
+        /* FONT FAMILY */
+
+        --font-family-transitional: Charter, Bitstream Charter, Sitka Text, Cambria, serif;
+        --font-family-old-style: Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif;
+        --font-family-humanist: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
+        --font-family-geometric-humanist: Avenir, Montserrat, Corbel, URW Gothic, source-sans-pro, sans-serif;
+        --font-family-classical-humanist: Optima, Candara, Noto Sans, source-sans-pro, sans-serif;
+        --font-family-neo-grotesque: Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif;
+        --font-family-monospace-slab-serif: Nimbus Mono PS, Courier New, monospace;
+        --font-family-monospace-code:
+            Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;
+        --font-family-industrial:
+            Bahnschrift, DIN Alternate, Franklin Gothic Medium, Nimbus Sans Narrow, sans-serif-condensed, sans-serif;
+        --font-family-rounded-sans:
+            ui-rounded, Hiragino Maru Gothic ProN, Quicksand, Comfortaa, Manjari, Arial Rounded MT, Arial Rounded MT Bold, Calibri, source-sans-pro, sans-serif;
+        --font-family-slab-serif: Rockwell, Rockwell Nova, Roboto Slab, DejaVu Serif, Sitka Small, serif;
+        --font-family-antique:
+            Superclarendon, Bookman Old Style, URW Bookman, URW Bookman L, Georgia Pro, Georgia, serif;
+        --font-family-didone: Didot, Bodoni MT, Noto Serif Display, URW Palladio L, P052, Sylfaen, serif;
+        --font-family-handwritten: Segoe Print, Bradley Hand, Chilanka, TSCu_Comic, casual, cursive;
+
+        --font-family-sans: system-ui, sans-serif;
+        --font-family-serif: ui-serif, serif;
+        --font-family-mono: var(--font-family-monospace-code);
+
+        /* FONT WEIGHT */
+
+        --font-weight-light: 300;
+        --font-weight-normal: 400;
+        --font-weight-semibold: 500;
+        --font-weight-bold: 600;
+
+        /* LINE HEIGHT */
+
+        --line-height-condensed: 1.2;
+        --line-height-normal: 1.5;
+        --line-height-expanded: 2;
+
+        /* FONT SIZE */
+
+        --font-size-scale: 1;
+        --font-size-smaller: round(calc(1em / 1.125), 1px);
+        --font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
+
+        /* Font sizes use a ratio of 1.125 to scale sizes proportionally.
+         * For larger font sizes, each size is twice 1.125x larger to maximize impact.
+         */
+        --font-size-2xs: round(calc(var(--font-size-xs) / 1.125), 1px); /* 11px */
+        --font-size-xs: round(calc(var(--font-size-s) / 1.125), 1px); /* 12px */
+        --font-size-s: round(calc(var(--font-size-m) / 1.125), 1px); /* 14px */
+        --font-size-m: calc(1rem * var(--font-size-scale)); /* 16px */
+        --font-size-l: round(calc(var(--font-size-m) * 1.125 * 1.125), 1px); /* 20px */
+        --font-size-xl: round(calc(var(--font-size-l) * 1.125 * 1.125), 1px); /* 25px */
+        --font-size-2xl: round(calc(var(--font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
+        --font-size-3xl: round(calc(var(--font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
+        --font-size-4xl: round(calc(var(--font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
+
+        /**
+         * The dynamic font sizes for headings (2xl, 3xl, 4xl) match their static counterparts by default.
+         * On larger screens, they scale up further for more visual impact (see @media --lg-above below).
+         */
+
+        --font-size-dynamic-2xs: var(--font-size-2xs); /* 11px */
+        --font-size-dynamic-xs: var(--font-size-xs); /* 12px */
+        --font-size-dynamic-s: var(--font-size-s); /* 14px */
+        --font-size-dynamic-m: var(--font-size-m); /* 16px */
+        --font-size-dynamic-l: var(--font-size-l); /* 20px */
+        --font-size-dynamic-xl: var(--font-size-xl); /* 25px */
+        --font-size-dynamic-2xl: var(--font-size-2xl); /* 32px */
+        --font-size-dynamic-3xl: var(--font-size-3xl); /* 41px */
+        --font-size-dynamic-4xl: var(--font-size-4xl); /* 52px */
+    }
+
+        @media (width >= 1024px) {
+    html {
+            --font-size-dynamic-2xl: round(calc(var(--font-size-xl) * 1.125 * 1.125 * 1.125), 1px);
+            --font-size-dynamic-3xl: round(calc(var(--font-size-2xl) * 1.125 * 1.125 * 1.125), 1px);
+            --font-size-dynamic-4xl: round(calc(var(--font-size-3xl) * 1.125 * 1.125 * 1.125), 1px);
+    }
+        }
+}
+@layer tokens {
+    html {
+        /* MASK CORNER CUT CIRCLES */
+
+        --mask-corner-cut-circles-1: radial-gradient(1rem at 1rem 1rem, #0000 99%, #000) -1rem -1rem;
+        --mask-corner-cut-circles-2: radial-gradient(2rem at 2rem 2rem, #0000 99%, #000) -2rem -2rem;
+        --mask-corner-cut-circles-3: radial-gradient(4rem at 4rem 4rem, #0000 99%, #000) -4rem -4rem;
+
+        /* MASK CORNER CUT SQUARES */
+
+        --mask-corner-cut-squares-1: conic-gradient(at calc(2 * 1rem) calc(2 * 1rem), #000 75%, #0000 0) -1rem -1rem;
+        --mask-corner-cut-squares-2: conic-gradient(at calc(2 * 2rem) calc(2 * 2rem), #000 75%, #0000 0) -2rem -2rem;
+        --mask-corner-cut-squares-3: conic-gradient(at calc(2 * 4rem) calc(2 * 4rem), #000 75%, #0000 0) -4rem -4rem;
+
+        /* MASK CORNER CUT ANGLES */
+
+        --mask-corner-cut-angles-1:
+            conic-gradient(from -45deg at 1rem 1rem, #0000 25%, #000 0) -1rem 0 / 100% 51% repeat-x,
+            conic-gradient(from 135deg at 1rem calc(100% - 1rem), #0000 25%, #000 0) -1rem 100% / 100% 51% repeat-x;
+        --mask-corner-cut-angles-2:
+            conic-gradient(from -45deg at 2rem 2rem, #0000 25%, #000 0) -2rem 0 / 100% 51% repeat-x,
+            conic-gradient(from 135deg at 2rem calc(100% - 2rem), #0000 25%, #000 0) -2rem 100% / 100% 51% repeat-x;
+        --mask-corner-cut-angles-3:
+            conic-gradient(from -45deg at 4rem 4rem, #0000 25%, #000 0) -4rem 0 / 100% 51% repeat-x,
+            conic-gradient(from 135deg at 4rem calc(100% - 4rem), #0000 25%, #000 0) -4rem 100% / 100% 51% repeat-x;
+    }
+}
+@layer tokens {
+    html {
+        /* MASK EDGE SCOOP */
+
+        --mask-edge-scoop-bottom: radial-gradient(20px at 50% 100%, #0000 97%, #000) 50% / calc(1.9 * 20px) 100%;
+        --mask-edge-scoop-top: radial-gradient(20px at 50% 0, #0000 97%, #000) 50% / calc(1.9 * 20px) 100%;
+        --mask-edge-scoop-vertical:
+            radial-gradient(20px at 50% 20px, #0000 97%, #000) 50% -20px / calc(1.9 * 20px) 100%;
+        --mask-edge-scoop-left: radial-gradient(20px at 0 50%, #0000 97%, #000) 50% / 100% calc(1.9 * 20px);
+        --mask-edge-scoop-right: radial-gradient(20px at 100% 50%, #0000 97%, #000) 50% / 100% calc(1.9 * 20px);
+        --mask-edge-scoop-horizontal: radial-gradient(20px at 20px 50%, #0000 97%, #000) -20px / 100% calc(1.9 * 20px);
+
+        /* MASK EDGE SCOOP */
+
+        --mask-edge-scalloped:
+            radial-gradient(farthest-side, #000 97%, #0000) 0 0 / 20px 20px round, linear-gradient(#000 0 0) 50% /
+            calc(100% - 20px) calc(100% - 20px) no-repeat;
+        --mask-edge-scalloped-bottom:
+            linear-gradient(to top, #0000 20px, #000 0), radial-gradient(20px at top, #000 97%, #0000) bottom /
+            calc(1.9 * 20px) 20px;
+        --mask-edge-scalloped-top:
+            linear-gradient(to bottom, #0000 20px, #000 0), radial-gradient(20px at bottom, #000 97%, #0000) top /
+            calc(1.9 * 20px) 20px;
+        --mask-edge-scalloped-vertical:
+            linear-gradient(0deg, #0000 calc(2 * 20px), #000 0) 0 20px, radial-gradient(20px, #000 97%, #0000) 50% /
+            calc(1.9 * 20px) calc(2 * 20px) repeat space;
+        --mask-edge-scalloped-left:
+            linear-gradient(to right, #0000 20px, #000 0), radial-gradient(20px at right, #000 97%, #0000) left / 20px
+            calc(1.9 * 20px);
+        --mask-edge-scalloped-right:
+            linear-gradient(to left, #0000 20px, #000 0), radial-gradient(20px at left, #000 97%, #0000) right / 20px
+            calc(1.9 * 20px);
+        --mask-edge-scalloped-horizontal:
+            linear-gradient(-90deg, #0000 calc(2 * 20px), #000 0) 20px, radial-gradient(20px, #000 97%, #0000) 50% /
+            calc(2 * 20px) calc(1.9 * 20px) space repeat;
+
+        /* MASK EDGE DRIP */
+
+        --mask-edge-drip-bottom:
+            radial-gradient(20px at bottom, #0000 97%, #000) 50% calc(100% - 20px) / calc(2 * 20px) 100% repeat-x,
+            radial-gradient(20px at 25% 50%, #000 97%, #0000) calc(50% - 20px) 99% / calc(4 * 20px) calc(2 * 20px)
+            repeat-x;
+        --mask-edge-drip-top:
+            radial-gradient(20px at top, #0000 97%, #000) 50% 20px / calc(2 * 20px) 100% repeat-x,
+            radial-gradient(20px at 25% 50%, #000 97%, #0000) calc(50% - 20px) 1% / calc(4 * 20px) calc(2 * 20px)
+            repeat-x;
+        --mask-edge-drip-vertical:
+            radial-gradient(20px at top, #0000 97%, #000) 50% 20px / calc(2 * 20px) 51% repeat-x,
+            radial-gradient(20px at bottom, #0000 97%, #000) 50% calc(100% - 20px) / calc(2 * 20px) 51% repeat-x,
+            radial-gradient(20px at 25% 50%, #000 97%, #0000) calc(50% - 20px) 1% / calc(4 * 20px) calc(2 * 20px) repeat-x,
+            radial-gradient(20px at 25% 50%, #000 97%, #0000) calc(50% - 3 * 20px) 99% / calc(4 * 20px) calc(2 * 20px) repeat-x;
+        --mask-edge-drip-left:
+            radial-gradient(20px at left, #0000 97%, #000) 20px 50% / 100% calc(2 * 20px) repeat-y,
+            radial-gradient(20px at 50% 25%, #000 97%, #0000) 1% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px)
+            repeat-y;
+        --mask-edge-drip-right:
+            radial-gradient(20px at right, #0000 97%, #000) calc(100% - 20px) 50% / 100% calc(2 * 20px) repeat-y,
+            radial-gradient(20px at 50% 25%, #000 97%, #0000) 99% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px)
+            repeat-y;
+        --mask-edge-drip-horizontal:
+            radial-gradient(20px at left, #0000 97%, #000) 20px 50% / 51% calc(2 * 20px) repeat-y,
+            radial-gradient(20px at right, #0000 97%, #000) calc(100% - 20px) 50% / 51% calc(2 * 20px) repeat-y,
+            radial-gradient(20px at 50% 25%, #000 97%, #0000) 1% calc(50% - 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y,
+            radial-gradient(20px at 50% 25%, #000 97%, #0000) 99% calc(50% - 3 * 20px) / calc(2 * 20px) calc(4 * 20px) repeat-y;
+
+        /* MASK EDGE ZIG-ZAG */
+
+        --mask-edge-zig-zag-top:
+            conic-gradient(from 135deg at top, #0000, #000 1deg 90deg, #0000 91deg) 50% / 40px 100%;
+        --mask-edge-zig-zag-bottom:
+            conic-gradient(from -45deg at bottom, #0000, #000 1deg 90deg, #0000 91deg) 50% / 40px 100%;
+        --mask-edge-zig-zag-left:
+            conic-gradient(from 45deg at left, #0000, #000 1deg 90deg, #0000 91deg) 50% / 100% 40px;
+        --mask-edge-zig-zag-right:
+            conic-gradient(from -135deg at right, #0000, #000 1deg 90deg, #0000 91deg 180deg) 50% / 100% 40px;
+        --mask-edge-zig-zag-horizontal:
+            repeating-conic-gradient(from 45deg at 20px 50%, #0000, #000 1deg 90deg, #0000 91deg 180deg) -20px 50% /
+            100% 40px;
+        --mask-edge-zig-zag-vertical:
+            repeating-conic-gradient(from 135deg at 50% 20px, #0000, #000 1deg 90deg, #0000 91deg 180deg) 50% -20px /
+            40px 100%;
+    }
+}
+@layer tokens {
+    html {
+        /* SHADOW OFFSET X */
+
+        --shadow-offset-x-scale: 0;
+        --shadow-offset-x-s: calc(var(--shadow-offset-x-scale) * 0.125rem);
+        --shadow-offset-x-m: calc(var(--shadow-offset-x-scale) * 0.25rem);
+        --shadow-offset-x-l: calc(var(--shadow-offset-x-scale) * 0.5rem);
+
+        /* SHADOW OFFSET Y */
+
+        --shadow-offset-y-scale: 1;
+        --shadow-offset-y-s: calc(var(--shadow-offset-y-scale) * 0.125rem);
+        --shadow-offset-y-m: calc(var(--shadow-offset-y-scale) * 0.25rem);
+        --shadow-offset-y-l: calc(var(--shadow-offset-y-scale) * 0.5rem);
+
+        /* SHADOW BLUR */
+
+        --shadow-blur-scale: 1;
+        --shadow-blur-s: calc(var(--shadow-blur-scale) * 0.125rem);
+        --shadow-blur-m: calc(var(--shadow-blur-scale) * 0.25rem);
+        --shadow-blur-l: calc(var(--shadow-blur-scale) * 0.5rem);
+
+        /* SHADOW SPREAD */
+
+        --shadow-spread-scale: -0.5;
+        --shadow-spread-s: calc(var(--shadow-spread-scale) * 0.125rem);
+        --shadow-spread-m: calc(var(--shadow-spread-scale) * 0.25rem);
+        --shadow-spread-l: calc(var(--shadow-spread-scale) * 0.5rem);
+
+        /* SHADOW COLOR */
+
+        --color-shadow: color-mix(
+            in oklab,
+            var(--color-neutral-5) calc(var(--shadow-blur-scale) * 4% + 8%),
+            transparent
+        );
+
+        --shadow-s: var(--shadow-offset-x-s) var(--shadow-offset-y-s) var(--shadow-blur-s) var(--shadow-spread-s)
+            var(--color-shadow);
+        --shadow-m: var(--shadow-offset-x-m) var(--shadow-offset-y-m) var(--shadow-blur-m) var(--shadow-spread-m)
+            var(--color-shadow);
+        --shadow-l: var(--shadow-offset-x-l) var(--shadow-offset-y-l) var(--shadow-blur-l) var(--shadow-spread-l)
+            var(--color-shadow);
+    }
+}
+@layer tokens {
+    html {
+        /* SPACE SCALE */
+
+        --space-scale: 1;
+
+        --space-3xs: calc(var(--space-scale) * 0.125rem); /* 2px */
+        --space-2xs: calc(var(--space-scale) * 0.25rem); /* 4px */
+        --space-xs: calc(var(--space-scale) * 0.5rem); /* 8px */
+        --space-s: calc(var(--space-scale) * 0.75rem); /* 12px */
+        --space-m: calc(var(--space-scale) * 1rem); /* 16px */
+        --space-l: calc(var(--space-scale) * 1.5rem); /* 24px */
+        --space-xl: calc(var(--space-scale) * 2rem); /* 32px */
+        --space-2xl: calc(var(--space-scale) * 2.5rem); /* 40px */
+        --space-3xl: calc(var(--space-scale) * 3rem); /* 48px */
+        --space-4xl: calc(var(--space-scale) * 4rem); /* 64px */
+
+        /* DYNAMIC SPACE */
+
+        --space-dynamic-3xs: var(--space-3xs);
+        --space-dynamic-2xs: var(--space-2xs);
+        --space-dynamic-xs: var(--space-xs);
+        --space-dynamic-s: var(--space-s);
+        --space-dynamic-m: var(--space-m);
+        --space-dynamic-l: var(--space-l);
+        --space-dynamic-xl: var(--space-xl);
+        --space-dynamic-2xl: var(--space-2xl);
+        --space-dynamic-3xl: var(--space-3xl);
+        --space-dynamic-4xl: var(--space-4xl);
+    }
+
+        @media (width < 768px) {
+    html {
+            --space-dynamic-2xs: var(--space-3xs);
+            --space-dynamic-xs: var(--space-2xs);
+            --space-dynamic-s: var(--space-xs);
+            --space-dynamic-m: var(--space-s);
+            --space-dynamic-l: var(--space-m);
+            --space-dynamic-xl: var(--space-l);
+            --space-dynamic-2xl: var(--space-xl);
+            --space-dynamic-3xl: var(--space-2xl);
+            --space-dynamic-4xl: var(--space-3xl);
+    }
+        }
+
+        @media (width >= 1440px) {
+    html {
+            --space-dynamic-3xs: var(--space-2xs);
+            --space-dynamic-2xs: var(--space-xs);
+            --space-dynamic-xs: var(--space-s);
+            --space-dynamic-s: var(--space-m);
+            --space-dynamic-m: var(--space-l);
+            --space-dynamic-l: var(--space-xl);
+            --space-dynamic-xl: var(--space-2xl);
+            --space-dynamic-2xl: var(--space-3xl);
+            --space-dynamic-3xl: var(--space-4xl);
+    }
+        }
+}
+@layer tokens {
+    html {
+        /* Z-INDEX LAYER */
+
+        --layer-1: 1;
+        --layer-2: 2;
+        --layer-3: 3;
+        --layer-4: 4;
+        --layer-5: 5;
+
+        --layer-important: 2147483647;
+    }
+}
+@layer tokens {
+    html {
+        /* LUMINANCE SCALE */
+
+        --color-lum-0: 0.98;
+        --color-lum-1: 0.95;
+        --color-lum-2: 0.92;
+        --color-lum-3: 0.86;
+        --color-lum-4: 0.78;
+        --color-lum-5: 0.65;
+        --color-lum-6: 0.5;
+        --color-lum-7: 0.4;
+        --color-lum-8: 0.3;
+        --color-lum-9: 0.23;
+        --color-lum-10: 0.18;
+
+        --color-lum-light: var(--color-lum-3);
+        --color-lum-middle: var(--color-lum-5);
+        --color-lum-dark: var(--color-lum-7);
+
+        /* MIX PARAMETERS */
+
+        --color-mix-light-white-0: 15%;
+        --color-mix-light-white-1: 30%;
+        --color-mix-light-white-2: 60%;
+
+        --color-mix-dark-black-8: 85%;
+        --color-mix-dark-black-9: 65%;
+        --color-mix-dark-black-10: 45%;
+
+        /* NEUTRAL SCALE */
+
+        --color-neutral-3: oklch(from var(--color-neutral) var(--color-lum-3) c h);
+        --color-neutral-4: oklch(from var(--color-neutral) var(--color-lum-4) c h);
+        --color-neutral-5: oklch(from var(--color-neutral) var(--color-lum-5) c h);
+        --color-neutral-6: oklch(from var(--color-neutral) var(--color-lum-6) c h);
+        --color-neutral-7: oklch(from var(--color-neutral) var(--color-lum-7) c h);
+
+        --color-neutral-0: color-mix(in oklch, var(--color-neutral-3) var(--color-mix-light-white-0), white);
+        --color-neutral-1: color-mix(in oklch, var(--color-neutral-3) var(--color-mix-light-white-1), white);
+        --color-neutral-2: color-mix(in oklch, var(--color-neutral-3) var(--color-mix-light-white-2), white);
+
+        --color-neutral-8: color-mix(in oklch, var(--color-neutral-7) var(--color-mix-dark-black-8), black);
+        --color-neutral-9: color-mix(in oklch, var(--color-neutral-7) var(--color-mix-dark-black-9), black);
+        --color-neutral-10: color-mix(in oklch, var(--color-neutral-7) var(--color-mix-dark-black-10), black);
+
+        /* BRAND SCALE */
+
+        --color-brand-3: oklch(from var(--color-brand) var(--color-lum-3) c h);
+        --color-brand-4: oklch(from var(--color-brand) var(--color-lum-4) c h);
+        --color-brand-5: oklch(from var(--color-brand) var(--color-lum-5) c h);
+        --color-brand-6: oklch(from var(--color-brand) var(--color-lum-6) c h);
+        --color-brand-7: oklch(from var(--color-brand) var(--color-lum-7) c h);
+
+        --color-brand-0: color-mix(in oklch, var(--color-brand-3) var(--color-mix-light-white-0), white);
+        --color-brand-1: color-mix(in oklch, var(--color-brand-3) var(--color-mix-light-white-1), white);
+        --color-brand-2: color-mix(in oklch, var(--color-brand-3) var(--color-mix-light-white-2), white);
+
+        --color-brand-8: color-mix(in oklch, var(--color-brand-7) var(--color-mix-dark-black-8), black);
+        --color-brand-9: color-mix(in oklch, var(--color-brand-7) var(--color-mix-dark-black-9), black);
+        --color-brand-10: color-mix(in oklch, var(--color-brand-7) var(--color-mix-dark-black-10), black);
+
+        /* ACCENT SCALE */
+
+        --color-accent-3: oklch(from var(--color-accent) var(--color-lum-3) c h);
+        --color-accent-4: oklch(from var(--color-accent) var(--color-lum-4) c h);
+        --color-accent-5: oklch(from var(--color-accent) var(--color-lum-5) c h);
+        --color-accent-6: oklch(from var(--color-accent) var(--color-lum-6) c h);
+        --color-accent-7: oklch(from var(--color-accent) var(--color-lum-7) c h);
+
+        --color-accent-0: color-mix(in oklch, var(--color-accent-3) var(--color-mix-light-white-0), white);
+        --color-accent-1: color-mix(in oklch, var(--color-accent-3) var(--color-mix-light-white-1), white);
+        --color-accent-2: color-mix(in oklch, var(--color-accent-3) var(--color-mix-light-white-2), white);
+
+        --color-accent-8: color-mix(in oklch, var(--color-accent-7) var(--color-mix-dark-black-8), black);
+        --color-accent-9: color-mix(in oklch, var(--color-accent-7) var(--color-mix-dark-black-9), black);
+        --color-accent-10: color-mix(in oklch, var(--color-accent-7) var(--color-mix-dark-black-10), black);
+
+        /* DANGER SCALE */
+
+        --color-danger-3: oklch(from var(--color-danger) var(--color-lum-3) c h);
+        --color-danger-4: oklch(from var(--color-danger) var(--color-lum-4) c h);
+        --color-danger-5: oklch(from var(--color-danger) var(--color-lum-5) c h);
+        --color-danger-6: oklch(from var(--color-danger) var(--color-lum-6) c h);
+        --color-danger-7: oklch(from var(--color-danger) var(--color-lum-7) c h);
+
+        --color-danger-0: color-mix(in oklch, var(--color-danger-3) var(--color-mix-light-white-0), white);
+        --color-danger-1: color-mix(in oklch, var(--color-danger-3) var(--color-mix-light-white-1), white);
+        --color-danger-2: color-mix(in oklch, var(--color-danger-3) var(--color-mix-light-white-2), white);
+
+        --color-danger-8: color-mix(in oklch, var(--color-danger-7) var(--color-mix-dark-black-8), black);
+        --color-danger-9: color-mix(in oklch, var(--color-danger-7) var(--color-mix-dark-black-9), black);
+        --color-danger-10: color-mix(in oklch, var(--color-danger-7) var(--color-mix-dark-black-10), black);
+    }
+}
+@layer tokens {
+    .light {
+        /* BASE */
+
+        /* TODO: remove color-surface */
+        --color-surface: white;
+        --color-text: black;
+        --color-text-inverted: white;
+
+        --color-surface-clear: white;
+
+        /* NEUTRAL */
+
+        --color-neutral-surface-subtle: var(--color-neutral-0);
+        --color-neutral-surface-soft: var(--color-neutral-1);
+        --color-neutral-surface-muted: var(--color-neutral-2);
+        --color-neutral-surface-base: var(--color-neutral-3);
+        --color-neutral-surface-strong: var(--color-neutral-4);
+        --color-neutral-surface-deep: var(--color-neutral-5);
+
+        --color-neutral-text-subtle: var(--color-neutral-5);
+        --color-neutral-text-soft: var(--color-neutral-6);
+        --color-neutral-text-muted: var(--color-neutral-7);
+        --color-neutral-text-base: var(--color-neutral-8);
+        --color-neutral-text-strong: var(--color-neutral-9);
+        --color-neutral-text-deep: var(--color-neutral-10);
+
+        /* DANGER */
+
+        --color-danger-surface-subtle: var(--color-danger-0);
+        --color-danger-surface-soft: var(--color-danger-1);
+        --color-danger-surface-muted: var(--color-danger-2);
+        --color-danger-surface-base: var(--color-danger-3);
+        --color-danger-surface-strong: var(--color-danger-4);
+        --color-danger-surface-deep: var(--color-danger-5);
+
+        --color-danger-text-subtle: var(--color-danger-5);
+        --color-danger-text-soft: var(--color-danger-6);
+        --color-danger-text-muted: var(--color-danger-7);
+        --color-danger-text-base: var(--color-danger-8);
+        --color-danger-text-strong: var(--color-danger-9);
+        --color-danger-text-deep: var(--color-danger-10);
+
+        /* BRAND */
+
+        --color-brand-surface-subtle: var(--color-brand-0);
+        --color-brand-surface-soft: var(--color-brand-1);
+        --color-brand-surface-muted: var(--color-brand-2);
+        --color-brand-surface-base: var(--color-brand-3);
+        --color-brand-surface-strong: var(--color-brand-4);
+        --color-brand-surface-deep: var(--color-brand-5);
+
+        --color-brand-text-subtle: var(--color-brand-5);
+        --color-brand-text-soft: var(--color-brand-6);
+        --color-brand-text-muted: var(--color-brand-7);
+        --color-brand-text-base: var(--color-brand-8);
+        --color-brand-text-strong: var(--color-brand-9);
+        --color-brand-text-deep: var(--color-brand-10);
+
+        /* ACCENT*/
+
+        --color-accent-surface-subtle: var(--color-accent-0);
+        --color-accent-surface-soft: var(--color-accent-1);
+        --color-accent-surface-muted: var(--color-accent-2);
+        --color-accent-surface-base: var(--color-accent-3);
+        --color-accent-surface-strong: var(--color-accent-4);
+        --color-accent-surface-deep: var(--color-accent-5);
+
+        --color-accent-text-subtle: var(--color-accent-5);
+        --color-accent-text-soft: var(--color-accent-6);
+        --color-accent-text-muted: var(--color-accent-7);
+        --color-accent-text-base: var(--color-accent-8);
+        --color-accent-text-strong: var(--color-accent-9);
+        --color-accent-text-deep: var(--color-accent-10);
+    }
+
+    .dark {
+        /* BASE */
+
+        /* TODO: remove color-surface */
+        --color-surface: black;
+        --color-text: white;
+        --color-text-inverted: black;
+
+        --color-surface-clear: black;
+
+        /* NEUTRAL */
+
+        --color-neutral-surface-subtle: var(--color-neutral-10);
+        --color-neutral-surface-soft: var(--color-neutral-9);
+        --color-neutral-surface-muted: var(--color-neutral-8);
+        --color-neutral-surface-base: var(--color-neutral-7);
+        --color-neutral-surface-strong: var(--color-neutral-6);
+        --color-neutral-surface-deep: var(--color-neutral-5);
+
+        --color-neutral-text-subtle: var(--color-neutral-5);
+        --color-neutral-text-soft: var(--color-neutral-4);
+        --color-neutral-text-muted: var(--color-neutral-3);
+        --color-neutral-text-base: var(--color-neutral-2);
+        --color-neutral-text-strong: var(--color-neutral-1);
+        --color-neutral-text-deep: var(--color-neutral-0);
+
+        /* DANGER */
+
+        --color-danger-surface-subtle: var(--color-danger-10);
+        --color-danger-surface-soft: var(--color-danger-9);
+        --color-danger-surface-muted: var(--color-danger-8);
+        --color-danger-surface-base: var(--color-danger-7);
+        --color-danger-surface-strong: var(--color-danger-6);
+        --color-danger-surface-deep: var(--color-danger-5);
+
+        --color-danger-text-subtle: var(--color-danger-5);
+        --color-danger-text-soft: var(--color-danger-4);
+        --color-danger-text-muted: var(--color-danger-3);
+        --color-danger-text-base: var(--color-danger-2);
+        --color-danger-text-strong: var(--color-danger-1);
+        --color-danger-text-deep: var(--color-danger-0);
+
+        /* BRAND */
+
+        --color-brand-surface-subtle: var(--color-brand-10);
+        --color-brand-surface-soft: var(--color-brand-9);
+        --color-brand-surface-muted: var(--color-brand-8);
+        --color-brand-surface-base: var(--color-brand-7);
+        --color-brand-surface-strong: var(--color-brand-6);
+        --color-brand-surface-deep: var(--color-brand-5);
+
+        --color-brand-text-subtle: var(--color-brand-5);
+        --color-brand-text-soft: var(--color-brand-4);
+        --color-brand-text-muted: var(--color-brand-3);
+        --color-brand-text-base: var(--color-brand-2);
+        --color-brand-text-strong: var(--color-brand-1);
+        --color-brand-text-deep: var(--color-brand-0);
+
+        /* ACCENT */
+
+        --color-accent-surface-subtle: var(--color-accent-10);
+        --color-accent-surface-soft: var(--color-accent-9);
+        --color-accent-surface-muted: var(--color-accent-8);
+        --color-accent-surface-base: var(--color-accent-7);
+        --color-accent-surface-strong: var(--color-accent-6);
+        --color-accent-surface-deep: var(--color-accent-5);
+
+        --color-accent-text-subtle: var(--color-accent-5);
+        --color-accent-text-soft: var(--color-accent-4);
+        --color-accent-text-muted: var(--color-accent-3);
+        --color-accent-text-base: var(--color-accent-2);
+        --color-accent-text-strong: var(--color-accent-1);
+        --color-accent-text-deep: var(--color-accent-0);
+    }
+}
+@layer tokens {
+    html {
+        /* WIDTH SCALE */
+
+        --width-xs: 200px;
+        --width-s: 300px;
+        --width-m: 400px;
+        --width-l: 500px;
+        --width-xl: 600px;
+        --width-2xl: 800px;
+
+        /* HEIGHT SCALE */
+
+        --height-s: 30vh;
+        --height-m: 50vh;
+        --height-l: 70vh;
+        --height-full: 100vh;
+    }
+}