:root {
  --font-family-display: "Source Sans", sans-serif;
  --font-family-base: "Source Sans", sans-serif;
  /* Font Base (Source Sans) */
  --base-size-xxs: 0.625rem;
  /* 10px */
  --base-lh-xxs: 0.75rem;
  /* 12px */
  --base-size-xs: 0.75rem;
  /* 12px */
  --base-lh-xs: 1.125rem;
  /* 18px */
  --base-size-sm: 0.875rem;
  /* 14px */
  --base-lh-sm: 1.25rem;
  /* 20px */
  --base-size-md: 1rem;
  /* 16px */
  --base-lh-md: 1.5rem;
  /* 24px */
  --base-size-lg: 1.125rem;
  /* 18px */
  --base-lh-lg: 1.75rem;
  /* 28px */
  --base-size-xl: 1.25rem;
  /* 20px */
  --base-lh-xl: 1.875rem;
  /* 30px */
  --letter-spacing-base: 0.12em;
  --letter-spacing-sm: 0.025em;
  /* Font Display (Source Sans) */
  --display-size-xxs: 0.875rem;
  /* 14px */
  --display-lh-xxs: 1.25rem;
  /* 20px */
  --display-size-xs: 1rem;
  /* 16px */
  --display-lh-xs: 1.5rem;
  /* 24px */
  --display-size-sm: 1.25rem;
  /* 20px */
  --display-lh-sm: 1.75rem;
  /* 28px */
  --display-size-md: 1.5rem;
  /* 24px */
  --display-lh-md: 2rem;
  /* 32px */
  --display-size-lg: 1.875rem;
  /* 30px */
  --display-lh-lg: 2.25rem;
  /* 36px */
  --display-size-xl: 2.25rem;
  /* 36px */
  --display-lh-xl: 2.75rem;
  /* 44px */
  --display-size-2xl: 3rem;
  /* 48px */
  --display-lh-2xl: 3.75rem;
  /* 60px */
  --display-size-3xl: 4.5rem;
  /* 72px */
  --display-lh-3xl: 4.5rem;
  /* 72px */
  --fw-300: 300;
  /* Light */
  --fw-400: 400;
  /* Regular */
  --fw-500: 500;
  /* Medium */
  --fw-600: 600;
  /* Semi-bold */
  --fw-700: 700;
  /* Bold */
  --fw-800: 800;
  /* Extra-bold */
  --fw-900: 900;
  /* Black */

  /* spacing */
  --space-0: 0;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-30: 30px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-112: 112px;
  --space-128: 128px;
  --space-144: 144px;
  --space-160: 160px;
  --space-176: 176px;
  --space-192: 192px;
  --radius-0: 0;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-50: 50px;
  --radius-full: 9999px;
  --radius-half: 50%;
}

/* =========================================================
   COLOR PALETTE
   Extracted from the two uploaded PDFs
   ========================================================= */

:root {
  /* Base */
  --white: #ffffff;
  --black: #000000;
  --transparent: rgb(255 255 255 / 0%);

  /* Gray */
  --gray-25: #fdfcfc;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
  --gray-950: #0a0a0a;

  /* Brand / Tier 1 */
  --brand-25: #f9f4ff;
  --brand-50: #f3e9fb;
  --brand-100: #e1c9f0;
  --brand-200: #c19ade;
  --brand-300: #9a63c3;
  --brand-400: #7a3ca0;
  --brand-500: #61297f;

  /* Gold / Brand Tier 2 */
  --gold-25: #fffaf0;
  --gold-50: #fdf5e4;
  --gold-100: #f7e7c4;
  --gold-200: #f0d595;
  --gold-300: #f8bd3e;
  --gold-400: #ffc444;
  --gold-500: #dfa226;

  /* Success */
  --success-25: #f6fef9;
  --success-50: #ecfdf3;
  --success-100: #dcfae6;
  --success-200: #abefc6;
  --success-300: #75e0a7;
  --success-400: #47cd89;
  --success-500: #17b26a;
  --success-600: #079455;
  --success-700: #067647;
  --success-800: #085d3a;
  --success-900: #074d31;
  --success-950: #053321;

  /* Warning */
  --warning-25: #fffcf5;
  --warning-50: #fffaeb;
  --warning-100: #fef0c7;
  --warning-200: #fedf89;
  --warning-300: #fec84b;
  --warning-400: #fdb022;
  --warning-500: #f79009;
  --warning-600: #dc6803;
  --warning-700: #b54708;
  --warning-800: #93370d;
  --warning-900: #7a2e0e;
  --warning-950: #4e1d09;

  /* Error */
  --error-25: #fffbfa;
  --error-50: #fef3f2;
  --error-100: #fee4e2;
  --error-200: #fecdca;
  --error-300: #fda29b;
  --error-400: #f97066;
  --error-500: #f04438;
  --error-600: #d92d20;
  --error-700: #b42318;
  --error-800: #912018;
  --error-900: #7a271a;
  --error-950: #55160c;

  /* =========================================================
     SEMANTIC TOKENS - LIGHT
     ========================================================= */

  /* Text */
  --text-black-primary: var(--gray-900);
  --text-gray-secondary: var(--gray-600);
  --text-gray-tertiary: var(--gray-500);
  --text-quaternary: var(--gray-400);
  --text-gray-disabled: var(--gray-300);
  --text-white-primary: var(--white);
  --text-brand-primary: var(--brand-500);
  --text-brand-secondary: var(--brand-300);
  --text-brand-tertiary: var(--brand-200);
  --text-brand-quaternary: var(--brand-100);
  --text-brand-gold-primary: var(--gold-400);
  --text-error-primary: var(--error-600);
  --text-warning-primary: var(--warning-600);
  --text-success-primary: var(--success-600);
  --text-black: var(--black);

  /* Border */
  --border-primary: var(--gray-200);
  --border-secondary: var(--gray-100);
  --border-tertiary: var(--gray-50);
  --border-disabled: var(--gray-50);
  --border-brand: var(--brand-500);
  --border-brand-secondary: var(--brand-100);
  --border-brand-gold-primary: var(--gold-400);
  --border-error: var(--error-300);
  --border-warning-primary: var(--warning-600);
  --border-success-primary: var(--success-600);

  /* Icon */
  --icon-primary: var(--gray-400);
  --icon-secondary: var(--gray-300);
  --icon-tertiary: var(--gray-200);
  --icon-disabled: var(--gray-200);
  --icon-brand: var(--brand-500);
  --icon-brand-secondary: var(--brand-100);
  --icon-brand-gold-primary: var(--gold-400);
  --icon-error: var(--error-300);
  --icon-warning-primary: var(--warning-600);
  --icon-success-primary: var(--success-600);

  /* Foreground */
  --fg-black-primary: var(--gray-900);
  --fg-gray-secondary: var(--gray-700);
  --fg-gray-tertiary: var(--gray-600);
  --fg-quaternary: var(--gray-500);
  --fg-gray-disabled: var(--gray-400);
  --fg-white-primary: var(--white);
  --fg-lightgray-secondary: var(--gray-25);
  --fg-lightgray-tertiary: var(--gray-50);
  --fg-lightgray-quaternary: var(--gray-100);
  --fg-brand-primary: var(--brand-500);
  --fg-brand-secondary: var(--brand-300);
  --fg-brand-tertiary: var(--brand-200);
  --fg-brand-quaternary: var(--brand-25);
  --fg-brand-gold-primary: var(--gold-400);
  --fg-error-primary: var(--error-600);
  --fg-error-secondary: var(--error-500);
  --fg-warning-primary: var(--warning-600);
  --fg-warning-secondary: var(--warning-500);
  --fg-success-primary: var(--success-600);
  --fg-success-secondary: var(--success-500);
  --fg-primary: var(--gray-900);
  --fg-secondary: var(--gray-700);
  --fg-secondary-hover: var(--gray-800);
  --fg-tertiary: var(--gray-600);
  --fg-tertiary-hover: var(--gray-700);
  --fg-quaternary-hover: var(--gray-600);
  --fg-quinary: var(--gray-400);
  --fg-quinary-hover: var(--gray-500);
  --fg-senary: var(--gray-300);
  --fg-white: var(--white);
  --fg-disabled: var(--gray-400);
  --fg-disabled-subtle: var(--gray-300);
  --fg-brand-primary-alt: var(--brand-500);
  --fg-brand-secondary: var(--gold-400);

  /* Background */
  --bg-black-base: var(--black);
  --bg-black-primary: var(--gray-900);
  --bg-black-primary-alt: var(--gray-900);
  --bg-gray-secondary: var(--gray-600);
  --bg-gray-tertiary: var(--gray-500);
  --bg-quaternary: var(--gray-400);
  --bg-gray-disabled: var(--gray-300);
  --bg-primary: var(--white);
  --bg-white-primary: var(--white);
  --bg-lightgray-secondary: var(--gray-25);
  --bg-lightgray-tertiary: var(--gray-100);
  --bg-lightgray-quaternary: var(--gray-200);
  --bg-brand-primary: var(--brand-500);
  --bg-brand-primary-alt: var(--brand-500);
  --bg-brand-secondary: var(--brand-300);
  --bg-brand-tertiary: var(--brand-200);
  --bg-brand-quaternary: var(--brand-25);
  --bg-brand-gold-primary: var(--gold-400);
  --bg-error-primary: var(--error-600);
  --bg-error-secondary: var(--error-500);
  --bg-warning-primary: var(--warning-600);
  --bg-warning-secondary: var(--warning-500);
  --bg-success-primary: var(--success-600);
  --bg-success-secondary: var(--success-500);
  --bg-white-primary-alt: var(--white);
  --bg-brand-quaternary-alt: var(--brand-25);
  --bg-surface: var(--white);
  --bg-surface-hover: var(--gray-50);
}

[data-theme="dark"] {
  /* Text */
  --text-black-primary: var(--gray-50);
  --text-gray-secondary: var(--gray-200);
  --text-gray-tertiary: var(--gray-300);
  --text-quaternary: var(--gray-300);
  --text-gray-disabled: var(--gray-400);
  --text-white-primary: var(--white);
  --text-brand-primary: var(--white);
  --text-brand-secondary: var(--gray-100);
  --text-brand-tertiary: var(--gray-200);
  --text-brand-quaternary: var(--gray-300);
  --text-brand-gold-primary: var(--gold-300);
  --text-error-primary: var(--error-400);
  --text-warning-primary: var(--warning-400);
  --text-success-primary: var(--success-400);
  --text-black: var(--white);

  /* Border */
  --border-primary: var(--gray-400);
  --border-secondary: var(--gray-500);
  --border-tertiary: var(--gray-600);
  --border-disabled: var(--gray-600);
  --border-brand: var(--brand-400);
  --border-brand-secondary: var(--gray-100);
  --border-brand-gold-primary: var(--gold-300);
  --border-error: var(--error-400);
  --border-warning-primary: var(--warning-400);
  --border-success-primary: var(--success-400);

  /* Icon */
  --icon-primary: var(--gray-700);
  --icon-secondary: var(--gray-800);
  --icon-tertiary: var(--gray-800);
  --icon-disabled: var(--gray-700);
  --icon-brand: var(--brand-400);
  --icon-brand-secondary: var(--gray-100);
  --icon-brand-gold-primary: var(--gold-300);
  --icon-error: var(--error-400);
  --icon-warning-primary: var(--warning-400);
  --icon-success-primary: var(--success-400);

  /* Foreground */
  --fg-black-primary: var(--white);
  --fg-gray-secondary: var(--gray-300);
  --fg-gray-tertiary: var(--gray-400);
  --fg-quaternary: var(--gray-25);
  --fg-gray-disabled: var(--gray-500);
  --fg-white-primary: var(--white);
  --fg-lightgray-secondary: var(--gray-100);
  --fg-lightgray-tertiary: var(--gray-200);
  --fg-lightgray-quaternary: var(--gray-300);
  --fg-brand-primary: var(--brand-400);
  --fg-brand-secondary: var(--brand-200);
  --fg-brand-tertiary: var(--brand-100);
  --fg-brand-quaternary: var(--brand-25);
  --fg-brand-gold-primary: var(--gold-300);
  --fg-error-primary: var(--error-500);
  --fg-error-secondary: var(--error-400);
  --fg-warning-primary: var(--warning-500);
  --fg-warning-secondary: var(--warning-400);
  --fg-success-primary: var(--success-500);
  --fg-success-secondary: var(--success-400);
  --fg-primary: var(--white);
  --fg-secondary: var(--gray-300);
  --fg-secondary-hover: var(--gray-200);
  --fg-tertiary: var(--gray-400);
  --fg-tertiary-hover: var(--gray-300);
  --fg-quaternary-hover: var(--gray-300);
  --fg-quinary: var(--gray-500);
  --fg-quinary-hover: var(--gray-400);
  --fg-senary: var(--gray-600);
  --fg-white: var(--white);
  --fg-disabled: var(--gray-500);
  --fg-disabled-subtle: var(--gray-600);
  --fg-brand-primary-alt: var(--white);
  --fg-brand-secondary: var(--gold-300);

  /* Background */
  --bg-black-base: var(--black);
  --bg-black-primary: var(--white);
  --bg-black-primary-alt: var(--black);
  --bg-gray-secondary: var(--gray-200);
  --bg-gray-tertiary: var(--gray-300);
  --bg-quaternary: var(--gray-300);
  --bg-gray-disabled: var(--gray-400);
  --bg-primary: var(--gray-900);
  --bg-white-primary: var(--white);
  --bg-lightgray-secondary: var(--gray-100);
  --bg-lightgray-tertiary: var(--gray-800);
  --bg-lightgray-quaternary: var(--gray-300);
  --bg-brand-primary: var(--brand-300);
  --bg-brand-primary-alt: var(--gray-800);
  --bg-brand-secondary: var(--brand-200);
  --bg-brand-tertiary: var(--brand-100);
  --bg-brand-quaternary: var(--gray-800);
  --bg-brand-gold-primary: var(--gold-300);
  --bg-error-primary: var(--error-500);
  --bg-error-secondary: var(--error-400);
  --bg-warning-primary: var(--warning-500);
  --bg-warning-secondary: var(--warning-400);
  --bg-success-primary: var(--success-500);
  --bg-success-secondary: var(--success-400);
  --bg-white-primary-alt: var(--gray-800);
  --bg-brand-quaternary-alt: var(--gray-800);
  --bg-surface: var(--gray-800);
  --bg-surface-hover: var(--gray-700);
}

/* =========================================================
   TEXT COLOR UTILITIES
   Applies directly to the element and inherits to common children
   ========================================================= */

.text-black-primary,
.text-black-primary :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--text-black-primary);
}

.text-gold :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--gold-400);
}

.text-gray-secondary,
.text-gray-secondary :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--text-gray-secondary);
}

.text-gray-tertiary,
.text-gray-tertiary :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--text-gray-tertiary);
}

.text-quaternary,
.text-quaternary :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--text-quaternary);
}

.text-gray-disabled,
.text-gray-disabled :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--text-gray-disabled);
}

.text-white-primary,
.text-white-primary :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--text-white-primary);
}

.text-brand-primary,
.text-brand-primary :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--text-brand-primary);
}

.text-brand-secondary,
.text-brand-secondary :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--text-brand-secondary);
}

.text-brand-tertiary,
.text-brand-tertiary :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--text-brand-tertiary);
}

.text-brand-quaternary,
.text-brand-quaternary :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--text-brand-quaternary);
}

.text-on-brand-primary,
.text-on-brand-primary :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--brand-500);
}

.text-brand-gold-primary,
.text-brand-gold-primary :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--text-brand-gold-primary);
}

.text-error-primary,
.text-error-primary :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--text-error-primary);
}

.text-warning-primary,
.text-warning-primary :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--text-warning-primary);
}

.text-success-primary,
.text-success-primary :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--text-success-primary);
}

.text-black,
.text-black :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--text-black)
}

.text-white,
.text-white :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  td,
  th) {
  color: var(--white)
}

/* =========================================================
   FOREGROUND UTILITIES
   ========================================================= */

.fg-black-primary {
  color: var(--fg-black-primary);
}

.fg-gray-secondary {
  color: var(--fg-gray-secondary);
}

.fg-gray-tertiary {
  color: var(--fg-gray-tertiary);
}

.fg-quaternary {
  color: var(--fg-quaternary);
}

.fg-gray-disabled {
  color: var(--fg-gray-disabled);
}

.fg-white-primary {
  color: var(--fg-white-primary);
}

.fg-lightgray-secondary {
  color: var(--fg-lightgray-secondary);
}

.fg-lightgray-tertiary {
  color: var(--fg-lightgray-tertiary);
}

.fg-lightgray-quaternary {
  color: var(--fg-lightgray-quaternary);
}

.fg-brand-primary {
  color: var(--fg-brand-primary);
}

.fg-brand-secondary {
  color: var(--fg-brand-secondary);
}

.fg-brand-tertiary {
  color: var(--fg-brand-tertiary);
}

.fg-brand-quaternary {
  color: var(--fg-brand-quaternary);
}

.fg-brand-gold-primary {
  color: var(--fg-brand-gold-primary);
}

.fg-error-primary {
  color: var(--fg-error-primary);
}

.fg-error-secondary {
  color: var(--fg-error-secondary);
}

.fg-warning-primary {
  color: var(--fg-warning-primary);
}

.fg-warning-secondary {
  color: var(--fg-warning-secondary);
}

.fg-success-primary {
  color: var(--fg-success-primary);
}

.fg-success-secondary {
  color: var(--fg-success-secondary);
}

/* =========================================================
  ADDITIONAL FG UTILITIES (Figma spec additions)
  ========================================================= */

.fg-primary {
  color: var(--fg-primary);
}

.fg-secondary {
  color: var(--fg-secondary);
}

.fg-tertiary {
  color: var(--fg-tertiary);
}

.fg-disabled {
  color: var(--fg-disabled);
}

.fg-disabled-subtle {
  color: var(--fg-disabled-subtle);
}

.fg-white {
  color: var(--fg-white);
}

.fg-quinary {
  color: var(--fg-quinary);
}

.fg-senary {
  color: var(--fg-senary);
}

.fg-brand-primary-alt {
  color: var(--fg-brand-primary-alt);
}

.fg-brand-secondary {
  color: var(--fg-brand-secondary);
}

.fg-secondary-hover:hover {
  color: var(--fg-secondary-hover);
}

.fg-tertiary-hover:hover {
  color: var(--fg-tertiary-hover);
}

.fg-quaternary-hover:hover {
  color: var(--fg-quaternary-hover);
}

.fg-quinary-hover:hover {
  color: var(--fg-quinary-hover);
}

/* =========================================================
   BACKGROUND UTILITIES
   ========================================================= */

.bg-black-base {
  background-color: var(--bg-black-base);
}

.bg-black-primary {
  background-color: var(--bg-black-primary);
}

.bg-black-primary-alt {
  background-color: var(--bg-black-primary-alt);
}

.bg-gray-secondary {
  background-color: var(--bg-gray-secondary);
}

.bg-gray-tertiary {
  background-color: var(--bg-gray-tertiary);
}

.bg-primary {
  background-color: var(--bg-primary);
}

.bg-quaternary {
  background-color: var(--bg-quaternary);
}

.bg-gray-disabled {
  background-color: var(--bg-gray-disabled);
}

.bg-white-primary {
  background-color: var(--bg-white-primary);
}

.bg-lightgray-secondary {
  background-color: var(--bg-lightgray-secondary);
}

.bg-lightgray-tertiary {
  background-color: var(--bg-lightgray-tertiary);
}

.bg-lightgray-quaternary {
  background-color: var(--bg-lightgray-quaternary);
}

.bg-brand-primary {
  background-color: var(--bg-brand-primary);
}

.bg-brand-primary-alt {
  background-color: var(--bg-brand-primary-alt);
}

.bg-brand-secondary {
  background-color: var(--bg-brand-secondary);
}

.bg-brand-tertiary {
  background-color: var(--bg-brand-tertiary);
}

.bg-brand-quaternary {
  background-color: var(--bg-brand-quaternary);
}

.bg-brand-gold-primary {
  background-color: var(--bg-brand-gold-primary);
}

.bg-error-primary {
  background-color: var(--bg-error-primary);
}

.bg-error-secondary {
  background-color: var(--bg-error-secondary);
}

.bg-warning-primary {
  background-color: var(--bg-warning-primary);
}

.bg-warning-secondary {
  background-color: var(--bg-warning-secondary);
}

.bg-success-primary {
  background-color: var(--bg-success-primary);
}

.bg-success-secondary {
  background-color: var(--bg-success-secondary);
}

.bg-white-primary-alt {
  background-color: var(--bg-white-primary-alt);
}

.bg-brand-quaternary-alt {
  background-color: var(--bg-brand-quaternary-alt);
}

.bg-gold,
.bg-gold-primary {
  background-color: var(--gold-400);
}

/* =========================================================
   BORDER UTILITIES
   ========================================================= */

.border {
  border-style: solid;
  border-width: 1px;
}

.border-0 {
  border-width: 0;
}

.border-1 {
  border-style: solid;
  border-width: 1px;
}

.border-2 {
  border-style: solid;
  border-width: 2px;
}

.border-3 {
  border-style: solid;
  border-width: 3px;
}

.border-t {
  border-top-style: solid;
  border-top-width: 1px;
}

.border-r {
  border-right-style: solid;
  border-right-width: 1px;
}

.border-b {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.border-l {
  border-left-style: solid;
  border-left-width: 1px;
}

.border-t-0 {
  border-top-width: 0;
}

.border-r-0 {
  border-right-width: 0;
}

.border-b-0 {
  border-bottom-width: 0;
}

.border-l-0 {
  border-left-width: 0;
}

.border-t-1 {
  border-top-style: solid;
  border-top-width: 1px;
}

.border-r-1 {
  border-right-style: solid;
  border-right-width: 1px;
}

.border-b-1 {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.border-l-1 {
  border-left-style: solid;
  border-left-width: 1px;
}

.border-t-2 {
  border-top-style: solid;
  border-top-width: 2px;
}

.border-r-2 {
  border-right-style: solid;
  border-right-width: 2px;
}

.border-b-2 {
  border-bottom-style: solid;
  border-bottom-width: 2px;
}

.border-l-2 {
  border-left-style: solid;
  border-left-width: 2px;
}

.border-t-3 {
  border-top-style: solid;
  border-top-width: 3px;
}

.border-r-3 {
  border-right-style: solid;
  border-right-width: 3px;
}

.border-b-3 {
  border-bottom-style: solid;
  border-bottom-width: 3px;
}

.border-l-3 {
  border-left-style: solid;
  border-left-width: 3px;
}

.border-primary {
  border-color: var(--border-primary);
}

.border-secondary {
  border-color: var(--border-secondary);
}

.border-tertiary {
  border-color: var(--border-tertiary);
}

.border-disabled {
  border-color: var(--border-disabled);
}

.border-brand {
  border-color: var(--border-brand);
}

.border-brand-secondary {
  border-color: var(--border-brand-secondary);
}

.border-brand-gold-primary {
  border-color: var(--border-brand-gold-primary);
}

.border-error {
  border-color: var(--border-error);
}

.border-warning-primary {
  border-color: var(--border-warning-primary);
}

.border-success-primary {
  border-color: var(--border-success-primary);
}

.border-t-primary {
  border-top-color: var(--border-primary);
}

.border-t-secondary {
  border-top-color: var(--border-secondary);
}

.border-t-tertiary {
  border-top-color: var(--border-tertiary);
}

.border-t-disabled {
  border-top-color: var(--border-disabled);
}

.border-t-brand {
  border-top-color: var(--border-brand);
}

.border-t-brand-secondary {
  border-top-color: var(--border-brand-secondary);
}

.border-t-brand-gold-primary {
  border-top-color: var(--border-brand-gold-primary);
}

.border-t-error {
  border-top-color: var(--border-error);
}

.border-t-warning-primary {
  border-top-color: var(--border-warning-primary);
}

.border-t-success-primary {
  border-top-color: var(--border-success-primary);
}

.border-r-primary {
  border-right-color: var(--border-primary);
}

.border-r-secondary {
  border-right-color: var(--border-secondary);
}

.border-r-tertiary {
  border-right-color: var(--border-tertiary);
}

.border-r-disabled {
  border-right-color: var(--border-disabled);
}

.border-r-brand {
  border-right-color: var(--border-brand);
}

.border-r-brand-secondary {
  border-right-color: var(--border-brand-secondary);
}

.border-r-brand-gold-primary {
  border-right-color: var(--border-brand-gold-primary);
}

.border-r-error {
  border-right-color: var(--border-error);
}

.border-r-warning-primary {
  border-right-color: var(--border-warning-primary);
}

.border-r-success-primary {
  border-right-color: var(--border-success-primary);
}

.border-b-primary {
  border-bottom-color: var(--border-primary);
}

.border-b-secondary {
  border-bottom-color: var(--border-secondary);
}

.border-b-tertiary {
  border-bottom-color: var(--border-tertiary);
}

.border-b-disabled {
  border-bottom-color: var(--border-disabled);
}

.border-b-brand {
  border-bottom-color: var(--border-brand);
}

.border-b-brand-secondary {
  border-bottom-color: var(--border-brand-secondary);
}

.border-b-brand-gold-primary {
  border-bottom-color: var(--border-brand-gold-primary);
}

.border-b-error {
  border-bottom-color: var(--border-error);
}

.border-b-warning-primary {
  border-bottom-color: var(--border-warning-primary);
}

.border-b-success-primary {
  border-bottom-color: var(--border-success-primary);
}

.border-l-primary {
  border-left-color: var(--border-primary);
}

.border-l-secondary {
  border-left-color: var(--border-secondary);
}

.border-l-tertiary {
  border-left-color: var(--border-tertiary);
}

.border-l-disabled {
  border-left-color: var(--border-disabled);
}

.border-l-brand {
  border-left-color: var(--border-brand);
}

.border-l-brand-secondary {
  border-left-color: var(--border-brand-secondary);
}

.border-l-brand-gold-primary {
  border-left-color: var(--border-brand-gold-primary);
}

.border-l-error {
  border-left-color: var(--border-error);
}

.border-l-warning-primary {
  border-left-color: var(--border-warning-primary);
}

.border-l-success-primary {
  border-left-color: var(--border-success-primary);
}

/* =========================================================
   ICON UTILITIES
   ========================================================= */

.icon-primary {
  color: var(--icon-primary);
}

.icon-secondary {
  color: var(--icon-secondary);
}

.icon-tertiary {
  color: var(--icon-tertiary);
}

.icon-disabled {
  color: var(--icon-disabled);
}

.icon-brand {
  color: var(--icon-brand);
}

.icon-brand-secondary {
  color: var(--icon-brand-secondary);
}

.icon-brand-gold-primary {
  color: var(--icon-brand-gold-primary);
}

.icon-error {
  color: var(--icon-error);
}

.icon-warning-primary {
  color: var(--icon-warning-primary);
}

.icon-success-primary {
  color: var(--icon-success-primary);
}

.icon-primary svg,
.icon-secondary svg,
.icon-tertiary svg,
.icon-disabled svg,
.icon-brand svg,
.icon-brand-secondary svg,
.icon-brand-gold-primary svg,
.icon-error svg,
.icon-warning-primary svg,
.icon-success-primary svg {
  fill: currentColor;
  stroke: currentColor;
}

*,
::before,
::after {
  --fw-ring-inset: ;
  --fw-ring-offset-width: 0px;
  --fw-ring-offset-color: #ffffff;

  --ring: 220 8% 35%;
  --fw-ring-color: hsl(var(--ring) / 0.18);

  --fw-ring-offset-shadow: 0 0 #0000;
  --fw-ring-shadow: 0 0 #0000;

  --fw-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  --fw-shadow-colored: 0 8px 20px rgba(0, 0, 0, 0.05);
}

/* Base font sizes (Source) */
.base-xxs {
  font-size: var(--base-size-xxs);
  line-height: var(--base-lh-xxs);
}

.base-xxs :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-size: inherit;
  line-height: inherit;
}

.base-xs {
  font-size: var(--base-size-xs);
  line-height: var(--base-lh-xs);
}

.base-xs :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-size: inherit;
  line-height: inherit;
}

.base-sm {
  font-size: var(--base-size-sm);
  line-height: var(--base-lh-sm);
}

.base-sm :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-size: inherit;
  line-height: inherit;
}

.base-md {
  font-size: var(--base-size-md);
  line-height: var(--base-lh-md);
}

.base-md :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-size: inherit;
  line-height: inherit;
}

.base-lg {
  font-size: var(--base-size-lg);
  line-height: var(--base-lh-lg);
}

.base-lg :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-size: inherit;
  line-height: inherit;
}

.base-xl {
  font-size: var(--base-size-xl);
  line-height: var(--base-lh-xl);
}

.base-xl :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-size: inherit;
  line-height: inherit;
}

/* Display font sizes (Source Sans) */
.display-xxs {
  font-size: var(--display-size-xxs);
  line-height: var(--display-lh-xxs);
}

.display-xxs :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-size: inherit;
  line-height: inherit;
}

.display-xs {
  font-size: var(--display-size-xs);
  line-height: var(--display-lh-xs);
}

.display-xs :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-size: inherit;
  line-height: inherit;
}

.display-sm {
  font-size: var(--display-size-sm);
  line-height: var(--display-lh-sm);
}

.display-sm :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-size: inherit;
  line-height: inherit;
}

.display-md {
  font-size: var(--display-size-md);
  line-height: var(--display-lh-md);
}

.display-md :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-size: inherit;
  line-height: inherit;
}

.display-lg {
  font-size: var(--display-size-lg);
  line-height: var(--display-lh-lg);
}

.display-lg :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-size: inherit;
  line-height: inherit;
}

.display-xl {
  font-size: var(--display-size-xl);
  line-height: var(--display-lh-xl);
}

.display-xl :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-size: inherit;
  line-height: inherit;
}

.display-2xl {
  font-size: var(--display-size-2xl);
  line-height: var(--display-lh-2xl);
}

.display-2xl :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-size: inherit;
  line-height: inherit;
}

.display-3xl {
  font-size: var(--display-size-3xl);
  line-height: var(--display-lh-3xl);
}

.display-3xl :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-size: inherit;
  line-height: inherit;
}

.font-display,
.font-es-sans {
  font-family: var(--font-family-display);
}

.font-display :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th),
.font-es-sans :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-family: inherit;
}

.letter-spacing-base {
  letter-spacing: var(--letter-spacing-base);
}

.letter-spacing-base :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  letter-spacing: inherit;
}

.letter-spacing-sm {
  letter-spacing: var(--letter-spacing-sm);
}

.letter-spacing-sm :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  letter-spacing: inherit;
}

.font-base,
.font-source {
  font-family: var(--font-family-base);
}

.font-base :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th),
.font-source :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-family: inherit;
}

.fw-300 {
  font-weight: var(--fw-300);
}

.fw-300 :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-weight: inherit;
}

.fw-400 {
  font-weight: var(--fw-400);
}

.fw-400 :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-weight: inherit;
}

.fw-500 {
  font-weight: var(--fw-500);
}

.fw-500 :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-weight: inherit;
}

.fw-600 {
  font-weight: var(--fw-600);
}

.fw-600 :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-weight: inherit;
}

.fw-700 {
  font-weight: var(--fw-700);
}

.fw-700 :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-weight: inherit;
}

.fw-800 {
  font-weight: var(--fw-800);
}

.fw-800 :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-weight: inherit;
}

.fw-900 {
  font-weight: var(--fw-900);
}

.fw-900 :where(p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  strong,
  em,
  small,
  label,
  li,
  blockquote,
  table,
  thead,
  tbody,
  tfoot,
  tr,
  td,
  th) {
  font-weight: inherit;
}

/* Percentage-based widths */
.w-25 {
  width: 25%;
}

.w-33 {
  width: 33.333%;
}

.w-50 {
  width: 50%;
}

.w-66 {
  width: 66.666%;
}

.w-75 {
  width: 75%;
}

.w-100 {
  width: 100%;
}

/* Fixed widths */
.w-100px {
  width: 100px;
}

.w-200px {
  width: 200px;
}

.w-300px {
  width: 300px;
}

.w-400px {
  width: 400px;
}

.w-500px {
  width: 500px;
}

/* Max widths */
.max-w-sm {
  max-width: 480px;
}

.max-w-md {
  max-width: 768px;
}

.max-w-lg {
  max-width: 1024px;
}

.max-w-xl {
  max-width: 1280px;
}

.max-w-full {
  max-width: 100%;
}

.max-w-default {
  max-width: 1350px;
}

/* Auto */
.w-auto {
  width: auto;
}

/* tablet */
@media (max-width: 1024px) {
  .max-w-default {
    max-width: 680px;
  }

  .w-25,
  .w-33,
  .w-50,
  .w-66,
  .w-75,
  .w-100,
  .w-100px,
  .w-200px,
  .w-300px,
  .w-400px,
  .w-500px,
  .w-auto {
    width: 100% !important;
  }

  .max-w-sm,
  .max-w-md,
  .max-w-lg,
  .max-w-xl,
  .max-w-full {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* review */
@media (max-width: 1024px) {
  .display-3xl {
    font-size: var(--display-size-2xl);
    line-height: var(--display-lh-2xl);
  }

  .display-3xl :where(p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    span,
    a,
    strong,
    em,
    small,
    label,
    li,
    blockquote,
    table,
    thead,
    tbody,
    tfoot,
    tr,
    td,
    th) {
    font-size: inherit;
    line-height: inherit;
  }

  .display-2xl {
    font-size: var(--display-size-xl);
    line-height: var(--display-lh-xl);
  }

  .display-2xl :where(p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    span,
    a,
    strong,
    em,
    small,
    label,
    li,
    blockquote,
    table,
    thead,
    tbody,
    tfoot,
    tr,
    td,
    th) {
    font-size: inherit;
    line-height: inherit;
  }

  .display-xl {
    font-size: var(--display-size-lg);
    line-height: var(--display-lh-lg);
  }

  .display-xl :where(p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    span,
    a,
    strong,
    em,
    small,
    label,
    li,
    blockquote,
    table,
    thead,
    tbody,
    tfoot,
    tr,
    td,
    th) {
    font-size: inherit;
    line-height: inherit;
  }
}

/* Spacing Utilities */
.p-0 {
  padding: 0;
}

.p-2 {
  padding: var(--space-2);
}

.pt-2 {
  padding-top: var(--space-2);
}

.pb-2 {
  padding-bottom: var(--space-2);
}

.pl-2 {
  padding-left: var(--space-2);
}

.pr-2 {
  padding-right: var(--space-2);
}

.px-2 {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

.py-2 {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.p-4 {
  padding: var(--space-4);
}

.pt-4 {
  padding-top: var(--space-4);
}

.pb-4 {
  padding-bottom: var(--space-4);
}

.pl-4 {
  padding-left: var(--space-4);
}

.pr-4 {
  padding-right: var(--space-4);
}

.px-4 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.py-4 {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.p-8 {
  padding: var(--space-8);
}

.pt-8 {
  padding-top: var(--space-8);
}

.pb-8 {
  padding-bottom: var(--space-8);
}

.pl-8 {
  padding-left: var(--space-8);
}

.pr-8 {
  padding-right: var(--space-8);
}

.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.p-10 {
  padding: var(--space-10);
}

.pt-10 {
  padding-top: var(--space-10);
}

.pb-10 {
  padding-bottom: var(--space-10);
}

.pl-10 {
  padding-left: var(--space-10);
}

.pr-10 {
  padding-right: var(--space-10);
}

.px-10 {
  padding-left: var(--space-10);
  padding-right: var(--space-10);
}

.py-10 {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.p-12 {
  padding: var(--space-12);
}

.pt-12 {
  padding-top: var(--space-12);
}

.pb-12 {
  padding-bottom: var(--space-12);
}

.pl-12 {
  padding-left: var(--space-12);
}

.pr-12 {
  padding-right: var(--space-12);
}

.px-12 {
  padding-left: var(--space-12);
  padding-right: var(--space-12);
}

.py-12 {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.p-16 {
  padding: var(--space-16);
}

.pt-16 {
  padding-top: var(--space-16);
}

.pb-16 {
  padding-bottom: var(--space-16);
}

.pl-16 {
  padding-left: var(--space-16);
}

.pr-16 {
  padding-right: var(--space-16);
}

.px-16 {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}

.py-16 {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.p-20 {
  padding: var(--space-20);
}

.pt-20 {
  padding-top: var(--space-20);
}

.pb-20 {
  padding-bottom: var(--space-20);
}

.pl-20 {
  padding-left: var(--space-20);
}

.pr-20 {
  padding-right: var(--space-20);
}

.px-20 {
  padding-left: var(--space-20);
  padding-right: var(--space-20);
}

.py-20 {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.p-24 {
  padding: var(--space-24);
}

.pt-24 {
  padding-top: var(--space-24);
}

.pb-24 {
  padding-bottom: var(--space-24);
}

.pl-24 {
  padding-left: var(--space-24);
}

.pr-24 {
  padding-right: var(--space-24);
}

.px-24 {
  padding-left: var(--space-24);
  padding-right: var(--space-24);
}

.py-24 {
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.p-30 {
  padding: var(--space-30);
}

.pt-30 {
  padding-top: var(--space-30);
}

.pb-30 {
  padding-bottom: var(--space-30);
}

.pl-30 {
  padding-left: var(--space-30);
}

.pr-30 {
  padding-right: var(--space-30);
}

.px-30 {
  padding-left: var(--space-30);
  padding-right: var(--space-30);
}

.py-30 {
  padding-top: var(--space-30);
  padding-bottom: var(--space-30);
}

.p-32 {
  padding: var(--space-32);
}

.pt-32 {
  padding-top: var(--space-32);
}

.pb-32 {
  padding-bottom: var(--space-32);
}

.pl-32 {
  padding-left: var(--space-32);
}

.pr-32 {
  padding-right: var(--space-32);
}

.px-32 {
  padding-left: var(--space-32);
  padding-right: var(--space-32);
}

.py-32 {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

.p-40 {
  padding: var(--space-40);
}

.pt-40 {
  padding-top: var(--space-40);
}

.pb-40 {
  padding-bottom: var(--space-40);
}

.pl-40 {
  padding-left: var(--space-40);
}

.pr-40 {
  padding-right: var(--space-40);
}

.px-40 {
  padding-left: var(--space-40);
  padding-right: var(--space-40);
}

.py-40 {
  padding-top: var(--space-40);
  padding-bottom: var(--space-40);
}

.p-48 {
  padding: var(--space-48);
}

.pt-48 {
  padding-top: var(--space-48);
}

.pb-48 {
  padding-bottom: var(--space-48);
}

.pl-48 {
  padding-left: var(--space-48);
}

.pr-48 {
  padding-right: var(--space-48);
}

.px-48 {
  padding-left: var(--space-48);
  padding-right: var(--space-48);
}

.py-48 {
  padding-top: var(--space-48);
  padding-bottom: var(--space-48);
}

.p-56 {
  padding: var(--space-56);
}

.pt-56 {
  padding-top: var(--space-56);
}

.pb-56 {
  padding-bottom: var(--space-56);
}

.pl-56 {
  padding-left: var(--space-56);
}

.pr-56 {
  padding-right: var(--space-56);
}

.px-56 {
  padding-left: var(--space-56);
  padding-right: var(--space-56);
}

.py-56 {
  padding-top: var(--space-56);
  padding-bottom: var(--space-56);
}

.p-64 {
  padding: var(--space-64);
}

.pt-64 {
  padding-top: var(--space-64);
}

.pb-64 {
  padding-bottom: var(--space-64);
}

.pl-64 {
  padding-left: var(--space-64);
}

.pr-64 {
  padding-right: var(--space-64);
}

.px-64 {
  padding-left: var(--space-64);
  padding-right: var(--space-64);
}

.py-64 {
  padding-top: var(--space-64);
  padding-bottom: var(--space-64);
}

.p-80 {
  padding: var(--space-80);
}

.pt-80 {
  padding-top: var(--space-80);
}

.pb-80 {
  padding-bottom: var(--space-80);
}

.pl-80 {
  padding-left: var(--space-80);
}

.pr-80 {
  padding-right: var(--space-80);
}

.px-80 {
  padding-left: var(--space-80);
  padding-right: var(--space-80);
}

.py-80 {
  padding-top: var(--space-80);
  padding-bottom: var(--space-80);
}

.p-96 {
  padding: var(--space-96);
}

.pt-96 {
  padding-top: var(--space-96);
}

.pb-96 {
  padding-bottom: var(--space-96);
}

.pl-96 {
  padding-left: var(--space-96);
}

.pr-96 {
  padding-right: var(--space-96);
}

.px-96 {
  padding-left: var(--space-96);
  padding-right: var(--space-96);
}

.py-96 {
  padding-top: var(--space-96);
  padding-bottom: var(--space-96);
}

.p-112 {
  padding: var(--space-112);
}

.pt-112 {
  padding-top: var(--space-112);
}

.pb-112 {
  padding-bottom: var(--space-112);
}

.pl-112 {
  padding-left: var(--space-112);
}

.pr-112 {
  padding-right: var(--space-112);
}

.px-112 {
  padding-left: var(--space-112);
  padding-right: var(--space-112);
}

.py-112 {
  padding-top: var(--space-112);
  padding-bottom: var(--space-112);
}

.p-128 {
  padding: var(--space-128);
}

.pt-128 {
  padding-top: var(--space-128);
}

.pb-128 {
  padding-bottom: var(--space-128);
}

.pl-128 {
  padding-left: var(--space-128);
}

.pr-128 {
  padding-right: var(--space-128);
}

.px-128 {
  padding-left: var(--space-128);
  padding-right: var(--space-128);
}

.py-128 {
  padding-top: var(--space-128);
  padding-bottom: var(--space-128);
}

.py-144 {
  padding-top: var(--space-144);
  padding-bottom: var(--space-144);
}

.py-160 {
  padding-top: var(--space-160);
  padding-bottom: var(--space-160);
}

.py-176 {
  padding-top: var(--space-176);
  padding-bottom: var(--space-176);
}

.py-192 {
  padding-top: var(--space-192);
  padding-bottom: var(--space-192);
}

.m-0 {
  margin: 0;
}

.m-2 {
  margin: var(--space-2);
}

.mt-2 {
  margin-top: var(--space-2);
}

.mb-2 {
  margin-bottom: var(--space-2);
}

.ml-2 {
  margin-left: var(--space-2);
}

.mr-2 {
  margin-right: var(--space-2);
}

.mx-2 {
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}

.my-2 {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

.m-4 {
  margin: var(--space-4);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.ml-4 {
  margin-left: var(--space-4);
}

.mr-4 {
  margin-right: var(--space-4);
}

.mx-4 {
  margin-left: var(--space-4);
  margin-right: var(--space-4);
}

.my-4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.m-8 {
  margin: var(--space-8);
}

.mt-8 {
  margin-top: var(--space-8);
}

.mb-8 {
  margin-bottom: var(--space-8);
}

.ml-8 {
  margin-left: var(--space-8);
}

.mr-8 {
  margin-right: var(--space-8);
}

.mx-8 {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}

.my-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.m-10 {
  margin: var(--space-10);
}

.mt-10 {
  margin-top: var(--space-10);
}

.mb-10 {
  margin-bottom: var(--space-10);
}

.ml-10 {
  margin-left: var(--space-10);
}

.mr-10 {
  margin-right: var(--space-10);
}

.mx-10 {
  margin-left: var(--space-10);
  margin-right: var(--space-10);
}

.my-10 {
  margin-top: var(--space-10);
  margin-bottom: var(--space-10);
}

.m-12 {
  margin: var(--space-12);
}

.mt-12 {
  margin-top: var(--space-12);
}

.mb-12 {
  margin-bottom: var(--space-12);
}

.ml-12 {
  margin-left: var(--space-12);
}

.mr-12 {
  margin-right: var(--space-12);
}

.mx-12 {
  margin-left: var(--space-12);
  margin-right: var(--space-12);
}

.my-12 {
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
}

.m-16 {
  margin: var(--space-16);
}

.mt-16 {
  margin-top: var(--space-16);
}

.mb-16 {
  margin-bottom: var(--space-16);
}

.ml-16 {
  margin-left: var(--space-16);
}

.mr-16 {
  margin-right: var(--space-16);
}

.mx-16 {
  margin-left: var(--space-16);
  margin-right: var(--space-16);
}

.my-16 {
  margin-top: var(--space-16);
  margin-bottom: var(--space-16);
}

.m-20 {
  margin: var(--space-20);
}

.mt-20 {
  margin-top: var(--space-20);
}

.mb-20 {
  margin-bottom: var(--space-20);
}

.ml-20 {
  margin-left: var(--space-20);
}

.mr-20 {
  margin-right: var(--space-20);
}

.mx-20 {
  margin-left: var(--space-20);
  margin-right: var(--space-20);
}

.my-20 {
  margin-top: var(--space-20);
  margin-bottom: var(--space-20);
}

.m-24 {
  margin: var(--space-24);
}

.mt-24 {
  margin-top: var(--space-24);
}

.mb-24 {
  margin-bottom: var(--space-24);
}

.ml-24 {
  margin-left: var(--space-24);
}

.mr-24 {
  margin-right: var(--space-24);
}

.mx-24 {
  margin-left: var(--space-24);
  margin-right: var(--space-24);
}

.my-24 {
  margin-top: var(--space-24);
  margin-bottom: var(--space-24);
}

.m-30 {
  margin: var(--space-30);
}

.mt-30 {
  margin-top: var(--space-30);
}

.mb-30 {
  margin-bottom: var(--space-30);
}

.ml-30 {
  margin-left: var(--space-30);
}

.mr-30 {
  margin-right: var(--space-30);
}

.mx-30 {
  margin-left: var(--space-30);
  margin-right: var(--space-30);
}

.my-30 {
  margin-top: var(--space-30);
  margin-bottom: var(--space-30);
}

.m-32 {
  margin: var(--space-32);
}

.mt-32 {
  margin-top: var(--space-32);
}

.mb-32 {
  margin-bottom: var(--space-32);
}

.ml-32 {
  margin-left: var(--space-32);
}

.mr-32 {
  margin-right: var(--space-32);
}

.mx-32 {
  margin-left: var(--space-32);
  margin-right: var(--space-32);
}

.my-32 {
  margin-top: var(--space-32);
  margin-bottom: var(--space-32);
}

.m-40 {
  margin: var(--space-40);
}

.mt-40 {
  margin-top: var(--space-40);
}

.mb-40 {
  margin-bottom: var(--space-40);
}

.ml-40 {
  margin-left: var(--space-40);
}

.mr-40 {
  margin-right: var(--space-40);
}

.mx-40 {
  margin-left: var(--space-40);
  margin-right: var(--space-40);
}

.my-40 {
  margin-top: var(--space-40);
  margin-bottom: var(--space-40);
}

.m-48 {
  margin: var(--space-48);
}

.mt-48 {
  margin-top: var(--space-48);
}

.mb-48 {
  margin-bottom: var(--space-48);
}

.ml-48 {
  margin-left: var(--space-48);
}

.mr-48 {
  margin-right: var(--space-48);
}

.mx-48 {
  margin-left: var(--space-48);
  margin-right: var(--space-48);
}

.my-48 {
  margin-top: var(--space-48);
  margin-bottom: var(--space-48);
}

.m-56 {
  margin: var(--space-56);
}

.mt-56 {
  margin-top: var(--space-56);
}

.mb-56 {
  margin-bottom: var(--space-56);
}

.ml-56 {
  margin-left: var(--space-56);
}

.mr-56 {
  margin-right: var(--space-56);
}

.mx-56 {
  margin-left: var(--space-56);
  margin-right: var(--space-56);
}

.my-56 {
  margin-top: var(--space-56);
  margin-bottom: var(--space-56);
}

.m-64 {
  margin: var(--space-64);
}

.mt-64 {
  margin-top: var(--space-64);
}

.mb-64 {
  margin-bottom: var(--space-64);
}

.ml-64 {
  margin-left: var(--space-64);
}

.mr-64 {
  margin-right: var(--space-64);
}

.mx-64 {
  margin-left: var(--space-64);
  margin-right: var(--space-64);
}

.my-64 {
  margin-top: var(--space-64);
  margin-bottom: var(--space-64);
}

.m-80 {
  margin: var(--space-80);
}

.mt-80 {
  margin-top: var(--space-80);
}

.mb-80 {
  margin-bottom: var(--space-80);
}

.ml-80 {
  margin-left: var(--space-80);
}

.mr-80 {
  margin-right: var(--space-80);
}

.mx-80 {
  margin-left: var(--space-80);
  margin-right: var(--space-80);
}

.my-80 {
  margin-top: var(--space-80);
  margin-bottom: var(--space-80);
}

.m-96 {
  margin: var(--space-96);
}

.mt-96 {
  margin-top: var(--space-96);
}

.mb-96 {
  margin-bottom: var(--space-96);
}

.ml-96 {
  margin-left: var(--space-96);
}

.mr-96 {
  margin-right: var(--space-96);
}

.mx-96 {
  margin-left: var(--space-96);
  margin-right: var(--space-96);
}

.my-96 {
  margin-top: var(--space-96);
  margin-bottom: var(--space-96);
}

.m-112 {
  margin: var(--space-112);
}

.mt-112 {
  margin-top: var(--space-112);
}

.mb-112 {
  margin-bottom: var(--space-112);
}

.ml-112 {
  margin-left: var(--space-112);
}

.mr-112 {
  margin-right: var(--space-112);
}

.mx-112 {
  margin-left: var(--space-112);
  margin-right: var(--space-112);
}

.my-112 {
  margin-top: var(--space-112);
  margin-bottom: var(--space-112);
}

.m-auto,
.m-auto .e-con-inner {
  margin: auto;
}

.m-128 {
  margin: var(--space-128);
}

.mt-128 {
  margin-top: var(--space-128);
}

.mb-128 {
  margin-bottom: var(--space-128);
}

.ml-128 {
  margin-left: var(--space-128);
}

.mr-128 {
  margin-right: var(--space-128);
}

.mx-128 {
  margin-left: var(--space-128);
  margin-right: var(--space-128);
}

.my-128 {
  margin-top: var(--space-128);
  margin-bottom: var(--space-128);
}

.gap-0,
.gap-0 .e-con-inner {
  gap: 0;
}

.gap-2,
.gap-2 .e-con-inner {
  gap: var(--space-2);
}

.gap-4,
.gap-4 .e-con-inner {
  gap: var(--space-4);
}

.gap-8,
.gap-8 .e-con-inner {
  gap: var(--space-8);
}

.gap-10,
.gap-10 .e-con-inner {
  gap: var(--space-10);
}

.gap-12,
.gap-12 .e-con-inner {
  gap: var(--space-12);
}

.gap-16,
.gap-16 .e-con-inner {
  gap: var(--space-16);
}

.gap-20,
.gap-20 .e-con-inner {
  gap: var(--space-20);
}

.gap-24,
.gap-24 .e-con-inner {
  gap: var(--space-24);
}

.gap-30,
.gap-30 .e-con-inner {
  gap: var(--space-30);
}

.gap-32,
.gap-32 .e-con-inner {
  gap: var(--space-32);
}

.gap-40,
.gap-40 .e-con-inner {
  gap: var(--space-40);
}

.gap-48,
.gap-48 .e-con-inner {
  gap: var(--space-48);
}

.gap-56,
.gap-56 .e-con-inner {
  gap: var(--space-56);
}

.gap-64,
.gap-64 .e-con-inner {
  gap: var(--space-64);
}

.gap-80,
.gap-80 .e-con-inner {
  gap: var(--space-80);
}

.gap-96,
.gap-96 .e-con-inner {
  gap: var(--space-96);
}

.gap-112,
.gap-112 .e-con-inner {
  gap: var(--space-112);
}

.gap-128,
.gap-128 .e-con-inner {
  gap: var(--space-128);
}

/* 0px */
.radius-0 {
  border-radius: var(--radius-0);
  overflow: hidden;
}

.radius-t-0 {
  border-top-left-radius: var(--radius-0);
  border-top-right-radius: var(--radius-0);
  overflow: hidden;
}

.radius-b-0 {
  border-bottom-left-radius: var(--radius-0);
  border-bottom-right-radius: var(--radius-0);
  overflow: hidden;
}

.radius-l-0 {
  border-top-left-radius: var(--radius-0);
  border-bottom-left-radius: var(--radius-0);
  overflow: hidden;
}

.radius-r-0 {
  border-top-right-radius: var(--radius-0);
  border-bottom-right-radius: var(--radius-0);
  overflow: hidden;
}

/* 4px */
.radius-4 {
  border-radius: var(--radius-4);
  overflow: hidden;
}

.radius-t-4 {
  border-top-left-radius: var(--radius-4);
  border-top-right-radius: var(--radius-4);
  overflow: hidden;
}

.radius-b-4 {
  border-bottom-left-radius: var(--radius-4);
  border-bottom-right-radius: var(--radius-4);
  overflow: hidden;
}

.radius-l-4 {
  border-top-left-radius: var(--radius-4);
  border-bottom-left-radius: var(--radius-4);
  overflow: hidden;
}

.radius-r-4 {
  border-top-right-radius: var(--radius-4);
  border-bottom-right-radius: var(--radius-4);
  overflow: hidden;
}

/* 8px */
.radius-8 {
  border-radius: var(--radius-8);
  overflow: hidden;
}

.radius-t-8 {
  border-top-left-radius: var(--radius-8);
  border-top-right-radius: var(--radius-8);
  overflow: hidden;
}

.radius-b-8 {
  border-bottom-left-radius: var(--radius-8);
  border-bottom-right-radius: var(--radius-8);
  overflow: hidden;
}

.radius-l-8 {
  border-top-left-radius: var(--radius-8);
  border-bottom-left-radius: var(--radius-8);
  overflow: hidden;
}

.radius-r-8 {
  border-top-right-radius: var(--radius-8);
  border-bottom-right-radius: var(--radius-8);
  overflow: hidden;
}

/* 12px */
.radius-12 {
  border-radius: var(--radius-12);
  overflow: hidden;
}

.radius-t-12 {
  border-top-left-radius: var(--radius-12);
  border-top-right-radius: var(--radius-12);
  overflow: hidden;
}

.radius-b-12 {
  border-bottom-left-radius: var(--radius-12);
  border-bottom-right-radius: var(--radius-12);
  overflow: hidden;
}

.radius-l-12 {
  border-top-left-radius: var(--radius-12);
  border-bottom-left-radius: var(--radius-12);
  overflow: hidden;
}

.radius-r-12 {
  border-top-right-radius: var(--radius-12);
  border-bottom-right-radius: var(--radius-12);
  overflow: hidden;
}

/* 16px */
.radius-16.radius-16 {
  border-radius: var(--radius-16);
  overflow: hidden;
}

.radius-t-16 {
  border-top-left-radius: var(--radius-16);
  border-top-right-radius: var(--radius-16);
  overflow: hidden;
}

.radius-b-16 {
  border-bottom-left-radius: var(--radius-16);
  border-bottom-right-radius: var(--radius-16);
  overflow: hidden;
}

.radius-l-16 {
  border-top-left-radius: var(--radius-16);
  border-bottom-left-radius: var(--radius-16);
  overflow: hidden;
}

.radius-r-16 {
  border-top-right-radius: var(--radius-16);
  border-bottom-right-radius: var(--radius-16);
  overflow: hidden;
}

.radius-20 {
  border-radius: var(--radius-20);
  overflow: hidden;
}

.radius-t-20 {
  border-top-left-radius: var(--radius-20);
  border-top-right-radius: var(--radius-20);
  overflow: hidden;
}

.radius-b-20 {
  border-bottom-left-radius: var(--radius-20);
  border-bottom-right-radius: var(--radius-20);
  overflow: hidden;
}

.radius-l-20 {
  border-top-left-radius: var(--radius-20);
  border-bottom-left-radius: var(--radius-20);
  overflow: hidden;
}

.radius-r-20 {
  border-top-right-radius: var(--radius-20);
  border-bottom-right-radius: var(--radius-20);
  overflow: hidden;
}

/* 24px */
.radius-24 {
  border-radius: var(--radius-24);
  overflow: hidden;
}

.radius-t-24 {
  border-top-left-radius: var(--radius-24);
  border-top-right-radius: var(--radius-24);
  overflow: hidden;
}

.radius-b-24 {
  border-bottom-left-radius: var(--radius-24);
  border-bottom-right-radius: var(--radius-24);
  overflow: hidden;
}

.radius-l-24 {
  border-top-left-radius: var(--radius-24);
  border-bottom-left-radius: var(--radius-24);
  overflow: hidden;
}

.radius-r-24 {
  border-top-right-radius: var(--radius-24);
  border-bottom-right-radius: var(--radius-24);
  overflow: hidden;
}

/* 32px */
.radius-32 {
  border-radius: var(--radius-32);
  overflow: hidden;
}

.radius-t-32 {
  border-top-left-radius: var(--radius-32);
  border-top-right-radius: var(--radius-32);
  overflow: hidden;
}

.radius-b-32 {
  border-bottom-left-radius: var(--radius-32);
  border-bottom-right-radius: var(--radius-32);
  overflow: hidden;
}

.radius-l-32 {
  border-top-left-radius: var(--radius-32);
  border-bottom-left-radius: var(--radius-32);
  overflow: hidden;
}

.radius-r-32 {
  border-top-right-radius: var(--radius-32);
  border-bottom-right-radius: var(--radius-32);
  overflow: hidden;
}

.radius-50 {
  border-radius: var(--radius-50);
  overflow: hidden;
}

.radius-full {
  border-radius: var(--radius-full);
  overflow: hidden;
}

.radius-half {
  border-radius: var(--radius-half);
  overflow: hidden;
}

/* .radius-pill {
  border-radius: var(--radius-full);
  overflow: hidden;
} */
.text-uppercase {
  text-transform: uppercase;
}

.text-italic {
  font-style: italic;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* .radius-md {
  border-radius: var(--radius-md, 8px);
} */
/* [class^="border-"], [class*=" border-"] {
     border-width: 1px;
     border-style: solid;
}
 */
/* tablet */
@media (max-width: 1024px) {
  .max-w-default {
    max-width: 680px;
  }

  .w-25,
  .w-33,
  .w-50,
  .w-66,
  .w-75,
  .w-100,
  .w-100px,
  .w-200px,
  .w-300px,
  .w-400px,
  .w-500px,
  .w-auto {
    width: 100% !important;
  }

  .max-w-sm,
  .max-w-md,
  .max-w-lg,
  .max-w-xl,
  .max-w-full {
    width: 100% !important;
    max-width: 100% !important;
  }

  .smd-p_0 {
    padding: 0;
  }

  .smd-pt_0 {
    padding-top: 0;
  }

  .smd-pb_0 {
    padding-bottom: 0;
  }

  .smd-pl_0 {
    padding-left: 0;
  }

  .smd-pr_0 {
    padding-right: 0;
  }

  .smd-px_0 {
    padding-left: 0;
    padding-right: 0;
  }

  .smd-py_0 {
    padding-top: 0;
    padding-bottom: 0;
  }

  .smd-m_0 {
    margin: 0;
  }

  .smd-mt_0 {
    margin-top: 0;
  }

  .smd-mb_0 {
    margin-bottom: 0;
  }

  .smd-ml_0 {
    margin-left: 0;
  }

  .smd-mr_0 {
    margin-right: 0;
  }

  .smd-mx_0 {
    margin-left: 0;
    margin-right: 0;
  }

  .smd-my_0 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .smd-gap_0,
  .smd-gap_0 .e-con-inner {
    gap: 0;
  }

  .smd-p_2 {
    padding: var(--space-2);
  }

  .smd-pt_2 {
    padding-top: var(--space-2);
  }

  .smd-pb_2 {
    padding-bottom: var(--space-2);
  }

  .smd-pl_2 {
    padding-left: var(--space-2);
  }

  .smd-pr_2 {
    padding-right: var(--space-2);
  }

  .smd-px_2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .smd-py_2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }

  .smd-m_2 {
    margin: var(--space-2);
  }

  .smd-mt_2 {
    margin-top: var(--space-2);
  }

  .smd-mb_2 {
    margin-bottom: var(--space-2);
  }

  .smd-ml_2 {
    margin-left: var(--space-2);
  }

  .smd-mr_2 {
    margin-right: var(--space-2);
  }

  .smd-mx_2 {
    margin-left: var(--space-2);
    margin-right: var(--space-2);
  }

  .smd-my_2 {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .smd-gap_2,
  .smd-gap_2 .e-con-inner {
    gap: var(--space-2);
  }

  .smd-p_4 {
    padding: var(--space-4);
  }

  .smd-pt_4 {
    padding-top: var(--space-4);
  }

  .smd-pb_4 {
    padding-bottom: var(--space-4);
  }

  .smd-pl_4 {
    padding-left: var(--space-4);
  }

  .smd-pr_4 {
    padding-right: var(--space-4);
  }

  .smd-px_4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .smd-py_4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .smd-m_4 {
    margin: var(--space-4);
  }

  .smd-mt_4 {
    margin-top: var(--space-4);
  }

  .smd-mb_4 {
    margin-bottom: var(--space-4);
  }

  .smd-ml_4 {
    margin-left: var(--space-4);
  }

  .smd-mr_4 {
    margin-right: var(--space-4);
  }

  .smd-mx_4 {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
  }

  .smd-my_4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .smd-gap_4,
  .smd-gap_4 .e-con-inner {
    gap: var(--space-4);
  }

  .smd-p_8 {
    padding: var(--space-8);
  }

  .smd-pt_8 {
    padding-top: var(--space-8);
  }

  .smd-pb_8 {
    padding-bottom: var(--space-8);
  }

  .smd-pl_8 {
    padding-left: var(--space-8);
  }

  .smd-pr_8 {
    padding-right: var(--space-8);
  }

  .smd-px_8 {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  .smd-py_8 {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }

  .smd-m_8 {
    margin: var(--space-8);
  }

  .smd-mt_8 {
    margin-top: var(--space-8);
  }

  .smd-mb_8 {
    margin-bottom: var(--space-8);
  }

  .smd-ml_8 {
    margin-left: var(--space-8);
  }

  .smd-mr_8 {
    margin-right: var(--space-8);
  }

  .smd-mx_8 {
    margin-left: var(--space-8);
    margin-right: var(--space-8);
  }

  .smd-my_8 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
  }

  .smd-gap_8,
  .smd-gap_8 .e-con-inner {
    gap: var(--space-8);
  }

  .smd-p_10 {
    padding: var(--space-10);
  }

  .smd-pt_10 {
    padding-top: var(--space-10);
  }

  .smd-pb_10 {
    padding-bottom: var(--space-10);
  }

  .smd-pl_10 {
    padding-left: var(--space-10);
  }

  .smd-pr_10 {
    padding-right: var(--space-10);
  }

  .smd-px_10 {
    padding-left: var(--space-10);
    padding-right: var(--space-10);
  }

  .smd-py_10 {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .smd-m_10 {
    margin: var(--space-10);
  }

  .smd-mt_10 {
    margin-top: var(--space-10);
  }

  .smd-mb_10 {
    margin-bottom: var(--space-10);
  }

  .smd-ml_10 {
    margin-left: var(--space-10);
  }

  .smd-mr_10 {
    margin-right: var(--space-10);
  }

  .smd-mx_10 {
    margin-left: var(--space-10);
    margin-right: var(--space-10);
  }

  .smd-my_10 {
    margin-top: var(--space-10);
    margin-bottom: var(--space-10);
  }

  .smd-gap_10,
  .smd-gap_10 .e-con-inner {
    gap: var(--space-10);
  }

  .smd-p_12 {
    padding: var(--space-12);
  }

  .smd-pt_12 {
    padding-top: var(--space-12);
  }

  .smd-pb_12 {
    padding-bottom: var(--space-12);
  }

  .smd-pl_12 {
    padding-left: var(--space-12);
  }

  .smd-pr_12 {
    padding-right: var(--space-12);
  }

  .smd-px_12 {
    padding-left: var(--space-12);
    padding-right: var(--space-12);
  }

  .smd-py_12 {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }

  .smd-m_12 {
    margin: var(--space-12);
  }

  .smd-mt_12 {
    margin-top: var(--space-12);
  }

  .smd-mb_12 {
    margin-bottom: var(--space-12);
  }

  .smd-ml_12 {
    margin-left: var(--space-12);
  }

  .smd-mr_12 {
    margin-right: var(--space-12);
  }

  .smd-mx_12 {
    margin-left: var(--space-12);
    margin-right: var(--space-12);
  }

  .smd-my_12 {
    margin-top: var(--space-12);
    margin-bottom: var(--space-12);
  }

  .smd-gap_12,
  .smd-gap_12 .e-con-inner {
    gap: var(--space-12);
  }

  .smd-p_16 {
    padding: var(--space-16);
  }

  .smd-pt_16 {
    padding-top: var(--space-16);
  }

  .smd-pb_16 {
    padding-bottom: var(--space-16);
  }

  .smd-pl_16 {
    padding-left: var(--space-16);
  }

  .smd-pr_16 {
    padding-right: var(--space-16);
  }

  .smd-px_16 {
    padding-left: var(--space-16);
    padding-right: var(--space-16);
  }

  .smd-py_16 {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }

  .smd-m_16 {
    margin: var(--space-16);
  }

  .smd-mt_16 {
    margin-top: var(--space-16);
  }

  .smd-mb_16 {
    margin-bottom: var(--space-16);
  }

  .smd-ml_16 {
    margin-left: var(--space-16);
  }

  .smd-mr_16 {
    margin-right: var(--space-16);
  }

  .smd-mx_16 {
    margin-left: var(--space-16);
    margin-right: var(--space-16);
  }

  .smd-my_16 {
    margin-top: var(--space-16);
    margin-bottom: var(--space-16);
  }

  .smd-gap_16,
  .smd-gap_16 .e-con-inner {
    gap: var(--space-16);
  }

  .smd-p_20 {
    padding: var(--space-20);
  }

  .smd-pt_20 {
    padding-top: var(--space-20);
  }

  .smd-pb_20 {
    padding-bottom: var(--space-20);
  }

  .smd-pl_20 {
    padding-left: var(--space-20);
  }

  .smd-pr_20 {
    padding-right: var(--space-20);
  }

  .smd-px_20 {
    padding-left: var(--space-20);
    padding-right: var(--space-20);
  }

  .smd-py_20 {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }

  .smd-m_20 {
    margin: var(--space-20);
  }

  .smd-mt_20 {
    margin-top: var(--space-20);
  }

  .smd-mb_20 {
    margin-bottom: var(--space-20);
  }

  .smd-ml_20 {
    margin-left: var(--space-20);
  }

  .smd-mr_20 {
    margin-right: var(--space-20);
  }

  .smd-mx_20 {
    margin-left: var(--space-20);
    margin-right: var(--space-20);
  }

  .smd-my_20 {
    margin-top: var(--space-20);
    margin-bottom: var(--space-20);
  }

  .smd-gap_20,
  .smd-gap_20 .e-con-inner {
    gap: var(--space-20);
  }

  .smd-p_24 {
    padding: var(--space-24);
  }

  .smd-pt_24 {
    padding-top: var(--space-24);
  }

  .smd-pb_24 {
    padding-bottom: var(--space-24);
  }

  .smd-pl_24 {
    padding-left: var(--space-24);
  }

  .smd-pr_24 {
    padding-right: var(--space-24);
  }

  .smd-px_24 {
    padding-left: var(--space-24);
    padding-right: var(--space-24);
  }

  .smd-py_24 {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }

  .smd-m_24 {
    margin: var(--space-24);
  }

  .smd-mt_24 {
    margin-top: var(--space-24);
  }

  .smd-mb_24 {
    margin-bottom: var(--space-24);
  }

  .smd-ml_24 {
    margin-left: var(--space-24);
  }

  .smd-mr_24 {
    margin-right: var(--space-24);
  }

  .smd-mx_24 {
    margin-left: var(--space-24);
    margin-right: var(--space-24);
  }

  .smd-my_24 {
    margin-top: var(--space-24);
    margin-bottom: var(--space-24);
  }

  .smd-gap_24,
  .smd-gap_24 .e-con-inner {
    gap: var(--space-24);
  }

  .smd-p_30 {
    padding: var(--space-30);
  }

  .smd-pt_30 {
    padding-top: var(--space-30);
  }

  .smd-pb_30 {
    padding-bottom: var(--space-30);
  }

  .smd-pl_30 {
    padding-left: var(--space-30);
  }

  .smd-pr_30 {
    padding-right: var(--space-30);
  }

  .smd-px_30 {
    padding-left: var(--space-30);
    padding-right: var(--space-30);
  }

  .smd-py_30 {
    padding-top: var(--space-30);
    padding-bottom: var(--space-30);
  }

  .smd-m_30 {
    margin: var(--space-30);
  }

  .smd-mt_30 {
    margin-top: var(--space-30);
  }

  .smd-mb_30 {
    margin-bottom: var(--space-30);
  }

  .smd-ml_30 {
    margin-left: var(--space-30);
  }

  .smd-mr_30 {
    margin-right: var(--space-30);
  }

  .smd-mx_30 {
    margin-left: var(--space-30);
    margin-right: var(--space-30);
  }

  .smd-my_30 {
    margin-top: var(--space-30);
    margin-bottom: var(--space-30);
  }

  .smd-gap_30,
  .smd-gap_30 .e-con-inner {
    gap: var(--space-30);
  }

  .smd-p_32 {
    padding: var(--space-32);
  }

  .smd-pt_32 {
    padding-top: var(--space-32);
  }

  .smd-pb_32 {
    padding-bottom: var(--space-32);
  }

  .smd-pl_32 {
    padding-left: var(--space-32);
  }

  .smd-pr_32 {
    padding-right: var(--space-32);
  }

  .smd-px_32 {
    padding-left: var(--space-32);
    padding-right: var(--space-32);
  }

  .smd-py_32 {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
  }

  .smd-m_32 {
    margin: var(--space-32);
  }

  .smd-mt_32 {
    margin-top: var(--space-32);
  }

  .smd-mb_32 {
    margin-bottom: var(--space-32);
  }

  .smd-ml_32 {
    margin-left: var(--space-32);
  }

  .smd-mr_32 {
    margin-right: var(--space-32);
  }

  .smd-mx_32 {
    margin-left: var(--space-32);
    margin-right: var(--space-32);
  }

  .smd-my_32 {
    margin-top: var(--space-32);
    margin-bottom: var(--space-32);
  }

  .smd-gap_32,
  .smd-gap_32 .e-con-inner {
    gap: var(--space-32);
  }

  .smd-p_40 {
    padding: var(--space-40);
  }

  .smd-pt_40 {
    padding-top: var(--space-40);
  }

  .smd-pb_40 {
    padding-bottom: var(--space-40);
  }

  .smd-pl_40 {
    padding-left: var(--space-40);
  }

  .smd-pr_40 {
    padding-right: var(--space-40);
  }

  .smd-px_40 {
    padding-left: var(--space-40);
    padding-right: var(--space-40);
  }

  .smd-py_40 {
    padding-top: var(--space-40);
    padding-bottom: var(--space-40);
  }

  .smd-m_40 {
    margin: var(--space-40);
  }

  .smd-mt_40 {
    margin-top: var(--space-40);
  }

  .smd-mb_40 {
    margin-bottom: var(--space-40);
  }

  .smd-ml_40 {
    margin-left: var(--space-40);
  }

  .smd-mr_40 {
    margin-right: var(--space-40);
  }

  .smd-mx_40 {
    margin-left: var(--space-40);
    margin-right: var(--space-40);
  }

  .smd-my_40 {
    margin-top: var(--space-40);
    margin-bottom: var(--space-40);
  }

  .smd-gap_40,
  .smd-gap_40 .e-con-inner {
    gap: var(--space-40);
  }

  .smd-p_48 {
    padding: var(--space-48);
  }

  .smd-pt_48 {
    padding-top: var(--space-48);
  }

  .smd-pb_48 {
    padding-bottom: var(--space-48);
  }

  .smd-pl_48 {
    padding-left: var(--space-48);
  }

  .smd-pr_48 {
    padding-right: var(--space-48);
  }

  .smd-px_48 {
    padding-left: var(--space-48);
    padding-right: var(--space-48);
  }

  .smd-py_48 {
    padding-top: var(--space-48);
    padding-bottom: var(--space-48);
  }

  .smd-m_48 {
    margin: var(--space-48);
  }

  .smd-mt_48 {
    margin-top: var(--space-48);
  }

  .smd-mb_48 {
    margin-bottom: var(--space-48);
  }

  .smd-ml_48 {
    margin-left: var(--space-48);
  }

  .smd-mr_48 {
    margin-right: var(--space-48);
  }

  .smd-mx_48 {
    margin-left: var(--space-48);
    margin-right: var(--space-48);
  }

  .smd-my_48 {
    margin-top: var(--space-48);
    margin-bottom: var(--space-48);
  }

  .smd-gap_48,
  .smd-gap_48 .e-con-inner {
    gap: var(--space-48);
  }

  .smd-p_56 {
    padding: var(--space-56);
  }

  .smd-pt_56 {
    padding-top: var(--space-56);
  }

  .smd-pb_56 {
    padding-bottom: var(--space-56);
  }

  .smd-pl_56 {
    padding-left: var(--space-56);
  }

  .smd-pr_56 {
    padding-right: var(--space-56);
  }

  .smd-px_56 {
    padding-left: var(--space-56);
    padding-right: var(--space-56);
  }

  .smd-py_56 {
    padding-top: var(--space-56);
    padding-bottom: var(--space-56);
  }

  .smd-m_56 {
    margin: var(--space-56);
  }

  .smd-mt_56 {
    margin-top: var(--space-56);
  }

  .smd-mb_56 {
    margin-bottom: var(--space-56);
  }

  .smd-ml_56 {
    margin-left: var(--space-56);
  }

  .smd-mr_56 {
    margin-right: var(--space-56);
  }

  .smd-mx_56 {
    margin-left: var(--space-56);
    margin-right: var(--space-56);
  }

  .smd-my_56 {
    margin-top: var(--space-56);
    margin-bottom: var(--space-56);
  }

  .smd-gap_56,
  .smd-gap_56 .e-con-inner {
    gap: var(--space-56);
  }

  .smd-p_64 {
    padding: var(--space-64);
  }

  .smd-pt_64 {
    padding-top: var(--space-64);
  }

  .smd-pb_64 {
    padding-bottom: var(--space-64);
  }

  .smd-pl_64 {
    padding-left: var(--space-64);
  }

  .smd-pr_64 {
    padding-right: var(--space-64);
  }

  .smd-px_64 {
    padding-left: var(--space-64);
    padding-right: var(--space-64);
  }

  .smd-py_64 {
    padding-top: var(--space-64);
    padding-bottom: var(--space-64);
  }

  .smd-m_64 {
    margin: var(--space-64);
  }

  .smd-mt_64 {
    margin-top: var(--space-64);
  }

  .smd-mb_64 {
    margin-bottom: var(--space-64);
  }

  .smd-ml_64 {
    margin-left: var(--space-64);
  }

  .smd-mr_64 {
    margin-right: var(--space-64);
  }

  .smd-mx_64 {
    margin-left: var(--space-64);
    margin-right: var(--space-64);
  }

  .smd-my_64 {
    margin-top: var(--space-64);
    margin-bottom: var(--space-64);
  }

  .smd-gap_64,
  .smd-gap_64 .e-con-inner {
    gap: var(--space-64);
  }

  .smd-p_80 {
    padding: var(--space-80);
  }

  .smd-pt_80 {
    padding-top: var(--space-80);
  }

  .smd-pb_80 {
    padding-bottom: var(--space-80);
  }

  .smd-pl_80 {
    padding-left: var(--space-80);
  }

  .smd-pr_80 {
    padding-right: var(--space-80);
  }

  .smd-px_80 {
    padding-left: var(--space-80);
    padding-right: var(--space-80);
  }

  .smd-py_80 {
    padding-top: var(--space-80);
    padding-bottom: var(--space-80);
  }

  .smd-m_80 {
    margin: var(--space-80);
  }

  .smd-mt_80 {
    margin-top: var(--space-80);
  }

  .smd-mb_80 {
    margin-bottom: var(--space-80);
  }

  .smd-ml_80 {
    margin-left: var(--space-80);
  }

  .smd-mr_80 {
    margin-right: var(--space-80);
  }

  .smd-mx_80 {
    margin-left: var(--space-80);
    margin-right: var(--space-80);
  }

  .smd-my_80 {
    margin-top: var(--space-80);
    margin-bottom: var(--space-80);
  }

  .smd-gap_80,
  .smd-gap_80 .e-con-inner {
    gap: var(--space-80);
  }

  .smd-p_96 {
    padding: var(--space-96);
  }

  .smd-pt_96 {
    padding-top: var(--space-96);
  }

  .smd-pb_96 {
    padding-bottom: var(--space-96);
  }

  .smd-pl_96 {
    padding-left: var(--space-96);
  }

  .smd-pr_96 {
    padding-right: var(--space-96);
  }

  .smd-px_96 {
    padding-left: var(--space-96);
    padding-right: var(--space-96);
  }

  .smd-py_96 {
    padding-top: var(--space-96);
    padding-bottom: var(--space-96);
  }

  .smd-m_96 {
    margin: var(--space-96);
  }

  .smd-mt_96 {
    margin-top: var(--space-96);
  }

  .smd-mb_96 {
    margin-bottom: var(--space-96);
  }

  .smd-ml_96 {
    margin-left: var(--space-96);
  }

  .smd-mr_96 {
    margin-right: var(--space-96);
  }

  .smd-mx_96 {
    margin-left: var(--space-96);
    margin-right: var(--space-96);
  }

  .smd-my_96 {
    margin-top: var(--space-96);
    margin-bottom: var(--space-96);
  }

  .smd-gap_96,
  .smd-gap_96 .e-con-inner {
    gap: var(--space-96);
  }

  .smd-p_112 {
    padding: var(--space-112);
  }

  .smd-pt_112 {
    padding-top: var(--space-112);
  }

  .smd-pb_112 {
    padding-bottom: var(--space-112);
  }

  .smd-pl_112 {
    padding-left: var(--space-112);
  }

  .smd-pr_112 {
    padding-right: var(--space-112);
  }

  .smd-px_112 {
    padding-left: var(--space-112);
    padding-right: var(--space-112);
  }

  .smd-py_112 {
    padding-top: var(--space-112);
    padding-bottom: var(--space-112);
  }

  .smd-m_112 {
    margin: var(--space-112);
  }

  .smd-mt_112 {
    margin-top: var(--space-112);
  }

  .smd-mb_112 {
    margin-bottom: var(--space-112);
  }

  .smd-ml_112 {
    margin-left: var(--space-112);
  }

  .smd-mr_112 {
    margin-right: var(--space-112);
  }

  .smd-mx_112 {
    margin-left: var(--space-112);
    margin-right: var(--space-112);
  }

  .smd-my_112 {
    margin-top: var(--space-112);
    margin-bottom: var(--space-112);
  }

  .smd-gap_112,
  .smd-gap_112 .e-con-inner {
    gap: var(--space-112);
  }

  .smd-p_128 {
    padding: var(--space-128);
  }

  .smd-pt_128 {
    padding-top: var(--space-128);
  }

  .smd-pb_128 {
    padding-bottom: var(--space-128);
  }

  .smd-pl_128 {
    padding-left: var(--space-128);
  }

  .smd-pr_128 {
    padding-right: var(--space-128);
  }

  .smd-px_128 {
    padding-left: var(--space-128);
    padding-right: var(--space-128);
  }

  .smd-py_128 {
    padding-top: var(--space-128);
    padding-bottom: var(--space-128);
  }

  .smd-m_128 {
    margin: var(--space-128);
  }

  .smd-mt_128 {
    margin-top: var(--space-128);
  }

  .smd-mb_128 {
    margin-bottom: var(--space-128);
  }

  .smd-ml_128 {
    margin-left: var(--space-128);
  }

  .smd-mr_128 {
    margin-right: var(--space-128);
  }

  .smd-mx_128 {
    margin-left: var(--space-128);
    margin-right: var(--space-128);
  }

  .smd-my_128 {
    margin-top: var(--space-128);
    margin-bottom: var(--space-128);
  }

  .smd-gap_128,
  .smd-gap_128 .e-con-inner {
    gap: var(--space-128);
  }
}

/* Base box-shadow compositor */
.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-none,
.shadow-sidebar-border,
.shadow-sidebar-accent,
.shadow-card,
.shadow-hover-card {
  box-shadow:
    var(--fw-ring-offset-shadow, 0 0 #0000), var(--fw-ring-shadow, 0 0 #0000),
    var(--fw-shadow, 0 0 #0000);
}

/* Shadow presets */
.shadow-none {
  --fw-shadow: 0 0 #0000;
  --fw-shadow-colored: 0 0 #0000;
}

.shadow-sm {
  --fw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --fw-shadow-colored: 0 1px 2px 0 var(--fw-shadow-color);
}

.shadow-md {
  --fw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --fw-shadow-colored:
    0 4px 6px -1px var(--fw-shadow-color), 0 2px 4px -2px var(--fw-shadow-color);
}

.shadow-lg {
  --fw-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --fw-shadow-colored:
    0 10px 15px -3px var(--fw-shadow-color),
    0 4px 6px -4px var(--fw-shadow-color);
}

.shadow-xl {
  --fw-shadow:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --fw-shadow-colored:
    0 20px 25px -5px var(--fw-shadow-color),
    0 8px 10px -6px var(--fw-shadow-color);
}

/* Extra shadow found in your pasted CSS */
.shadow {
  --fw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --fw-shadow-colored:
    0 1px 3px 0 var(--fw-shadow-color), 0 1px 2px -1px var(--fw-shadow-color);
}

/* Token-based single-line shadows extracted from arbitrary Tailwind values */
.shadow-sidebar-border {
  --fw-shadow: 0 0 0 1px hsl(var(--sidebar-border));
  --fw-shadow-colored: 0 0 0 1px hsl(var(--sidebar-border));
}

.shadow-sidebar-accent {
  --fw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --fw-shadow-colored: 0 0 0 1px hsl(var(--sidebar-accent));
}

/* Your existing card shadow */
.shadow-card {
  --fw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --fw-shadow-colored: 0 1px 2px 0 var(--fw-shadow-color);
}

.hover-shadow-sm:hover {
  --fw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --fw-shadow-colored: 0 1px 2px 0 var(--fw-shadow-color);
  box-shadow:
    var(--fw-ring-offset-shadow, 0 0 #0000), var(--fw-ring-shadow, 0 0 #0000),
    var(--fw-shadow, 0 0 #0000);
}

.hover-shadow-md:hover {
  --fw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --fw-shadow-colored:
    0 4px 6px -1px var(--fw-shadow-color), 0 2px 4px -2px var(--fw-shadow-color);
  box-shadow:
    var(--fw-ring-offset-shadow, 0 0 #0000), var(--fw-ring-shadow, 0 0 #0000),
    var(--fw-shadow, 0 0 #0000);
}

.hover-shadow-lg:hover {
  --fw-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --fw-shadow-colored:
    0 10px 15px -3px var(--fw-shadow-color),
    0 4px 6px -4px var(--fw-shadow-color);
  box-shadow:
    var(--fw-ring-offset-shadow, 0 0 #0000), var(--fw-ring-shadow, 0 0 #0000),
    var(--fw-shadow, 0 0 #0000);
}

.hover-shadow-sidebar-accent:hover {
  --fw-shadow: 0 0 0 1px hsl(var(--sidebar-accent));
  --fw-shadow-colored: 0 0 0 1px hsl(var(--sidebar-accent));
  box-shadow:
    var(--fw-ring-offset-shadow, 0 0 #0000), var(--fw-ring-shadow, 0 0 #0000),
    var(--fw-shadow, 0 0 #0000);
}

.hover-shadow-card:hover {
  --fw-shadow: 0 8px 24px -8px rgb(16 34 55 / 0.12);
  --fw-shadow-colored: 0 8px 24px -8px rgb(16 34 55 / 0.12);
  box-shadow:
    var(--fw-ring-offset-shadow, 0 0 #0000), var(--fw-ring-shadow, 0 0 #0000),
    var(--fw-shadow, 0 0 #0000);
}

/* Your existing hover card shadow */
.shadow-hover-card {
  --fw-shadow: 0 8px 24px -8px rgb(16 34 55 / 0.12);
  --fw-shadow-colored: 0 8px 24px -8px rgb(16 34 55 / 0.12);
}