@theme {
  /* Typography - Font Family */
  --font-sans: 'Public Sans Variable', system-ui, sans-serif;

  /* Typography - Font Sizes & Line Heights */
  --text-h1: 48px;
  --text-h1--line-height: 1.25;
  --text-h2: 32px;
  --text-h2--line-height: 1.25;
  --text-h3: 24px;
  --text-h3--line-height: 1.333;
  --text-h4: 20px;
  --text-h4--line-height: 1.4;
  --text-h5: 16px;
  --text-h5--line-height: 1.5;
  --text-h6: 14px;
  --text-h6--line-height: 1.43;
  --text-intro: 20px;
  --text-intro--line-height: 1.4;
  --text-body: 16px;
  --text-body--line-height: 1.5;
  --text-small: 14px;
  --text-small--line-height: 1.357;
  --text-caption: 12px;
  --text-caption--line-height: 1.5;

  /* Blues */
  --color-blue-01: #002664;
  --color-blue-02: #146CFD;
  --color-blue-03: #8CE0FF;
  --color-blue-04: #CBEDFD;

  /* Reds */
  --color-red-01: #630019;
  --color-red-02: #D7153A;
  --color-red-03: #FFB8C1;
  --color-red-04: #FFE6EA;

  /* Oranges */
  --color-orange-01: #941B00;
  --color-orange-02: #F3631B;
  --color-orange-03: #FFCE99;
  --color-orange-04: #FDEDDF;

  /* Greens */
  --color-green-01: #004000;
  --color-green-02: #00AA45;
  --color-green-03: #A8EDB3;
  --color-green-04: #DBFADF;

  /* Teals */
  --color-teal-01: #0B3F47;
  --color-teal-02: #2E808E;
  --color-teal-03: #8CDBE5;
  --color-teal-04: #D1EEEA;

  /* Browns */
  --color-brown-01: #523719;
  --color-brown-02: #B68D5D;
  --color-brown-03: #E8D0B5;
  --color-brown-04: #EDE3D7;

  /* Purples */
  --color-purple-01: #441170;
  --color-purple-02: #8055F1;
  --color-purple-03: #CEBFFF;
  --color-purple-04: #E6E1FD;

  /* Fuchsias */
  --color-fuchsia-01: #65004D;
  --color-fuchsia-02: #D912AE;
  --color-fuchsia-03: #F4B5E6;
  --color-fuchsia-04: #FDDEF2;

  /* Yellows */
  --color-yellow-01: #694800;
  --color-yellow-02: #FAAF05;
  --color-yellow-03: #FDE79A;
  --color-yellow-04: #FFF4CF;

  /* Greys */
  --color-grey-01: #22272B;
  --color-grey-02: #495054;
  --color-grey-03: #CDD3D6;
  --color-grey-04: #EBEBEB;
  --color-grey-05: #F2F2F2;
  --color-white: #FFFFFF;

  /* Semantic Aliases */
  --color-primary: var(--color-blue-01);
  --color-info: var(--color-blue-02);
  --color-secondary: var(--color-blue-04);
  --color-error: var(--color-red-02);
  --color-success: var(--color-green-02);
  --color-warning: var(--color-orange-02);
  --color-text: var(--color-grey-01);
  --color-text-secondary: var(--color-grey-02);
  --color-border: var(--color-grey-04);
  --color-bg: var(--color-grey-05);
  --color-surface: var(--color-white);

  /* Form Controls */
  --color-control-border: var(--color-grey-03);
  --color-control-border-hover: var(--color-grey-01);
  --color-control-checked: var(--color-blue-01);
  --color-control-checked-hover: var(--color-blue-02);
  --color-control-focus-ring: var(--color-blue-04);
  --color-control-label: var(--color-blue-01);
  --color-control-description: var(--color-grey-02);
  --color-control-error: var(--color-red-02);
  --color-control-bg: var(--color-white);
  --color-control-bg-readonly: var(--color-grey-05);

  /* Button */
  --color-button-default: var(--color-blue-01);
  --color-button-danger: var(--color-red-02);
  --color-button-neutral: var(--color-grey-01);
  --color-button-subtle-bg: var(--color-blue-04);
  --color-button-subtle-text: var(--color-blue-01);

  /* Switch */
  --color-switch-on: var(--color-success);
  --color-switch-on-hover: var(--color-green-01);

  /* Badge */
  --color-badge-navy: var(--color-blue-01);
  --color-badge-info: var(--color-blue-02);
  --color-badge-info-light: var(--color-blue-04);
  --color-badge-success: var(--color-green-02);
  --color-badge-success-light: var(--color-green-04);
  --color-badge-error: var(--color-red-02);
  --color-badge-error-light: var(--color-red-04);
  --color-badge-warning: var(--color-orange-02);
  --color-badge-warning-light: var(--color-orange-04);
  --color-badge-neutral: var(--color-grey-04);
  --color-badge-on-success-light: var(--color-green-01);
  --color-badge-on-error-light: var(--color-red-01);
  --color-badge-on-warning-light: var(--color-orange-01);

  /* Chip */
  --color-chip-border: var(--color-blue-01);
  --color-chip-text: var(--color-blue-01);
  --color-chip-bg: var(--color-white);
  --color-chip-selected-bg: var(--color-blue-01);
  --color-chip-selected-text: var(--color-white);

  /* Tag */
  --color-tag-navy: var(--color-blue-01);
  --color-tag-navy-light: color-mix(in srgb, var(--color-blue-01) 10%, transparent);
  --color-tag-blue: var(--color-blue-02);
  --color-tag-blue-light: var(--color-blue-04);
  --color-tag-green: var(--color-green-01);
  --color-tag-green-light: var(--color-green-04);
  --color-tag-red: var(--color-red-02);
  --color-tag-red-light: var(--color-red-04);
  --color-tag-orange: var(--color-orange-02);
  --color-tag-orange-light: var(--color-orange-04);
  --color-tag-grey: var(--color-grey-02);
  --color-tag-grey-light: var(--color-grey-04);
  --color-tag-teal: var(--color-teal-01);
  --color-tag-teal-light: var(--color-teal-04);
  --color-tag-brown: var(--color-brown-01);
  --color-tag-brown-light: var(--color-brown-04);
  --color-tag-purple: var(--color-purple-01);
  --color-tag-purple-light: var(--color-purple-04);
  --color-tag-fuchsia: var(--color-fuchsia-01);
  --color-tag-fuchsia-light: var(--color-fuchsia-04);
  --color-tag-yellow: var(--color-yellow-01);
  --color-tag-yellow-light: var(--color-yellow-04);

  /* Avatar */
  --color-avatar: var(--color-blue-04);
  --color-avatar-text: var(--color-grey-01);

  /* TopBar */
  --color-topbar: var(--color-blue-01);

  /* SideNav */
  --color-nav-bg: var(--color-white);
  --color-nav-text: var(--color-grey-01);
  --color-nav-icon: var(--color-blue-01);
  --color-nav-active: var(--color-info);
  --color-nav-divider: var(--color-grey-03);

  /* Alert */
  --color-alert-info-bg: var(--color-blue-04);
  --color-alert-info-border: var(--color-blue-02);
  --color-alert-info-icon: var(--color-blue-02);
  --color-alert-warning-bg: var(--color-orange-04);
  --color-alert-warning-border: var(--color-orange-02);
  --color-alert-warning-icon: var(--color-orange-02);
  --color-alert-error-bg: var(--color-red-04);
  --color-alert-error-border: var(--color-red-02);
  --color-alert-error-icon: var(--color-red-02);
  --color-alert-success-bg: var(--color-green-04);
  --color-alert-success-border: var(--color-green-02);
  --color-alert-success-icon: var(--color-green-02);
  --color-alert-neutral-bg: var(--color-grey-05);
  --color-alert-neutral-border: var(--color-grey-03);
  --color-alert-neutral-icon: var(--color-blue-01);

  /* Radius */
  --radius-sm: 4px;
  --radius-default: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-default: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}