@nd-storybook/storybook 0.3.0

package/dist/css/tokens.css

@@ -0,0 +1,511 @@
+/**
+ * Design System Tokens
+ * Generated from design tokens - DO NOT EDIT DIRECTLY
+ * Last generated: 2025-08-25T13:26:41.758Z
+ */
+
+:root {
+  --font-family-gulliver: Gulliver Web, Georgia, serif;
+  --font-family-fira-sans: Fira Sans, Arial, sans-serif;
+  --font-family-montserrat: Montserrat;
+  --font-family-abril-fatface: Abril Fatface;
+  --font-family-gulliver-semibold: Gulliver Web, Georgia, serif;
+  --font-weight-bold: 700;
+  --font-weight-semibold: 600;
+  --font-weight-regular: 400;
+  --font-weight-light: 300;
+  --font-size-12: 12px;
+  --font-size-14: 14px;
+  --font-size-15: 15px;
+  --font-size-16: 16px;
+  --font-size-17: 17px;
+  --font-size-18: 18px;
+  --font-size-20: 20px;
+  --font-size-22: 22px;
+  --font-size-24: 24px;
+  --font-size-26: 26px;
+  --font-size-28: 28px;
+  --font-size-30: 30px;
+  --font-size-32: 32px;
+  --font-size-36: 36px;
+  --font-size-40: 40px;
+  --font-size-48: 48px;
+  --font-size-88: 88px;
+  --font-size-96: 96px;
+  --letter-spacing-0: 0px;
+  --letter-spacing-s: 1.6px;
+  --letter-spacing-m: 2.4px;
+  --letter-spacing-l: 4px;
+  --color-border-default: #000000;
+  --color-border-brand: #0096cb;
+  --color-border-accent-gray: #bdbdbd;
+  --color-border-accent-gray-subtle: #eceae9;
+  --color-border-disabled: #bdbdbd;
+  --color-border-warning: #e9425b;
+  --color-blue-400: #02b4f2;
+  --color-blue-500: #0096cb;
+  --color-blue-900: #09254a;
+  --color-blue-500-10: #02a1d91a;
+  --color-pink-200: #fdecef;
+  --color-pink-400: #f2e1df;
+  --color-pink-600: #ec596f;
+  --color-pink-700: #e9425b;
+  --color-brown-500: #a27675;
+  --color-brown-800: #6a4847;
+  --color-brown-900: #3a1a1c;
+  --color-neutral-100: #f8f8f8;
+  --color-neutral-200: #f2f2f2;
+  --color-neutral-300: #eceae9;
+  --color-neutral-400: #bdbdbd;
+  --color-neutral-500: #999999;
+  --color-neutral-600: #727272;
+  --color-neutral-700: #484544;
+  --color-neutral-800: #222222;
+  --color-neutral-900: #121212;
+  --color-neutral-black: #000000;
+  --color-neutral-black-10: #0000001a;
+  --color-neutral-white: #ffffff;
+  --color-neutral-white-30: #ffffff4d;
+  --color-text-default: #000000;
+  --color-text-subtle: #bdbdbd;
+  --color-text-brand: #0096cb;
+  --color-text-brand-subtle: #02b4f2;
+  --color-text-accent-brown: #6a4847;
+  --color-text-accent-brown-subtle: #a27675;
+  --color-text-accent-pink: #e9425b;
+  --color-text-disabled: #727272;
+  --color-text-inverse: #ffffff;
+  --color-text-warning: #e9425b;
+  --color-text-warning-inverse: #000000;
+  --color-background-default: #ffffff;
+  --color-background-dark: #000000;
+  --color-background-dark-subtle: #222222;
+  --color-background-brand: #0096cb;
+  --color-background-brand-subtle: #02b4f2;
+  --color-background-brand-subtlest: #02a1d91a;
+  --color-background-accent-gray: #f2f2f2;
+  --color-background-accent-gray-subtle: #f8f8f8;
+  --color-background-accent-brown: #6a4847;
+  --color-background-accent-pink: #e9425b;
+  --color-background-accent-pink-subtle: #ec596f;
+  --color-background-accent-pink-subtlest: #f2e1df;
+  --color-background-disabled: #727272;
+  --color-icons-default: #000000;
+  --color-icons-gray: #727272;
+  --color-icons-brand: #0096cb;
+  --color-icons-warning: #e9425b;
+  --color-icons-inverse: #ffffff;
+  --color-shadow-default: #0000001a;
+  --color-form-background-input-field-default: #ffffff;
+  --color-form-background-checkbox-default: #ffffff;
+  --color-form-border-input-field-default: #bdbdbd;
+  --color-form-border-checkbox-default: #bdbdbd;
+  --color-button-background-primary-default: #0096cb;
+  --color-button-background-dark-default: #000000;
+  --color-button-background-secondary-default: #ffffff;
+  --color-button-background-pill-default: #ffffff;
+  --color-button-border-secondary-default: #0096cb;
+  --color-button-border-pill-default: #eceae9;
+  --color-button-icon-primary-default: #ffffff;
+  --color-button-icon-secondary-default: #0096cb;
+  --color-button-icon-pill-default: #727272;
+  --color-button-text-primary-default: #ffffff;
+  --color-button-text-dark-default: #ffffff;
+  --color-button-text-secondary-default: #0096cb;
+  --color-button-text-ghost-default: #0096cb;
+  --color-button-text-pill-default: #bdbdbd;
+  --color-link-text-default-default: #000000;
+  --color-link-text-brown-default: #6a4847;
+  --color-form-background-input-field-hover: #f8f8f8;
+  --color-form-background-checkbox-hover: #f2f2f2;
+  --color-form-border-input-field-hover: #0096cb;
+  --color-form-border-checkbox-hover: #bdbdbd;
+  --color-button-background-primary-hover: #02b4f2;
+  --color-button-background-dark-hover: #222222;
+  --color-button-background-secondary-hover: #02a1d91a;
+  --color-button-background-pill-hover: #f8f8f8;
+  --color-button-border-secondary-hover: #0096cb;
+  --color-button-border-pill-hover: #eceae9;
+  --color-button-icon-primary-hover: #ffffff;
+  --color-button-icon-secondary-hover: #0096cb;
+  --color-button-icon-pill-hover: #727272;
+  --color-button-text-primary-hover: #ffffff;
+  --color-button-text-dark-hover: #ffffff;
+  --color-button-text-secondary-hover: #0096cb;
+  --color-button-text-ghost-hover: #02b4f2;
+  --color-button-text-pill-hover: #bdbdbd;
+  --color-link-text-default-hover: #000000;
+  --color-link-text-brown-hover: #a27675;
+  --color-form-background-input-field-active: #ffffff;
+  --color-form-background-checkbox-active: #0096cb;
+  --color-form-border-input-field-active: #0096cb;
+  --color-form-border-checkbox-active: #0096cb;
+  --color-button-background-primary-active: #02b4f2;
+  --color-button-background-dark-active: #222222;
+  --color-button-background-secondary-active: #02a1d91a;
+  --color-button-background-pill-active: #f8f8f8;
+  --color-button-border-secondary-active: #0096cb;
+  --color-button-border-pill-active: #bdbdbd;
+  --color-button-icon-primary-active: #ffffff;
+  --color-button-icon-secondary-active: #0096cb;
+  --color-button-icon-pill-active: #727272;
+  --color-button-text-primary-active: #ffffff;
+  --color-button-text-dark-active: #ffffff;
+  --color-button-text-secondary-active: #0096cb;
+  --color-button-text-ghost-active: #02b4f2;
+  --color-button-text-pill-active: #bdbdbd;
+  --color-link-text-default-active: #000000;
+  --color-link-text-brown-active: #a27675;
+  --color-form-background-input-field-disabled: #f2f2f2;
+  --color-form-background-checkbox-disabled: #f2f2f2;
+  --color-form-border-input-field-disabled: #bdbdbd;
+  --color-form-border-checkbox-disabled: #eceae9;
+  --color-button-background-primary-disabled: #727272;
+  --color-button-background-dark-disabled: #000000;
+  --color-button-background-secondary-disabled: #ffffff;
+  --color-button-background-pill-disabled: #ffffff;
+  --color-button-border-secondary-disabled: #bdbdbd;
+  --color-button-border-pill-disabled: #eceae9;
+  --color-button-icon-primary-disabled: #ffffff;
+  --color-button-icon-secondary-disabled: #0096cb;
+  --color-button-icon-pill-disabled: #727272;
+  --color-button-text-primary-disabled: #ffffff;
+  --color-button-text-dark-disabled: #727272;
+  --color-button-text-secondary-disabled: #727272;
+  --color-button-text-ghost-disabled: #727272;
+  --color-button-text-pill-disabled: #727272;
+  --color-link-text-default-disabled: #727272;
+  --color-link-text-brown-disabled: #727272;
+  --box-shadow-s: 0px 1px 8px 0px #0000001a;
+  --box-shadow-m: 0px 10px 20px 0px #0000001a, 0px 1px 2px 0px #0000001a;
+  --box-shadow-l: 0px -10px 20px 0px #0000001a, 0px 1px 2px 0px #0000001a;
+  --spacing-layout-breakpoints: 360px;
+  --spacing-layout-columns: 4px;
+  --spacing-layout-padding: 16px;
+  --spacing-layout-gutter: 16px;
+  --spacing-0: 0px;
+  --spacing-xxs: 4px;
+  --spacing-xs: 8px;
+  --spacing-s: 16px;
+  --spacing-m: 24px;
+  --spacing-l: 40px;
+  --spacing-xl: 64px;
+  --spacing-xxl: 128px;
+  --border-radius-0: 0px;
+  --border-radius-xl: 80px;
+  --border-radius-pill: 80px;
+  --border-width-0: 0px;
+  --border-width-s: 1px;
+  --article-heading-fontFamily: Gulliver Web, Georgia, serif;
+  --article-heading-fontSize: 28px;
+  --article-heading-fontWeight: 700;
+  --article-heading-letterSpacing: 0px;
+  --article-heading-lineHeight: 130%;
+  --article-heading-textTransform: none;
+  --article-heading-textDecoration: none;
+  --article-heading-light-fontFamily: Gulliver Web, Georgia, serif;
+  --article-heading-light-fontSize: 28px;
+  --article-heading-light-fontWeight: 400;
+  --article-heading-light-letterSpacing: 0px;
+  --article-heading-light-lineHeight: 130%;
+  --article-heading-light-textTransform: none;
+  --article-heading-light-textDecoration: none;
+  --article-heading-alternate-fontFamily: Montserrat;
+  --article-heading-alternate-fontSize: 28px;
+  --article-heading-alternate-fontWeight: 300;
+  --article-heading-alternate-letterSpacing: 0px;
+  --article-heading-alternate-lineHeight: 130%;
+  --article-heading-alternate-textTransform: none;
+  --article-heading-alternate-textDecoration: none;
+  --article-heading-2-fontFamily: Gulliver Web, Georgia, serif;
+  --article-heading-2-fontSize: 20px;
+  --article-heading-2-fontWeight: 700;
+  --article-heading-2-letterSpacing: 0px;
+  --article-heading-2-lineHeight: 130%;
+  --article-heading-2-textTransform: none;
+  --article-heading-2-textDecoration: none;
+  --article-heading-2-light-fontFamily: Gulliver Web, Georgia, serif;
+  --article-heading-2-light-fontSize: 20px;
+  --article-heading-2-light-fontWeight: 400;
+  --article-heading-2-light-letterSpacing: 0px;
+  --article-heading-2-light-lineHeight: 130%;
+  --article-heading-2-light-textTransform: none;
+  --article-heading-2-light-textDecoration: none;
+  --article-heading-2-alternate-fontFamily: Montserrat;
+  --article-heading-2-alternate-fontSize: 20px;
+  --article-heading-2-alternate-fontWeight: 700;
+  --article-heading-2-alternate-letterSpacing: 0px;
+  --article-heading-2-alternate-lineHeight: 130%;
+  --article-heading-2-alternate-textTransform: none;
+  --article-heading-2-alternate-textDecoration: none;
+  --article-body-fontFamily: Fira Sans, Arial, sans-serif;
+  --article-body-fontSize: 18px;
+  --article-body-fontWeight: 400;
+  --article-body-letterSpacing: 0px;
+  --article-body-lineHeight: 160%;
+  --article-body-textTransform: none;
+  --article-body-textDecoration: none;
+  --article-type-fontFamily: Fira Sans, Arial, sans-serif;
+  --article-type-fontSize: 22px;
+  --article-type-fontWeight: 700;
+  --article-type-letterSpacing: 1.6px;
+  --article-type-lineHeight: 160%;
+  --article-type-textTransform: small-caps;
+  --article-type-textDecoration: none;
+  --article-intro-fontFamily: Fira Sans, Arial, sans-serif;
+  --article-intro-fontSize: 20px;
+  --article-intro-fontWeight: 300;
+  --article-intro-letterSpacing: 0px;
+  --article-intro-lineHeight: 160%;
+  --article-intro-textTransform: none;
+  --article-intro-textDecoration: none;
+  --article-city-fontFamily: Fira Sans, Arial, sans-serif;
+  --article-city-fontSize: 22px;
+  --article-city-fontWeight: 400;
+  --article-city-letterSpacing: 2.4px;
+  --article-city-lineHeight: 160%;
+  --article-city-textTransform: small-caps;
+  --article-city-textDecoration: none;
+  --article-quote-fontFamily: Gulliver Web, Georgia, serif;
+  --article-quote-fontSize: 28px;
+  --article-quote-fontWeight: 700;
+  --article-quote-letterSpacing: 0px;
+  --article-quote-lineHeight: 130%;
+  --article-quote-textTransform: none;
+  --article-quote-textDecoration: none;
+  --article-question-fontFamily: Fira Sans, Arial, sans-serif;
+  --article-question-fontSize: 18px;
+  --article-question-fontWeight: 700;
+  --article-question-letterSpacing: 0px;
+  --article-question-lineHeight: 160%;
+  --article-question-textTransform: none;
+  --article-question-textDecoration: none;
+  --article-drop-cap-fontFamily: Abril Fatface;
+  --article-drop-cap-fontSize: 96px;
+  --article-drop-cap-fontWeight: 700;
+  --article-drop-cap-letterSpacing: 0px;
+  --article-drop-cap-lineHeight: 160%;
+  --article-drop-cap-textTransform: none;
+  --article-drop-cap-textDecoration: none;
+  --article-drop-cap-alternate-fontFamily: Montserrat;
+  --article-drop-cap-alternate-fontSize: 96px;
+  --article-drop-cap-alternate-fontWeight: 300;
+  --article-drop-cap-alternate-letterSpacing: 0px;
+  --article-drop-cap-alternate-lineHeight: 160%;
+  --article-drop-cap-alternate-textTransform: none;
+  --article-drop-cap-alternate-textDecoration: none;
+  --body-light-fontFamily: Fira Sans, Arial, sans-serif;
+  --body-light-fontSize: 18px;
+  --body-light-fontWeight: 300;
+  --body-light-letterSpacing: 0px;
+  --body-light-lineHeight: 160%;
+  --body-light-textTransform: none;
+  --body-light-textDecoration: none;
+  --body-regular-fontFamily: Fira Sans, Arial, sans-serif;
+  --body-regular-fontSize: 18px;
+  --body-regular-fontWeight: 400;
+  --body-regular-letterSpacing: 0px;
+  --body-regular-lineHeight: 160%;
+  --body-regular-textTransform: none;
+  --body-regular-textDecoration: none;
+  --body-bold-fontFamily: Fira Sans, Arial, sans-serif;
+  --body-bold-fontSize: 18px;
+  --body-bold-fontWeight: 700;
+  --body-bold-letterSpacing: 0px;
+  --body-bold-lineHeight: 160%;
+  --body-bold-textTransform: none;
+  --body-bold-textDecoration: none;
+  --body-uppercase-fontFamily: Fira Sans, Arial, sans-serif;
+  --body-uppercase-fontSize: 22px;
+  --body-uppercase-fontWeight: 400;
+  --body-uppercase-letterSpacing: 1.6px;
+  --body-uppercase-lineHeight: normal;
+  --body-uppercase-textTransform: small-caps;
+  --body-uppercase-textDecoration: none;
+  --body-uppercase-bold-fontFamily: Fira Sans, Arial, sans-serif;
+  --body-uppercase-bold-fontSize: 22px;
+  --body-uppercase-bold-fontWeight: 700;
+  --body-uppercase-bold-letterSpacing: 1.6px;
+  --body-uppercase-bold-lineHeight: normal;
+  --body-uppercase-bold-textTransform: small-caps;
+  --body-uppercase-bold-textDecoration: none;
+  --body-uppercase-bold-small-fontFamily: Fira Sans, Arial, sans-serif;
+  --body-uppercase-bold-small-fontSize: 20px;
+  --body-uppercase-bold-small-fontWeight: 700;
+  --body-uppercase-bold-small-letterSpacing: 1.6px;
+  --body-uppercase-bold-small-lineHeight: normal;
+  --body-uppercase-bold-small-textTransform: small-caps;
+  --body-uppercase-bold-small-textDecoration: none;
+  --heading-2-fontFamily: Gulliver Web, Georgia, serif;
+  --heading-2-fontSize: 20px;
+  --heading-2-fontWeight: 700;
+  --heading-2-letterSpacing: 0px;
+  --heading-2-lineHeight: 130%;
+  --heading-2-textTransform: none;
+  --heading-2-textDecoration: none;
+  --heading-3-fontFamily: Fira Sans, Arial, sans-serif;
+  --heading-3-fontSize: 18px;
+  --heading-3-fontWeight: 700;
+  --heading-3-letterSpacing: 0px;
+  --heading-3-lineHeight: 130%;
+  --heading-3-textTransform: none;
+  --heading-3-textDecoration: none;
+  --heading-page-fontFamily: Gulliver Web, Georgia, serif;
+  --heading-page-fontSize: 25px;
+  --heading-page-fontWeight: 700;
+  --heading-page-letterSpacing: 0px;
+  --heading-page-lineHeight: 130%;
+  --heading-page-textTransform: none;
+  --heading-page-textDecoration: none;
+  --heading-subheading-fontFamily: Gulliver Web, Georgia, serif;
+  --heading-subheading-fontSize: 25px;
+  --heading-subheading-fontWeight: 400;
+  --heading-subheading-letterSpacing: 0px;
+  --heading-subheading-lineHeight: 130%;
+  --heading-subheading-textTransform: none;
+  --heading-subheading-textDecoration: none;
+  --heading-uppercase-fontFamily: Fira Sans, Arial, sans-serif;
+  --heading-uppercase-fontSize: 14px;
+  --heading-uppercase-fontWeight: 700;
+  --heading-uppercase-letterSpacing: 4px;
+  --heading-uppercase-lineHeight: 130%;
+  --heading-uppercase-textTransform: small-caps;
+  --heading-uppercase-textDecoration: none;
+  --meta-light-fontFamily: Fira Sans, Arial, sans-serif;
+  --meta-light-fontSize: 14px;
+  --meta-light-fontWeight: 300;
+  --meta-light-letterSpacing: 0px;
+  --meta-light-lineHeight: 140%;
+  --meta-light-textTransform: none;
+  --meta-light-textDecoration: none;
+  --meta-regular-fontFamily: Fira Sans, Arial, sans-serif;
+  --meta-regular-fontSize: 14px;
+  --meta-regular-fontWeight: 400;
+  --meta-regular-letterSpacing: 0px;
+  --meta-regular-lineHeight: 140%;
+  --meta-regular-textTransform: none;
+  --meta-regular-textDecoration: none;
+  --meta-bold-fontFamily: Fira Sans, Arial, sans-serif;
+  --meta-bold-fontSize: 14px;
+  --meta-bold-fontWeight: 700;
+  --meta-bold-letterSpacing: 0px;
+  --meta-bold-lineHeight: 140%;
+  --meta-bold-textTransform: none;
+  --meta-bold-textDecoration: none;
+  --menu-menu-primary-fontFamily: Fira Sans, Arial, sans-serif;
+  --menu-menu-primary-fontSize: 22px;
+  --menu-menu-primary-fontWeight: 400;
+  --menu-menu-primary-letterSpacing: 0px;
+  --menu-menu-primary-lineHeight: 140%;
+  --menu-menu-primary-textTransform: small-caps;
+  --menu-menu-primary-textDecoration: none;
+  --menu-menu-secondary-fontFamily: Fira Sans, Arial, sans-serif;
+  --menu-menu-secondary-fontSize: 14px;
+  --menu-menu-secondary-fontWeight: 400;
+  --menu-menu-secondary-letterSpacing: 0px;
+  --menu-menu-secondary-lineHeight: 140%;
+  --menu-menu-secondary-textTransform: none;
+  --menu-menu-secondary-textDecoration: none;
+  --menu-menu-submenu-fontFamily: Fira Sans, Arial, sans-serif;
+  --menu-menu-submenu-fontSize: 16px;
+  --menu-menu-submenu-fontWeight: 300;
+  --menu-menu-submenu-letterSpacing: 0px;
+  --menu-menu-submenu-lineHeight: 140%;
+  --menu-menu-submenu-textTransform: none;
+  --menu-menu-submenu-textDecoration: none;
+  --menu-menu-tabbar-fontFamily: Fira Sans, Arial, sans-serif;
+  --menu-menu-tabbar-fontSize: 12px;
+  --menu-menu-tabbar-fontWeight: 400;
+  --menu-menu-tabbar-letterSpacing: 0px;
+  --menu-menu-tabbar-lineHeight: 140%;
+  --menu-menu-tabbar-textTransform: none;
+  --menu-menu-tabbar-textDecoration: none;
+  --menu-menu-tabbar-active-fontFamily: Fira Sans, Arial, sans-serif;
+  --menu-menu-tabbar-active-fontSize: 12px;
+  --menu-menu-tabbar-active-fontWeight: 700;
+  --menu-menu-tabbar-active-letterSpacing: 0px;
+  --menu-menu-tabbar-active-lineHeight: 140%;
+  --menu-menu-tabbar-active-textTransform: none;
+  --menu-menu-tabbar-active-textDecoration: none;
+  --menu-menu-tab-item-fontFamily: Gulliver Web, Georgia, serif;
+  --menu-menu-tab-item-fontSize: 1.25rem;
+  --menu-menu-tab-item-fontWeight: 400;
+  --menu-menu-tab-item-letterSpacing: 0%;
+  --menu-menu-tab-item-lineHeight: 130%;
+  --menu-menu-tab-item-textTransform: none;
+  --menu-menu-tab-item-textDecoration: none;
+  --menu-menu-tab-item-active-fontFamily: Gulliver Web, Georgia, serif;
+  --menu-menu-tab-item-active-fontSize: 1.25rem;
+  --menu-menu-tab-item-active-fontWeight: 700;
+  --menu-menu-tab-item-active-letterSpacing: 0%;
+  --menu-menu-tab-item-active-lineHeight: 130%;
+  --menu-menu-tab-item-active-textTransform: none;
+  --menu-menu-tab-item-active-textDecoration: underline;
+  --mijn-nd-heading-fontFamily: Fira Sans, Arial, sans-serif;
+  --mijn-nd-heading-fontSize: 1.125rem;
+  --mijn-nd-heading-fontWeight: 700;
+  --mijn-nd-heading-letterSpacing: 0px;
+  --mijn-nd-heading-lineHeight: 160%;
+  --mijn-nd-heading-textTransform: none;
+  --mijn-nd-heading-textDecoration: none;
+  --mijn-nd-description-fontFamily: Fira Sans, Arial, sans-serif;
+  --mijn-nd-description-fontSize: 1.125rem;
+  --mijn-nd-description-fontWeight: 300;
+  --mijn-nd-description-letterSpacing: 0px;
+  --mijn-nd-description-lineHeight: 160%;
+  --mijn-nd-description-textTransform: none;
+  --mijn-nd-description-textDecoration: none;
+  --font-size-heading-xs: 14px;
+  --font-size-heading-s: 18px;
+  --font-size-heading-m: 20px;
+  --font-size-heading-l: 40px;
+  --font-size-heading-xl: 48px;
+  --font-size-body-xs: 12px;
+  --font-size-body-s: 16px;
+  --font-size-body-m: 18px;
+  --font-size-body-l: 20px;
+  --font-size-body-xl: 22px;
+  --font-size-body-xxl: 28px;
+  --font-size-body-drop-cap: 96px;
+  --font-size-meta: 14px;
+}
+
+/* Mobile Typography (Default) */
+@media (max-width: 767px) {
+  :root {
+    --font-size-heading-xs: 14px;
+    --font-size-heading-s: 16px;
+    --font-size-heading-m: 18px;
+    --font-size-heading-l: 26px;
+    --font-size-heading-xl: 28px;
+    --font-size-body-xs: 12px;
+    --font-size-body-s: 14px;
+    --font-size-body-m: 16px;
+    --font-size-body-l: 18px;
+    --font-size-body-xl: 20px;
+    --font-size-body-xxl: 24px;
+    --font-size-body-drop-cap: 88px;
+    --font-size-meta: 14px;
+  }
+}
+
+/* Tablet Typography (768px - 1023px) */
+@media (min-width: 768px) and (max-width: 1023px) {
+  :root {
+    --font-size-heading-xs: 14px;
+    --font-size-heading-s: 18px;
+    --font-size-heading-m: 20px;
+    --font-size-heading-l: 36px;
+    --font-size-heading-xl: 40px;
+    --font-size-body-xs: 12px;
+    --font-size-body-s: 16px;
+    --font-size-body-m: 18px;
+    --font-size-body-l: 20px;
+    --font-size-body-xl: 22px;
+    --font-size-body-xxl: 28px;
+    --font-size-body-drop-cap: 96px;
+    --font-size-meta: 14px;
+  }
+}
+
+/* Desktop Typography (1024px+) is defined in the main :root block */