@kreftforeningen/web-css 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Kreftforeningen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,60 @@
+# @kreftforeningen/web-css
+
+Style variables for Kreftforeningen.
+
+## Installation
+
+- `pnpm add @kreftforeningen/web-css`
+- `@import "@kreftforeningen/web-css";` at the top of your main css file
+
+## Content
+
+### Semantic elements
+
+Basic styling for semantic elements such as:
+
+- Headings
+- Blockquote
+
+### Colors
+
+Colors in oklch. Main colors also in hex.
+
+- KF Blue
+- KF Green
+- KF Orange
+- KF Red
+- KF Pink
+- KF Purple
+- Gray
+- Black
+- White
+- Vipps
+
+### Fonts
+
+- IBM Plex Sans
+- IBM Plex Condesed
+- IBM Plex Serif
+
+### Animations
+
+- Pulsating text
+- Fade in / fade out
+
+## Color Extraction
+
+To extract all color variables from the CSS into JSON files, run:
+
+```sh
+pnpm run build
+```
+
+This will generate:
+
+- `json/colors.json` with all `--kf-hex-color-***` variables
+- `json/extended-colors.json` with all `--color-***` variables from the `@theme { ... }` block
+
+## NPM.js
+
+This git is published as a package on https://www.npmjs.com/package/@kreftforeningen/web-css

package/fonts/ibm-plex-sans-condensed.css

@@ -0,0 +1,36 @@
+/* ibm-plex-sans-condensed-regular - latin */
+@font-face {
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'IBM Plex Sans Condensed';
+	font-style: normal;
+	font-weight: 400;
+	src: url('../assets/fonts/ibm-plex-sans-condensed-v14-latin-regular.woff2')
+		format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* ibm-plex-sans-condensed-italic - latin */
+@font-face {
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'IBM Plex Sans Condensed';
+	font-style: italic;
+	font-weight: 400;
+	src: url('../assets/fonts/ibm-plex-sans-condensed-v14-latin-italic.woff2')
+		format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* ibm-plex-sans-condensed-600 - latin */
+@font-face {
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'IBM Plex Sans Condensed';
+	font-style: normal;
+	font-weight: 600;
+	src: url('../assets/fonts/ibm-plex-sans-condensed-v14-latin-600.woff2')
+		format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* ibm-plex-sans-condensed-600italic - latin */
+@font-face {
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'IBM Plex Sans Condensed';
+	font-style: italic;
+	font-weight: 600;
+	src: url('../assets/fonts/ibm-plex-sans-condensed-v14-latin-600italic.woff2')
+		format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}

package/fonts/ibm-plex-sans.css

@@ -0,0 +1,69 @@
+/* ibm-plex-sans-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 400;
+  src: url("../assets/fonts/ibm-plex-sans-v22-latin-regular.woff2")
+    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* ibm-plex-sans-italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Sans";
+  font-style: italic;
+  font-weight: 400;
+  src: url("../assets/fonts/ibm-plex-sans-v22-latin-italic.woff2")
+    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* ibm-plex-sans-500 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 500;
+  src: url("../assets/fonts/ibm-plex-sans-v22-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* ibm-plex-sans-500italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Sans";
+  font-style: italic;
+  font-weight: 500;
+  src: url("../assets/fonts/ibm-plex-sans-v22-latin-500italic.woff2")
+    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* ibm-plex-sans-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 600;
+  src: url("../assets/fonts/ibm-plex-sans-v22-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* ibm-plex-sans-600italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Sans";
+  font-style: italic;
+  font-weight: 600;
+  src: url("../assets/fonts/ibm-plex-sans-v22-latin-600italic.woff2")
+    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* ibm-plex-sans-700 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Sans";
+  font-style: normal;
+  font-weight: 700;
+  src: url("../assets/fonts/ibm-plex-sans-v22-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* ibm-plex-sans-700italic - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "IBM Plex Sans";
+  font-style: italic;
+  font-weight: 700;
+  src: url("../assets/fonts/ibm-plex-sans-v22-latin-700italic.woff2")
+    format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}

package/fonts/ibm-plex-serif.css

@@ -0,0 +1,36 @@
+/* ibm-plex-serif-regular - latin */
+@font-face {
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'IBM Plex Serif';
+	font-style: normal;
+	font-weight: 400;
+	src: url('../assets/fonts/ibm-plex-serif-v19-latin-regular.woff2')
+		format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* ibm-plex-serif-italic - latin */
+@font-face {
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'IBM Plex Serif';
+	font-style: italic;
+	font-weight: 400;
+	src: url('../assets/fonts/ibm-plex-serif-v19-latin-italic.woff2')
+		format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* ibm-plex-serif-600 - latin */
+@font-face {
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'IBM Plex Serif';
+	font-style: normal;
+	font-weight: 600;
+	src: url('../assets/fonts/ibm-plex-serif-v19-latin-600.woff2')
+		format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* ibm-plex-serif-600italic - latin */
+@font-face {
+	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+	font-family: 'IBM Plex Serif';
+	font-style: italic;
+	font-weight: 600;
+	src: url('../assets/fonts/ibm-plex-serif-v19-latin-600italic.woff2')
+		format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}

package/fonts/index.css

@@ -0,0 +1,3 @@
+@import './ibm-plex-sans-condensed.css';
+@import './ibm-plex-sans.css';
+@import './ibm-plex-serif.css';

package/index.css

@@ -0,0 +1,420 @@
+@import "./fonts/index.css";
+
+/* Dark mode support */
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-plex-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica Neue, Arial, "Noto Sans",
+    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
+    Noto Color Emoji;
+  --font-plex-condensed: "IBM Plex Sans Condensed", ui-sans-serif, system-ui;
+  --font-plex-serif: "IBM Plex Serif", ui-serif, Georgia, Cambria,
+    Times New Roman;
+
+  --kf-hex-color-black: #000;
+  --kf-hex-color-white: #fff;
+  --kf-hex-color-blue: #469eba;
+  --kf-hex-color-green: #50750f;
+  --kf-hex-color-gray: #666;
+  --kf-hex-color-orange: #e49034;
+  --kf-hex-color-pink: #a94773;
+  --kf-hex-color-purple: #773e89;
+  --kf-hex-color-red: #bc2967;
+  --kf-hex-color-vipps: #ff5b24;
+
+  --color-gray-50: oklch(98.5% 0 0);
+  --color-gray-100: oklch(96.086% 0 0);
+  --color-gray-200: oklch(90.372% 0 0);
+  --color-gray-300: oklch(84.258% 0 0);
+  --color-gray-400: oklch(67.144% 0 0);
+  --color-gray-500: oklch(51.03% 0 0);
+  --color-gray-600: oklch(40.244% 0 0);
+  --color-gray-700: oklch(34.358% 0 0);
+  --color-gray-800: oklch(25.072% 0 0);
+  --color-gray-900: oklch(19.586% 0 0);
+  --color-gray-950: oklch(14.5% 0 0);
+
+  --color-blue-50: oklch(0.976 0.0099 212.52);
+  --color-blue-100: oklch(0.9358 0.0222 214.4);
+  --color-blue-200: oklch(0.8772 0.0412 215.93);
+  --color-blue-300: oklch(0.7887 0.0665 218.51);
+  --color-blue-400: oklch(0.657 0.0931 221.93);
+  --color-blue-500: oklch(0.5886 0.0889 224.07);
+  --color-blue-600: oklch(0.5124 0.0769 229.13);
+  --color-blue-700: oklch(0.5124 0.0769 229.13);
+  --color-blue-800: oklch(0.3997 0.0503 235.21);
+  --color-blue-900: oklch(0.3648 0.0411 234.81);
+  --color-blue-950: oklch(0.28 0.025 235);
+
+  --color-green-50: oklch(0.9872 0.0305 116.92);
+  --color-green-100: oklch(0.9691 0.0651 119.69);
+  --color-green-200: oklch(0.9405 0.117 121.33);
+  --color-green-300: oklch(0.9016 0.1722 123.57);
+  --color-green-400: oklch(0.8544 0.2 125.89);
+  --color-green-500: oklch(0.7727 0.197 128.01);
+  --color-green-600: oklch(0.6515 0.1688 128.88);
+  --color-green-700: oklch(0.5154 0.13 128.84);
+  --color-green-800: oklch(0.4535 0.1081 128.33);
+  --color-green-900: oklch(0.4078 0.0932 128.75);
+  --color-green-950: oklch(0.32 0.06 128.75);
+
+  --color-orange-50: oklch(0.9825 0.0139 88.68);
+  --color-orange-100: oklch(0.9577 0.0325 85.48);
+  --color-orange-200: oklch(0.9095 0.0631 82.59);
+  --color-orange-300: oklch(0.8501 0.0996 80.17);
+  --color-orange-400: oklch(0.7703 0.1289 70.5);
+  --color-orange-500: oklch(0.725 0.144 63.7);
+  --color-orange-600: oklch(0.6535 0.1495 54.57);
+  --color-orange-700: oklch(0.5599 0.1325 50.09);
+  --color-orange-800: oklch(0.4782 0.1085 47.64);
+  --color-orange-900: oklch(0.4178 0.088 49.08);
+  --color-orange-950: oklch(0.3 0.045 49);
+
+  --color-pink-50: oklch(0.9737 0.0091 341.8);
+  --color-pink-100: oklch(0.9523 0.0167 343.62);
+  --color-pink-200: oklch(0.9079 0.0348 342.2);
+  --color-pink-300: oklch(0.8351 0.0636 344.23);
+  --color-pink-400: oklch(0.7329 0.1021 347.04);
+  --color-pink-500: oklch(0.6489 0.1302 350.65);
+  --color-pink-600: oklch(0.5394 0.1371 354.63);
+  --color-pink-700: oklch(0.4964 0.1319 357.16);
+  --color-pink-800: oklch(0.4393 0.1104 357.11);
+  --color-pink-900: oklch(0.3962 0.0913 357.33);
+  --color-pink-950: oklch(0.3 0.05 357);
+
+  --color-purple-50: oklch(0.9798 0.0073 312.3);
+  --color-purple-100: oklch(0.9577 0.0163 313.61);
+  --color-purple-200: oklch(0.9106 0.036 313.04);
+  --color-purple-300: oklch(0.8398 0.0666 314.75);
+  --color-purple-400: oklch(0.7463 0.1056 315.99);
+  --color-purple-500: oklch(0.6416 0.142 316.18);
+  --color-purple-600: oklch(0.5447 0.1517 316.45);
+  --color-purple-700: oklch(0.4668 0.1309 317.52);
+  --color-purple-800: oklch(0.4166 0.1125 318.19);
+  --color-purple-900: oklch(0.3771 0.0897 319.73);
+  --color-purple-950: oklch(0.28 0.045 320);
+
+  --color-red-50: oklch(0.9725 0.0116 342.64);
+  --color-red-100: oklch(0.9504 0.0226 341.32);
+  --color-red-200: oklch(0.9029 0.0477 343.59);
+  --color-red-300: oklch(0.8271 0.0903 345.8);
+  --color-red-400: oklch(0.7264 0.1478 348.51);
+  --color-red-500: oklch(0.6499 0.1827 352.33);
+  --color-red-600: oklch(0.5774 0.1919 357.53);
+  --color-red-700: oklch(0.5345 0.1873 0.79);
+  --color-red-800: oklch(0.4672 0.1827 357.53);
+  --color-red-900: oklch(0.4008 0.1269 359.23);
+  --color-red-950: oklch(0.28 0.06 0);
+
+  --color-vipps-50: oklch(0.9738 0.0151 54.93);
+  --color-vipps-100: oklch(0.9405 0.0365 58.04);
+  --color-vipps-200: oklch(0.8756 0.0758 52.88);
+  --color-vipps-300: oklch(0.7972 0.128 49.18);
+  --color-vipps-400: oklch(0.7127 0.1871 40.96);
+  --color-vipps-500: oklch(0.6838 0.2092 37.3);
+  --color-vipps-600: oklch(0.6186 0.2288 32.46);
+  --color-vipps-700: oklch(0.5336 0.202 31.27);
+  --color-vipps-800: oklch(0.4522 0.1675 30.24);
+  --color-vipps-900: oklch(41.745% 0.1198 34.356);
+  --color-vipps-950: oklch(0.2557 0.0904 29.55);
+
+  --color-pink-ribbon-50: oklch(0.93611 0.03855 348.82);
+  --color-pink-ribbon-100: oklch(0.86806 0.07588 349.94);
+  --color-pink-ribbon-200: oklch(0.80001 0.11321 351.06);
+  --color-pink-ribbon-300: oklch(0.73196 0.15054 352.18);
+  --color-pink-ribbon-400: oklch(0.66391 0.18787 353.31);
+  --color-pink-ribbon-500: oklch(0.59586 0.2252 354.43);
+  --color-pink-ribbon-600: oklch(0.584 0.22433 354.37);
+  --color-pink-ribbon-700: oklch(0.57213 0.22346 354.3);
+  --color-pink-ribbon-800: oklch(0.56027 0.22259 354.24);
+  --color-pink-ribbon-900: oklch(0.54841 0.22173 354.18);
+  --color-pink-ribbon-950: oklch(0.53654 0.22086 354.12);
+
+  --animate-pulse-text: pulseText 1s ease-in-out infinite;
+  --animate-fade-in-out: fade-in-out 5s ease-in-out;
+
+  @keyframes fade-in-out {
+    0% {
+      opacity: 0;
+    }
+    25% {
+      opacity: 1;
+    }
+    75% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes pulseText {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+}
+
+@theme inline {
+  --font-sans: var(--font-plex-sans);
+  --font-condensed: var(--font-plex-condensed);
+  --font-serif: var(--font-plex-serif);
+
+  --color-black: oklch(0% 0 0);
+  --color-white: oklch(100% 0 0);
+  --color-blue: var(--color-blue-600);
+  --color-green: var(--color-green-700);
+  --color-gray: var(--color-gray-500);
+  --color-orange: var(--color-orange-400);
+  --color-pink: var(--color-pink-700);
+  --color-purple: var(--color-purple-900);
+  --color-red: var(--color-red-700);
+  --color-vipps: var(--color-vipps-600);
+
+  --color-primary: var(--color-blue-600);
+  --color-secondary: var(--color-pink-700);
+
+  --color-background: var(--color-gray-50);
+  --color-foreground: var(--color-gray-950);
+}
+
+:root {
+  --kf-border-width: 2px;
+  --kf-radius-full: 9999px;
+  --kf-radius-md: 0.375rem;
+  --kf-btn-font-size: 1rem;
+  --kf-btn-font-weight: 500;
+  --kf-btn-gap: 0.5rem;
+  --kf-btn-text: #0b1220;
+  --kf-btn-icon-size: 1rem;
+
+  /* Extended radius scale */
+  --kf-radius-none: 0rem;
+  --kf-radius-sm: 0.125rem;
+  --kf-radius: 0.25rem;
+  --kf-radius-lg: 0.5rem;
+  --kf-radius-xl: 0.75rem;
+  --kf-radius-2xl: 1rem;
+  --kf-radius-3xl: 1.5rem;
+  --kf-radius-4xl: 2rem;
+
+  /* Extended border widths */
+  --kf-border-0: 0px;
+  --kf-border-1: 1px;
+  --kf-border-2: 2px;
+  --kf-border-4: 4px;
+  --kf-border-8: 8px;
+
+  /* Font-size scale */
+  --kf-font-size-xs: 0.75rem;
+  --kf-font-size-sm: 0.875rem;
+  --kf-font-size-md: 1rem;
+  --kf-font-size-lg: 1.125rem;
+  --kf-font-size-xl: 1.25rem;
+
+  /* Button sizing tokens */
+  --kf-btn-height-sm: 36px;
+  --kf-btn-height-md: 44px;
+  --kf-btn-height-lg: 48px;
+  --kf-btn-height-icon: 36px;
+  --kf-btn-px-sm: 0.75rem;
+  --kf-btn-px-md: 1rem;
+  --kf-btn-px-lg: 1.5rem;
+  --kf-btn-icon-size-sm: 0.875rem;
+  --kf-btn-icon-size-md: 1rem;
+  --kf-btn-icon-size-lg: 1.125rem;
+
+  /* Core tokens (KF-prefixed) */
+  --kf-spacing: 0.25rem;
+
+  /* Breakpoints */
+  --kf-breakpoint-sm: 40rem;
+  --kf-breakpoint-md: 48rem;
+  --kf-breakpoint-lg: 64rem;
+  --kf-breakpoint-xl: 80rem;
+  --kf-breakpoint-2xl: 96rem;
+
+  /* Containers */
+  --kf-container-3xs: 16rem;
+  --kf-container-2xs: 18rem;
+  --kf-container-xs: 20rem;
+  --kf-container-sm: 24rem;
+  --kf-container-md: 28rem;
+  --kf-container-lg: 32rem;
+  --kf-container-xl: 36rem;
+  --kf-container-2xl: 42rem;
+  --kf-container-3xl: 48rem;
+  --kf-container-4xl: 56rem;
+  --kf-container-5xl: 64rem;
+  --kf-container-6xl: 72rem;
+  --kf-container-7xl: 80rem;
+
+  /* Typography scale with line-height ratios */
+  --kf-text-xs: 0.75rem;
+  --kf-text-xs--line-height: calc(1 / 0.75);
+  --kf-text-sm: 0.875rem;
+  --kf-text-sm--line-height: calc(1.25 / 0.875);
+  --kf-text-base: 1rem;
+  --kf-text-base--line-height: calc(1.5 / 1);
+  --kf-text-lg: 1.125rem;
+  --kf-text-lg--line-height: calc(1.75 / 1.125);
+  --kf-text-xl: 1.25rem;
+  --kf-text-xl--line-height: calc(1.75 / 1.25);
+  --kf-text-2xl: 1.5rem;
+  --kf-text-2xl--line-height: calc(2 / 1.5);
+  --kf-text-3xl: 1.875rem;
+  --kf-text-3xl--line-height: calc(2.25 / 1.875);
+  --kf-text-4xl: 2.25rem;
+  --kf-text-4xl--line-height: calc(2.5 / 2.25);
+  --kf-text-5xl: 3rem;
+  --kf-text-5xl--line-height: 1;
+  --kf-text-6xl: 3.75rem;
+  --kf-text-6xl--line-height: 1;
+  --kf-text-7xl: 4.5rem;
+  --kf-text-7xl--line-height: 1;
+  --kf-text-8xl: 6rem;
+  --kf-text-8xl--line-height: 1;
+  --kf-text-9xl: 8rem;
+  --kf-text-9xl--line-height: 1;
+
+  /* Font weights */
+  --kf-font-weight-thin: 100;
+  --kf-font-weight-extralight: 200;
+  --kf-font-weight-light: 300;
+  --kf-font-weight-normal: 400;
+  --kf-font-weight-medium: 500;
+  --kf-font-weight-semibold: 600;
+  --kf-font-weight-bold: 700;
+  --kf-font-weight-extrabold: 800;
+  --kf-font-weight-black: 900;
+
+  /* Letter spacing */
+  --kf-tracking-tighter: -0.05em;
+  --kf-tracking-tight: -0.025em;
+  --kf-tracking-normal: 0em;
+  --kf-tracking-wide: 0.025em;
+  --kf-tracking-wider: 0.05em;
+  --kf-tracking-widest: 0.1em;
+
+  /* Leading (line-height multiples) */
+  --kf-leading-tight: 1.25;
+  --kf-leading-snug: 1.375;
+  --kf-leading-normal: 1.5;
+  --kf-leading-relaxed: 1.625;
+  --kf-leading-loose: 2;
+
+  /* Shadows */
+  --kf-shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
+  --kf-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --kf-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --kf-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --kf-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --kf-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
+    0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --kf-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* Inset shadows */
+  --kf-inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
+  --kf-inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
+  --kf-inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
+
+  /* Drop shadows */
+  --kf-drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);
+  --kf-drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);
+  --kf-drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);
+  --kf-drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);
+  --kf-drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
+  --kf-drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
+
+  /* Text shadows */
+  --kf-text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);
+  --kf-text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);
+  --kf-text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075),
+    0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);
+  --kf-text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1),
+    0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);
+  --kf-text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1),
+    0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);
+
+  /* Blur */
+  --kf-blur-xs: 4px;
+  --kf-blur-sm: 8px;
+  --kf-blur-md: 12px;
+  --kf-blur-lg: 16px;
+  --kf-blur-xl: 24px;
+  --kf-blur-2xl: 40px;
+  --kf-blur-3xl: 64px;
+
+  /* Perspective */
+  --kf-perspective-dramatic: 100px;
+  --kf-perspective-near: 300px;
+  --kf-perspective-normal: 500px;
+  --kf-perspective-midrange: 800px;
+  --kf-perspective-distant: 1200px;
+
+  /* Aspect ratio */
+  --kf-aspect-video: 16 / 9;
+
+  /* Easings */
+  --kf-ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --kf-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --kf-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Animations */
+  --kf-animate-spin: spin 1s linear infinite;
+  --kf-animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  --kf-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --kf-animate-bounce: bounce 1s infinite;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground font-sans;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply my-6 font-condensed font-medium;
+  }
+
+  h1 {
+    @apply text-4xl;
+  }
+  h2 {
+    @apply text-3xl;
+  }
+  h3 {
+    @apply text-2xl;
+  }
+  h4 {
+    @apply text-xl;
+  }
+  h5 {
+    @apply text-lg;
+  }
+  h6 {
+    @apply text-base;
+  }
+
+  blockquote {
+    @apply font-serif;
+  }
+
+  blockquote cite {
+    @apply font-sans text-sm;
+  }
+}