@import "tailwindcss";

/* Make sure Tailwind scans stories and .storybook files */
@source "../stories/**/*";
@source "../app/**/*";
@source "../.storybook/**/*";
@source "./**/*";

/* Hide scrollbar utility */
.scrollbar-hide {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

@theme inline {
  /* Custom breakpoints */
  --breakpoint-xsm: 429px;
  --breakpoint-sm: 430px;
  --breakpoint-sm2: 440px;
  --breakpoint-smd: 530px;
  --breakpoint-md: 640px;
  --breakpoint-xmd: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-lg2: 1150px;
  --breakpoint-xl: 1440px;

  /* Reset Tailwind color defaults to avoid collisions */
  --color-*: initial;

  /* Font families */
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-bricolage-grotesque), ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--font-space-grotesk), ui-monospace, SFMono-Regular,
    "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* Dimension */
  --spacing-scale-000: 0px;
  --spacing-scale-001: 1px;
  --spacing-scale-002: 2px;
  --spacing-scale-003: 3px;
  --spacing-scale-004: 4px;
  --spacing-scale-005: 5px;
  --spacing-scale-006: 6px;
  --spacing-scale-008: 8px;
  --spacing-scale-010: 10px;
  --spacing-scale-012: 12px;
  --spacing-scale-016: 16px;
  --spacing-scale-020: 20px;
  --spacing-scale-024: 24px;
  --spacing-scale-032: 32px;
  --spacing-scale-040: 40px;
  --spacing-scale-048: 48px;
  --spacing-scale-056: 56px;
  --spacing-scale-060: 60px;
  --spacing-scale-064: 64px;
  --spacing-scale-076: 76px;
  --spacing-scale-096: 96px;
  --spacing-scale-120: 120px;
  --spacing-scale-160: 160px;
  --spacing-scale-260: 260px;
  --spacing-scale-290: 290px;

  --spacing-measures-sizing-008: var(--spacing-scale-008);
  --spacing-measures-sizing-010: var(--spacing-scale-010);
  --spacing-measures-sizing-012: var(--spacing-scale-012);
  --spacing-measures-sizing-016: var(--spacing-scale-016);
  --spacing-measures-sizing-020: var(--spacing-scale-020);
  --spacing-measures-sizing-024: var(--spacing-scale-024);
  --spacing-measures-sizing-032: var(--spacing-scale-032);
  --spacing-measures-sizing-040: var(--spacing-scale-040);
  --spacing-measures-sizing-048: var(--spacing-scale-048);
  --spacing-measures-sizing-056: var(--spacing-scale-056);
  --spacing-measures-sizing-060: var(--spacing-scale-060);
  --spacing-measures-sizing-064: var(--spacing-scale-064);
  --spacing-measures-sizing-076: var(--spacing-scale-076);
  --spacing-measures-sizing-096: var(--spacing-scale-096);
  --spacing-measures-sizing-120: var(--spacing-scale-120);

  /* Spacing aliases */
  --spacing-measures-spacing-000: var(--spacing-scale-000);
  --spacing-measures-spacing-001: var(--spacing-scale-001);
  --spacing-measures-spacing-002: var(--spacing-scale-002);
  --spacing-measures-spacing-004: var(--spacing-scale-004);
  --spacing-measures-spacing-006: var(--spacing-scale-006);
  --spacing-measures-spacing-008: var(--spacing-scale-008);
  --spacing-measures-spacing-010: var(--spacing-scale-010);
  --spacing-measures-spacing-012: var(--spacing-scale-012);
  --spacing-measures-spacing-016: var(--spacing-scale-016);
  --spacing-measures-spacing-020: var(--spacing-scale-020);
  --spacing-measures-spacing-024: var(--spacing-scale-024);
  --spacing-measures-spacing-032: var(--spacing-scale-032);
  --spacing-measures-spacing-040: var(--spacing-scale-040);
  --spacing-measures-spacing-048: var(--spacing-scale-048);
  --spacing-measures-spacing-056: var(--spacing-scale-056);
  --spacing-measures-spacing-060: var(--spacing-scale-060);
  --spacing-measures-spacing-064: var(--spacing-scale-064);
  --spacing-measures-spacing-076: var(--spacing-scale-076);
  --spacing-measures-spacing-096: var(--spacing-scale-096);
  --spacing-measures-spacing-120: var(--spacing-scale-120);
  --spacing-measures-spacing-160: var(--spacing-scale-160);
  --spacing-measures-spacing-260: var(--spacing-scale-260);

  /* Border radius */
  --radius-measures-radius-none: var(--spacing-scale-000);
  --radius-measures-radius-xsmall: var(--spacing-scale-006);
  --radius-measures-radius-small: var(--spacing-scale-012);
  --radius-measures-radius-medium: var(--spacing-scale-016);
  --radius-measures-radius-large: var(--spacing-scale-024);
  --radius-measures-radius-xlarge: var(--spacing-scale-032);
  --radius-measures-radius-full: 9999px;

  /* Border widths */
  --border-measures-stroke-small: var(--spacing-scale-001);
  --border-measures-stroke-medium: var(--spacing-scale-002);
  --border-measures-stroke-large: var(--spacing-scale-003);

  /* Compatibility aliases */
  --measures-radius-none: var(--radius-measures-radius-none);
  --measures-radius-xsmall: var(--radius-measures-radius-xsmall);
  --measures-radius-small: var(--radius-measures-radius-small);
  --measures-radius-medium: var(--radius-measures-radius-medium);
  --measures-radius-large: var(--radius-measures-radius-large);
  --measures-radius-xlarge: var(--radius-measures-radius-xlarge);
  --measures-radius-full: var(--radius-measures-radius-full);
  --measures-stroke-small: var(--border-measures-stroke-small);
  --measures-stroke-medium: var(--border-measures-stroke-medium);
  --measures-stroke-large: var(--border-measures-stroke-large);
  --measures-sizing-008: var(--spacing-measures-sizing-008);
  --measures-sizing-010: var(--spacing-measures-sizing-010);
  --measures-sizing-012: var(--spacing-measures-sizing-012);
  --measures-sizing-016: var(--spacing-measures-sizing-016);
  --measures-sizing-020: var(--spacing-measures-sizing-020);
  --measures-sizing-024: var(--spacing-measures-sizing-024);
  --measures-sizing-032: var(--spacing-measures-sizing-032);
  --measures-sizing-040: var(--spacing-measures-sizing-040);
  --measures-sizing-048: var(--spacing-measures-sizing-048);
  --measures-sizing-056: var(--spacing-measures-sizing-056);
  --measures-sizing-060: var(--spacing-measures-sizing-060);
  --measures-sizing-064: var(--spacing-measures-sizing-064);
  --measures-sizing-076: var(--spacing-measures-sizing-076);
  --measures-sizing-096: var(--spacing-measures-sizing-096);
  --measures-sizing-120: var(--spacing-measures-sizing-120);
  --measures-spacing-000: var(--spacing-measures-spacing-000);
  --measures-spacing-001: var(--spacing-measures-spacing-001);
  --measures-spacing-002: var(--spacing-measures-spacing-002);
  --measures-spacing-004: var(--spacing-measures-spacing-004);
  --measures-spacing-006: var(--spacing-measures-spacing-006);
  --measures-spacing-008: var(--spacing-measures-spacing-008);
  --measures-spacing-010: var(--spacing-measures-spacing-010);
  --measures-spacing-012: var(--spacing-measures-spacing-012);
  --measures-spacing-016: var(--spacing-measures-spacing-016);
  --measures-spacing-020: var(--spacing-measures-spacing-020);
  --measures-spacing-024: var(--spacing-measures-spacing-024);
  --measures-spacing-032: var(--spacing-measures-spacing-032);
  --measures-spacing-040: var(--spacing-measures-spacing-040);
  --measures-spacing-048: var(--spacing-measures-spacing-048);
  --measures-spacing-056: var(--spacing-measures-spacing-056);
  --measures-spacing-060: var(--spacing-measures-spacing-060);
  --measures-spacing-064: var(--spacing-measures-spacing-064);
  --measures-spacing-076: var(--spacing-measures-spacing-076);
  --measures-spacing-096: var(--spacing-measures-spacing-096);
  --measures-spacing-120: var(--spacing-measures-spacing-120);
  --measures-spacing-160: var(--spacing-measures-spacing-160);
  --measures-spacing-260: var(--spacing-measures-spacing-260);

  /* Grays & alpha */
  --color-gray-000: #ffffff;
  --color-gray-050: #f6f6f6;
  --color-gray-100: #e5e5e5;
  --color-gray-200: #d2d2d2;
  --color-gray-300: #b4b4b4;
  --color-gray-400: #8f8f8f;
  --color-gray-500: #666666;
  --color-gray-600: #464646;
  --color-gray-700: #2d2d2d;
  --color-gray-800: #1f1f1f;
  --color-gray-900: #141414;
  --color-gray-1000: #000000;

  --color-opacity-000: #00000000;
  --color-opacity-001: #00000003;
  --color-opacity-050: #0000000d;
  --color-opacity-100: #0000001a;
  --color-opacity-200: #00000033;
  --color-opacity-300: #0000004d;
  --color-opacity-400: #00000066;
  --color-opacity-500: #00000080;
  --color-opacity-600: #00000099;
  --color-opacity-700: #000000b2;
  --color-opacity-800: #000000cc;
  --color-opacity-900: #000000e5;

  /* Kiwi */
  --color-kiwi-kiwi0: #ebfff2;
  --color-kiwi-kiwi50: #c9fedf;
  --color-kiwi-kiwi100: #a8fdcd;
  --color-kiwi-kiwi150: #8cf9bd;
  --color-kiwi-kiwi200: #6ff6ae;
  --color-kiwi-kiwi300: #45ea97;
  --color-kiwi-kiwi400: #29d984;
  --color-kiwi-kiwi500: #16c472;
  --color-kiwi-kiwi600: #0ba960;
  --color-kiwi-kiwi700: #058c4e;
  --color-kiwi-kiwi800: #016c3c;
  --color-kiwi-kiwi900: #004d2b;
  --color-kiwi-kiwi1000: #00331c;

  /* Lavender */
  --color-lavender-lavender0: #f0ebff;
  --color-lavender-lavender50: #e8defe;
  --color-lavender-lavender100: #e0d1fd;
  --color-lavender-lavender150: #d7c3f9;
  --color-lavender-lavender200: #ceb5f6;
  --color-lavender-lavender300: #bb97ea;
  --color-lavender-lavender400: #a578d9;
  --color-lavender-lavender500: #8d5ac4;
  --color-lavender-lavender600: #743ea9;
  --color-lavender-lavender700: #5a278c;
  --color-lavender-lavender800: #41146c;
  --color-lavender-lavender900: #2b074d;
  --color-lavender-lavender1000: #1a0033;

  /* Lime */
  --color-lime-lime0: #fbffeb;
  --color-lime-lime50: #f2fec9;
  --color-lime-lime100: #e7fda8;
  --color-lime-lime150: #daf98c;
  --color-lime-lime200: #ccf66f;
  --color-lime-lime300: #b1ea45;
  --color-lime-lime400: #98d929;
  --color-lime-lime500: #80c416;
  --color-lime-lime600: #6aa90b;
  --color-lime-lime700: #548c05;
  --color-lime-lime800: #406c01;
  --color-lime-lime900: #2d4d00;
  --color-lime-lime1000: #1e3300;

  /* Magenta */
  --color-magenta-magenta0: #ffebf0;
  --color-magenta-magenta50: #fedee7;
  --color-magenta-magenta100: #fdd1dd;
  --color-magenta-magenta150: #f9c3d2;
  --color-magenta-magenta200: #f6b5c7;
  --color-magenta-magenta300: #ea97ad;
  --color-magenta-magenta400: #d97892;
  --color-magenta-magenta500: #c45a76;
  --color-magenta-magenta600: #a93e5b;
  --color-magenta-magenta700: #8c2742;
  --color-magenta-magenta800: #6c142b;
  --color-magenta-magenta900: #4d071a;
  --color-magenta-magenta1000: #33000e;

  /* Red */
  --color-red-red0: #ffebf1;
  --color-red-red50: #fec9d6;
  --color-red-red100: #fda8b7;
  --color-red-red150: #f98c98;
  --color-red-red200: #f66f78;
  --color-red-red300: #ea4845;
  --color-red-red400: #d93529;
  --color-red-red500: #c42916;
  --color-red-red600: #a9200b;
  --color-red-red700: #8c1905;
  --color-red-red800: #6c1301;
  --color-red-red900: #4d0d00;
  --color-red-red1000: #330800;

  /* Royal Blue */
  --color-royal-blue-royal-blue0: #ebecff;
  --color-royal-blue-royal-blue50: #c9cdfe;
  --color-royal-blue-royal-blue100: #a8adfd;
  --color-royal-blue-royal-blue150: #8c91f9;
  --color-royal-blue-royal-blue200: #6f74f6;
  --color-royal-blue-royal-blue300: #4548ea;
  --color-royal-blue-royal-blue400: #2b29d9;
  --color-royal-blue-royal-blue500: #1c16c4;
  --color-royal-blue-royal-blue600: #140ba9;
  --color-royal-blue-royal-blue700: #0f058c;
  --color-royal-blue-royal-blue800: #0c016c;
  --color-royal-blue-royal-blue900: #0a004d;
  --color-royal-blue-royal-blue1000: #080033;

  /* Rust */
  --color-rust-rust0: #ffedeb;
  --color-rust-rust50: #fed8d4;
  --color-rust-rust100: #fdc4bd;
  --color-rust-rust150: #f9b0a6;
  --color-rust-rust200: #f69c8f;
  --color-rust-rust300: #ea7a65;
  --color-rust-rust400: #d96043;
  --color-rust-rust500: #c44e29;
  --color-rust-rust600: #a94417;
  --color-rust-rust700: #8c3d0b;
  --color-rust-rust800: #6c3604;
  --color-rust-rust900: #4d2c01;
  --color-rust-rust1000: #332100;

  /* Teal */
  --color-teal-teal0: #ebfffc;
  --color-teal-teal50: #c9fef9;
  --color-teal-teal100: #a8fdf8;
  --color-teal-teal150: #8cf9f8;
  --color-teal-teal200: #6ff2f6;
  --color-teal-teal300: #45dcea;
  --color-teal-teal400: #29c3d9;
  --color-teal-teal500: #16a9c4;
  --color-teal-teal600: #0b8ea9;
  --color-teal-teal700: #05728c;
  --color-teal-teal800: #01576c;
  --color-teal-teal900: #003e4d;
  --color-teal-teal1000: #002933;

  /* Yellow */
  --color-yellow-yellow0: #fffeeb;
  --color-yellow-yellow50: #fefcc9;
  --color-yellow-yellow100: #fdfaa8;
  --color-yellow-yellow150: #f9f58c;
  --color-yellow-yellow200: #f6f06f;
  --color-yellow-yellow300: #eae345;
  --color-yellow-yellow400: #d9d129;
  --color-yellow-yellow500: #c4bb16;
  --color-yellow-yellow600: #a9a20b;
  --color-yellow-yellow700: #8c8505;
  --color-yellow-yellow800: #6c6701;
  --color-yellow-yellow900: #4d4a00;
  --color-yellow-yellow1000: #333000;

  /* Border */
  --color-border-default-brand-accent: var(--color-yellow-yellow300);
  --color-border-default-brand-primary: var(--color-yellow-yellow100);
  --color-border-default-brand-secondary: var(--color-rust-rust100);
  --color-border-default-primary: var(--color-gray-900);
  --color-border-default-secondary: var(--color-gray-800);
  --color-border-default-tertiary: var(--color-gray-600);
  --color-border-default-utility-info: var(--color-royal-blue-royal-blue300);
  --color-border-default-utility-negative: var(--color-red-red300);
  --color-border-default-utility-positive: var(--color-kiwi-kiwi300);
  --color-border-default-utility-warning: var(--color-yellow-yellow300);

  --color-border-inverse-brand-accent: var(--color-yellow-yellow50);
  --color-border-inverse-brand-primary: var(--color-yellow-yellow800);
  --color-border-inverse-brand-secondary: var(--color-rust-rust800);
  --color-border-inverse-primary: var(--color-gray-000);
  --color-border-inverse-secondary: var(--color-opacity-200);
  --color-border-inverse-tertiary: var(--color-opacity-300);
  --color-border-inverse-utility-info: var(--color-royal-blue-royal-blue300);
  --color-border-inverse-utility-negative: var(--color-red-red300);
  --color-border-inverse-utility-positive: var(--color-kiwi-kiwi400);
  --color-border-inverse-utility-warning: var(--color-yellow-yellow400);

  /* Content */
  --color-content-brand-darker-accent-2: var(--color-yellow-yellow200);
  --color-content-brand-kiwi: var(--color-kiwi-kiwi600);
  --color-content-brand-lavender: var(--color-lavender-lavender500);
  --color-content-brand-lighter-accent-2: var(--color-yellow-yellow100);
  --color-content-brand-lime: var(--color-lime-lime500);
  --color-content-brand-primary: var(--color-yellow-yellow50);
  --color-content-brand-red: var(--color-red-red400);
  --color-content-brand-royal: var(--color-royal-blue-royal-blue400);
  --color-content-brand-rust: var(--color-rust-rust400);
  --color-content-brand-teal: var(--color-teal-teal500);

  --color-content-default-brand-accent: var(--color-opacity-700);
  --color-content-default-brand-primary: var(--color-yellow-yellow50);
  --color-content-default-brand-secondary: var(--color-rust-rust400);
  --color-content-default-primary: var(--color-gray-000);
  --color-content-default-secondary: var(--color-gray-200);
  --color-content-default-tertiary: var(--color-gray-300);
  --color-content-default-utility-info: var(--color-royal-blue-royal-blue500);
  --color-content-default-utility-negative: var(--color-red-red400);
  --color-content-default-utility-positive: var(--color-lime-lime400);
  --color-content-default-utility-warning: var(--color-yellow-yellow500);

  --color-content-inverse-brand-accent: var(--color-yellow-yellow700);
  --color-content-inverse-brand-primary: var(--color-yellow-yellow900);
  --color-content-inverse-brand-secondary: var(--color-rust-rust800);
  --color-content-inverse-brand-royal: var(--color-royal-blue-royal-blue1000);
  --color-content-inverse-primary: var(--color-gray-1000);
  --color-content-inverse-secondary: var(--color-gray-800);
  --color-content-inverse-tertiary: var(--color-gray-700);
  --color-content-inverse-utility-info: var(--color-royal-blue-royal-blue300);
  --color-content-inverse-utility-negative: var(--color-red-red300);
  --color-content-inverse-utility-positive: var(--color-kiwi-kiwi300);
  --color-content-inverse-utility-warning: var(--color-yellow-yellow300);

  /* Surface */
  --color-surface-default-brand-red: var(--color-red-red100);
  --color-surface-default-brand-darker-accent: var(--color-yellow-yellow200);
  --color-surface-default-brand-kiwi: var(--color-kiwi-kiwi200);
  --color-surface-default-brand-lavender: var(--color-lavender-lavender200);
  --color-surface-default-brand-lighter-accent: var(--color-yellow-yellow100);
  --color-surface-default-brand-lime: var(--color-lime-lime100);
  --color-surface-default-brand-primary: var(--color-yellow-yellow100);
  --color-surface-default-brand-royal: var(--color-royal-blue-royal-blue50);
  --color-surface-default-brand-rust: var(--color-rust-rust100);
  --color-surface-default-brand-teal: var(--color-teal-teal50);

  --color-surface-default-primary: var(--color-gray-1000);
  --color-surface-default-secondary: var(--color-gray-900);
  --color-surface-default-semi-opaque: var(--color-opacity-050);
  --color-surface-default-tertiary: var(--color-gray-800);
  --color-surface-default-transparent: var(--color-opacity-000);

  --color-surface-default-utility-info: var(--color-royal-blue-royal-blue400);
  --color-surface-default-utility-negative: var(--color-red-red400);
  --color-surface-default-utility-positive: var(--color-kiwi-kiwi500);
  --color-surface-default-utility-warning: var(--color-yellow-yellow500);

  --color-surface-inverse-brand-accent: var(--color-yellow-yellow100);
  --color-surface-inverse-brand-primary: var(--color-yellow-yellow50);
  --color-surface-inverse-brand-secondary: var(--color-rust-rust300);
  --color-surface-inverse-primary: var(--color-gray-000);
  --color-surface-inverse-secondary: var(--color-gray-100);
  --color-surface-inverse-tertiary: var(--color-gray-200);
  --color-surface-inverse-utility-info: var(--color-royal-blue-royal-blue300);
  --color-surface-inverse-utility-negative: var(--color-red-red300);
  --color-surface-inverse-utility-positive: var(--color-kiwi-kiwi300);
  --color-surface-inverse-utility-warning: var(--color-yellow-yellow300);

  /* Color */
  --color-config-europe-morning-magenta: oklch(66.27% 0.264 321.73);
  /* white */
  --bg-color-light-primary: oklch(100% 0 263.28);

  /* Shadow */
  --shadow-focus-default: 0px 0px 10px 1px oklch(98.01% 0.065 105.71);
  --shadow-subtle: 0px 0px 48px 0px oklch(0% 0 0 / 10%);
  --shadow-minimal-shadow: 0px 0px 8px 0px oklch(0% 0 0 / 15%);
  --shadow-focus-inverse: 0px 0px 10px 1px oklch(23.93% 0 263.28);
  /* Use this shadow most of the time */
  --shadow-shallow-below: 0px 4px 16px 0px oklch(0% 0 0 / 12%);
  --shadow-default: 0px 4px 6px 0px oklch(0% 0 0 / 9%);

  /* Typography */
  --text-xx-large-display: 96px;
  --text-xx-large-display--line-height: 110%;
  --text-xx-large-display--letter-spacing: 0px;
  --text-xx-large-display--font-weight: 400;

  --text-xx-large-heading: 40px;
  --text-xx-large-heading--line-height: 52px;
  --text-xx-large-heading--letter-spacing: 0px;
  --text-xx-large-heading--font-weight: 700;

  --text-x-large-heading: 36px;
  --text-x-large-heading--line-height: 44px;
  --text-x-large-heading--letter-spacing: 0px;
  --text-x-large-heading--font-weight: 800;

  --text-large-heading: 32px;
  --text-large-heading--line-height: 40px;
  --text-large-heading--letter-spacing: 0px;
  --text-large-heading--font-weight: 700;

  --text-medium-heading: 28px;
  --text-medium-heading--line-height: 36px;
  --text-medium-heading--letter-spacing: 0px;
  --text-medium-heading--font-weight: 700;

  --text-small-heading: 24px;
  --text-small-heading--line-height: 32px;
  --text-small-heading--letter-spacing: 0px;
  --text-small-heading--font-weight: 700;

  --text-x-small-heading: 20px;
  --text-x-small-heading--line-height: 28px;
  --text-x-small-heading--letter-spacing: 0px;
  --text-x-small-heading--font-weight: 700;

  --text-large-label: 18px;
  --text-large-label--line-height: 24px;
  --text-large-label--letter-spacing: 0px;
  --text-large-label--font-weight: 500;

  --text-medium-label: 16px;
  --text-medium-label--line-height: 20px;
  --text-medium-label--letter-spacing: 0px;
  --text-medium-label--font-weight: 500;

  --text-small-label: 14px;
  --text-small-label--line-height: 16px;
  --text-small-label--letter-spacing: 0px;
  --text-small-label--font-weight: 500;

  /* Regular 400 */
  --text-large-paragraph: 18px;
  --text-large-paragraph--line-height: 130%;
  --text-large-paragraph--letter-spacing: 0px;
  --text-large-paragraph--font-weight: 400;

  --text-medium-paragraph: 16px;
  --text-medium-paragraph--line-height: 24px;
  --text-medium-paragraph--letter-spacing: 0px;
  --text-medium-paragraph--font-weight: 400;

  --text-small-paragraph: 14px;
  --text-small-paragraph--line-height: 20px;
  --text-small-paragraph--letter-spacing: 0px;
  --text-small-paragraph--font-weight: 400;

  --text-x-small-paragraph: 12px;
  --text-x-small-paragraph--line-height: 16px;
  --text-x-small-paragraph--letter-spacing: 0px;
  --text-x-small-paragraph--font-weight: 400;

  --text-xx-small-label: 10px;
  --text-xx-small-label--line-height: 12px;
  --text-xx-small-label--letter-spacing: 0px;
  --text-xx-small-label--font-weight: 500;

  --text-xx-small-paragraph: 10px;
  --text-xx-small-paragraph--line-height: 14px;
  --text-xx-small-paragraph--letter-spacing: 0px;
  --text-xx-small-paragraph--font-weight: 400;

  --text-xx-small-italic: 10px;
  --text-xx-small-italic--line-height: 14px;
  --text-xx-small-italic--letter-spacing: 0px;
  --text-xx-small-italic--font-weight: 400;

  --text-x-large-label: 24px;
  --text-x-large-label--line-height: 28px;
  --text-x-large-label--letter-spacing: 0px;
  --text-x-large-label--font-weight: 400;

  --text-x-large-paragraph: 24px;
  --text-x-large-paragraph--line-height: 32px;
  --text-x-large-paragraph--letter-spacing: 0px;
  --text-x-large-paragraph--font-weight: 400;

  --text-xx-large-paragraph: 32px;
  --text-xx-large-paragraph--line-height: 40px;
  --text-xx-large-paragraph--letter-spacing: 0px;
  --text-xx-large-paragraph--font-weight: 400;

  --text-xx-large-label: 32px;
  --text-xx-large-label--line-height: 36px;
  --text-xx-large-label--letter-spacing: 0px;
  --text-xx-large-label--font-weight: 400;

  --text-x-small-underline: 12px;
  --text-x-small-underline--line-height: 14px;
  --text-x-small-underline--letter-spacing: 0px;
  --text-x-small-underline--font-weight: 400;

  --text-small-underline: 14px;
  --text-small-underline--line-height: 16px;
  --text-small-underline--letter-spacing: 0px;
  --text-small-underline--font-weight: 400;

  --text-medium-underline: 16px;
  --text-medium-underline--line-height: 20px;
  --text-medium-underline--letter-spacing: 0px;
  --text-medium-underline--font-weight: 400;

  --text-large-underline: 18px;
  --text-large-underline--line-height: 24px;
  --text-large-underline--letter-spacing: 0px;
  --text-large-underline--font-weight: 400;

  --text-x-large-underline: 24px;
  --text-x-large-underline--line-height: 28px;
  --text-x-large-underline--letter-spacing: 0px;
  --text-x-large-underline--font-weight: 400;

  --text-x-small-label: 12px;
  --text-x-small-label--line-height: 14px;
  --text-x-small-label--letter-spacing: 0px;
  --text-x-small-label--font-weight: 500;

  --text-x-small-label-caps: 10px;
  --text-x-small-label-caps--line-height: 12px;
  --text-x-small-label-caps--letter-spacing: 0px;
  --text-x-small-label-caps--font-weight: 500;

  --text-xx-small-heading: 16px;
  --text-xx-small-heading--line-height: 22px;
  --text-xx-small-heading--letter-spacing: 0px;
  --text-xx-small-heading--font-weight: 700;

  --text-x-small-display: 24px;
  --text-x-small-display--line-height: 24px;
  --text-x-small-display--letter-spacing: 0px;
  --text-x-small-display--font-weight: 400;

  --text-x-large-uppercase: 24px;
  --text-x-large-uppercase--line-height: 120%;
  --text-x-large-uppercase--letter-spacing: 0.48px;
  --text-x-large-uppercase--font-weight: 400;

  --text-xx-large-uppercase: 32px;
  --text-xx-large-uppercase--line-height: 120%;
  --text-xx-large-uppercase--letter-spacing: 0.64px;
  --text-xx-large-uppercase--font-weight: 400;

  --text-x-large-display: 64px;
  --text-x-large-display--line-height: 110%;
  --text-x-large-display--letter-spacing: 0px;
  --text-x-large-display--font-weight: 400;

  --text-large-display: 52px;
  --text-large-display--line-height: 110%;
  --text-large-display--letter-spacing: 0px;
  --text-large-display--font-weight: 400;

  --text-medium-display: 44px;
  --text-medium-display--line-height: 110%;
  --text-medium-display--letter-spacing: 0px;
  --text-medium-display--font-weight: 400;

  --text-xx-small-display: 18px;
  --text-xx-small-display--line-height: 120%;
  --text-xx-small-display--letter-spacing: 0px;
  --text-xx-small-display--font-weight: 400;

  --text-x-small-uppercase: 12px;
  --text-x-small-uppercase--line-height: 120%;
  --text-x-small-uppercase--letter-spacing: 0.24px;
  --text-x-small-uppercase--font-weight: 400;

  --text-large-uppercase: 18px;
  --text-large-uppercase--line-height: 120%;
  --text-large-uppercase--letter-spacing: 0.36px;
  --text-large-uppercase--font-weight: 400;

  --text-small-display: 36px;
  --text-small-display--line-height: 110%;
  --text-small-display--letter-spacing: 0px;
  --text-small-display--font-weight: 400;
}

@layer utilities {
  .text-x-small-heading {
    font-size: var(--text-x-small-heading);
    line-height: var(--text-x-small-heading--line-height);
    font-weight: var(--text-x-small-heading--font-weight);
    letter-spacing: var(--text-x-small-heading--letter-spacing);
  }
  .text-x-small-paragraph {
    font-size: var(--text-x-small-paragraph);
    line-height: var(--text-x-small-paragraph--line-height);
    font-weight: var(--text-x-small-paragraph--font-weight);
    letter-spacing: var(--text-x-small-paragraph--letter-spacing);
  }
}

@layer components {
  .xx-large-display {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-xx-large-display);
    font-weight: var(--text-xx-large-display--font-weight);
    line-height: var(--text-xx-large-display--line-height);
    letter-spacing: var(--text-xx-large-display--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-large-heading {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-xx-large-heading);
    font-weight: var(--text-xx-large-heading--font-weight);
    line-height: var(--text-xx-large-heading--line-height);
    letter-spacing: var(--text-xx-large-heading--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-large-heading {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-x-large-heading);
    font-weight: var(--text-x-large-heading--font-weight);
    line-height: var(--text-x-large-heading--line-height);
    letter-spacing: var(--text-x-large-heading--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .large-heading {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-large-heading);
    font-weight: var(--text-large-heading--font-weight);
    line-height: var(--text-large-heading--line-height);
    letter-spacing: var(--text-large-heading--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .medium-heading {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-medium-heading);
    font-weight: var(--text-medium-heading--font-weight);
    line-height: var(--text-medium-heading--line-height);
    letter-spacing: var(--text-medium-heading--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .small-heading {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-small-heading);
    font-weight: var(--text-small-heading--font-weight);
    line-height: var(--text-small-heading--line-height);
    letter-spacing: var(--text-small-heading--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-small-heading {
    font-family: var(--font-space-grotesk);
    font-size: var(--text-x-small-heading);
    font-weight: var(--text-x-small-heading--font-weight);
    line-height: var(--text-x-small-heading--line-height);
    letter-spacing: var(--text-x-small-heading--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .large-label {
    font-family: var(--font-inter);
    font-size: var(--text-large-label);
    font-weight: var(--text-large-label--font-weight);
    line-height: var(--text-large-label--line-height);
    letter-spacing: var(--text-large-label--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .medium-label {
    font-family: var(--font-inter);
    font-size: var(--text-medium-label);
    font-weight: var(--text-medium-label--font-weight);
    line-height: var(--text-medium-label--line-height);
    letter-spacing: var(--text-medium-label--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .small-label {
    font-family: var(--font-inter);
    font-size: var(--text-small-label);
    font-weight: var(--text-small-label--font-weight);
    line-height: var(--text-small-label--line-height);
    letter-spacing: var(--text-small-label--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  /* Regular 400 */
  .large-paragraph {
    font-family: var(--font-inter);
    font-size: var(--text-large-paragraph);
    font-weight: var(--text-large-paragraph--font-weight);
    line-height: var(--text-large-paragraph--line-height);
    letter-spacing: var(--text-large-paragraph--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .medium-paragraph {
    font-family: var(--font-inter);
    font-size: var(--text-medium-paragraph);
    font-weight: var(--text-medium-paragraph--font-weight);
    line-height: var(--text-medium-paragraph--line-height);
    letter-spacing: var(--text-medium-paragraph--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .small-paragraph {
    font-family: var(--font-inter);
    font-size: var(--text-small-paragraph);
    font-weight: var(--text-small-paragraph--font-weight);
    line-height: var(--text-small-paragraph--line-height);
    letter-spacing: var(--text-small-paragraph--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-small-paragraph {
    font-family: var(--font-inter);
    font-size: var(--text-x-small-paragraph);
    font-weight: var(--text-x-small-paragraph--font-weight);
    line-height: var(--text-x-small-paragraph--line-height);
    letter-spacing: var(--text-x-small-paragraph--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-small-label {
    font-family: var(--font-inter);
    font-size: var(--text-xx-small-label);
    font-weight: var(--text-xx-small-label--font-weight);
    line-height: var(--text-xx-small-label--line-height);
    letter-spacing: var(--text-xx-small-label--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-small-paragraph {
    font-family: var(--font-inter);
    font-size: var(--text-xx-small-paragraph);
    font-weight: var(--text-xx-small-paragraph--font-weight);
    line-height: var(--text-xx-small-paragraph--line-height);
    letter-spacing: var(--text-xx-small-paragraph--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-small-italic {
    font-family: var(--font-inter);
    font-size: var(--text-xx-small-italic);
    font-weight: var(--text-xx-small-italic--font-weight);
    line-height: var(--text-xx-small-italic--line-height);
    letter-spacing: var(--text-xx-small-italic--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-large-label {
    font-family: var(--font-inter);
    font-size: var(--text-x-large-label);
    font-weight: var(--text-x-large-label--font-weight);
    line-height: var(--text-x-large-label--line-height);
    letter-spacing: var(--text-x-large-label--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-large-paragraph {
    font-family: var(--font-inter);
    font-size: var(--text-x-large-paragraph);
    font-weight: var(--text-x-large-paragraph--font-weight);
    line-height: var(--text-x-large-paragraph--line-height);
    letter-spacing: var(--text-x-large-paragraph--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-large-paragraph {
    font-family: var(--font-inter);
    font-size: var(--text-xx-large-paragraph);
    font-weight: var(--text-xx-large-paragraph--font-weight);
    line-height: var(--text-xx-large-paragraph--line-height);
    letter-spacing: var(--text-xx-large-paragraph--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-large-label {
    font-family: var(--font-inter);
    font-size: var(--text-xx-large-label);
    font-weight: var(--text-xx-large-label--font-weight);
    line-height: var(--text-xx-large-label--line-height);
    letter-spacing: var(--text-xx-large-label--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-small-underline {
    font-family: var(--font-inter);
    font-size: var(--text-x-small-underline);
    font-weight: var(--text-x-small-underline--font-weight);
    line-height: var(--text-x-small-underline--line-height);
    letter-spacing: var(--text-x-small-underline--letter-spacing);
    text-decoration: underline;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .small-underline {
    font-family: var(--font-inter);
    font-size: var(--text-small-underline);
    font-weight: var(--text-small-underline--font-weight);
    line-height: var(--text-small-underline--line-height);
    letter-spacing: var(--text-small-underline--letter-spacing);
    text-decoration: underline;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .medium-underline {
    font-family: var(--font-inter);
    font-size: var(--text-medium-underline);
    font-weight: var(--text-medium-underline--font-weight);
    line-height: var(--text-medium-underline--line-height);
    letter-spacing: var(--text-medium-underline--letter-spacing);
    text-decoration: underline;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .large-underline {
    font-family: var(--font-inter);
    font-size: var(--text-large-underline);
    font-weight: var(--text-large-underline--font-weight);
    line-height: var(--text-large-underline--line-height);
    letter-spacing: var(--text-large-underline--letter-spacing);
    text-decoration: underline;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-large-underline {
    font-family: var(--font-inter);
    font-size: var(--text-x-large-underline);
    font-weight: var(--text-x-large-underline--font-weight);
    line-height: var(--text-x-large-underline--line-height);
    letter-spacing: var(--text-x-large-underline--letter-spacing);
    text-decoration: underline;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-small-label {
    font-family: var(--font-inter);
    font-size: var(--text-x-small-label);
    font-weight: var(--text-x-small-label--font-weight);
    line-height: var(--text-x-small-label--line-height);
    letter-spacing: var(--text-x-small-label--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-small-label-caps {
    font-family: var(--font-inter);
    font-size: var(--text-x-small-label-caps);
    font-weight: var(--text-x-small-label-caps--font-weight);
    line-height: var(--text-x-small-label-caps--line-height);
    letter-spacing: var(--text-x-small-label-caps--letter-spacing);
    text-decoration: none;
    text-transform: uppercase;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-small-heading {
    font-family: var(--font-inter);
    font-size: var(--text-xx-small-heading);
    font-weight: var(--text-xx-small-heading--font-weight);
    line-height: var(--text-xx-small-heading--line-height);
    letter-spacing: var(--text-xx-small-heading--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-small-display {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-x-small-display);
    font-weight: var(--text-x-small-display--font-weight);
    line-height: var(--text-x-small-display--line-height);
    letter-spacing: var(--text-x-small-display--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-large-uppercase {
    font-family: var(--font-inter);
    font-size: var(--text-x-large-uppercase);
    font-weight: var(--text-x-large-uppercase--font-weight);
    line-height: var(--text-x-large-uppercase--line-height);
    letter-spacing: var(--text-x-large-uppercase--letter-spacing);
    text-decoration: none;
    text-transform: uppercase;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-large-uppercase {
    font-family: var(--font-inter);
    font-size: var(--text-xx-large-uppercase);
    font-weight: var(--text-xx-large-uppercase--font-weight);
    line-height: var(--text-xx-large-uppercase--line-height);
    letter-spacing: var(--text-xx-large-uppercase--letter-spacing);
    text-decoration: none;
    text-transform: uppercase;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-large-display {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-x-large-display);
    font-weight: var(--text-x-large-display--font-weight);
    line-height: var(--text-x-large-display--line-height);
    letter-spacing: var(--text-x-large-display--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .large-display {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-large-display);
    font-weight: var(--text-large-display--font-weight);
    line-height: var(--text-large-display--line-height);
    letter-spacing: var(--text-large-display--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .medium-display {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-medium-display);
    font-weight: var(--text-medium-display--font-weight);
    line-height: var(--text-medium-display--line-height);
    letter-spacing: var(--text-medium-display--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .xx-small-display {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-xx-small-display);
    font-weight: var(--text-xx-small-display--font-weight);
    line-height: var(--text-xx-small-display--line-height);
    letter-spacing: var(--text-xx-small-display--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .x-small-uppercase {
    font-family: var(--font-inter);
    font-size: var(--text-x-small-uppercase);
    font-weight: var(--text-x-small-uppercase--font-weight);
    line-height: var(--text-x-small-uppercase--line-height);
    letter-spacing: var(--text-x-small-uppercase--letter-spacing);
    text-decoration: none;
    text-transform: uppercase;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .large-uppercase {
    font-family: var(--font-inter);
    font-size: var(--text-large-uppercase);
    font-weight: var(--text-large-uppercase--font-weight);
    line-height: var(--text-large-uppercase--line-height);
    letter-spacing: var(--text-large-uppercase--letter-spacing);
    text-decoration: none;
    text-transform: uppercase;
    text-indent: 0px;
    margin-bottom: 0px;
  }
  .small-display {
    font-family: var(--font-bricolage-grotesque);
    font-size: var(--text-small-display);
    font-weight: var(--text-small-display--font-weight);
    line-height: var(--text-small-display--line-height);
    letter-spacing: var(--text-small-display--letter-spacing);
    text-decoration: none;
    text-transform: none;
    text-indent: 0px;
    margin-bottom: 0px;
  }

  /* Blog post body styling with semantic spacing */
  .post-body p {
    /* Scales with font size - uses logical properties for better writing mode support */
    margin-block: 1em;
  }

  /* Extra blank lines from markdown -> visible gaps that scale with font size */
  .post-body .md-gap {
    /* Each "extra blank line" is one em; scales with font size */
    block-size: calc(1em * var(--gap, 1));
    margin: 0; /* no extra margins around the gap */
    line-height: 1; /* prevent tall line-height from compounding */
  }

  /* Heading rhythm for better typography */
  .post-body h1 {
    margin-block: 1.5em 0.6em;
  }
  .post-body h2 {
    margin-block: 1.4em 0.6em;
  }
  .post-body h3 {
    margin-block: 1.2em 0.5em;
  }
  .post-body h4 {
    margin-block: 1.1em 0.5em;
  }
  .post-body h5 {
    margin-block: 1em 0.4em;
  }
  .post-body h6 {
    margin-block: 1em 0.4em;
  }

  /* Ensure line breaks are visible */
  .post-body br {
    display: block;
  }
}