/**
 * AFA Design System
 * Auto-generated: 2025-10-13 20:23:08
 * DO NOT EDIT THIS FILE DIRECTLY
 * Use the Design System Management interface to make changes
 */

:root {
  /* Design System Tokens */

  /* Other */
  --linear: linear-gradient(90deg, #071d224d 0%, #04303b 100%);
  --shadow-color: #00000026;
  --shadow-type: dropShadow;
  --shadow-y: 15px;
  --shadow-blur: 24px;
  --shadow-spread: -20px;
  --shadow01-color: #00000059;
  --shadow01-type: dropShadow;
  --shadow01-y: 4px;
  --shadow01-blur: 35px;
  --shadow01-spread: -20px;
  --fontfamilies-helvetica-neue: Helvetica Neue;
  --lineheights-0: 22px;
  --lineheights-1: 25px;
  --lineheights-2: 25px;
  --lineheights-3: 20px;
  --lineheights-4: 17px;
  --lineheights-5: AUTO;
  --lineheights-6: 55px;
  --lineheights-7: 45px;
  --lineheights-8: 40px;
  --lineheights-9: 30px;
  --lineheights-10: 29px;
  --lineheights-11: 25px;
  --fontweights-helvetica-neue-0: Heavy;
  --fontweights-helvetica-neue-1: Medium;
  --fontweights-helvetica-neue-2: 65 Medium;
  --fontweights-helvetica-neue-3: Bold;
  --fontsize-0: 14px;
  --fontsize-1: 18px;
  --fontsize-2: 16px;
  --fontsize-3: 14px;
  --fontsize-4: 12px;
  --fontsize-5: 10px;
  --fontsize-6: 44px;
  --fontsize-7: 36px;
  --fontsize-8: 30px;
  --fontsize-9: 26px;
  --fontsize-10: 22px;
  --fontsize-11: 20px;
  --letterspacing-0: 0;
  --letterspacing-1: 0;
  --letterspacing-2: 0;
  --letterspacing-3: 0;
  --letterspacing-4: 0;
  --letterspacing-5: 0;
  --letterspacing-6: 0;
  --letterspacing-7: 0;
  --letterspacing-8: 0;
  --letterspacing-9: 0;
  --letterspacing-10: 0;
  --letterspacing-11: 0;
  --paragraphspacing-0: 0;
  --paragraphspacing-1: 0;
  --paragraphspacing-2: 0;
  --paragraphspacing-3: 0;
  --paragraphspacing-4: 0;
  --paragraphspacing-5: 0;
  --paragraphspacing-6: 0;
  --paragraphspacing-7: 0;
  --paragraphspacing-8: 0;
  --paragraphspacing-9: 0;
  --paragraphspacing-10: 0;
  --paragraphspacing-11: 0;
  --buttons-fontfamily: Helvetica Neue;
  --buttons-fontweight: Heavy;
  --buttons-lineheight: 22px;
  --buttons-fontsize: 14px;
  --buttons-letterspacing: 0;
  --buttons-paragraphspacing: 0;
  --buttons-paragraphindent: 0px;
  --buttons-textcase: capitalize;
  --buttons-textdecoration: none;
  --body-b-1-fontfamily: Helvetica Neue;
  --body-b-1-fontweight: Medium;
  --body-b-1-lineheight: 25px;
  --body-b-1-fontsize: 18px;
  --body-b-1-letterspacing: 0;
  --body-b-1-paragraphspacing: 0;
  --body-b-1-paragraphindent: 0px;
  --body-b-1-textcase: none;
  --body-b-1-textdecoration: none;
  --body-b-2-fontfamily: Helvetica Neue;
  --body-b-2-fontweight: 65 Medium;
  --body-b-2-lineheight: 25px;
  --body-b-2-fontsize: 16px;
  --body-b-2-letterspacing: 0;
  --body-b-2-paragraphspacing: 0;
  --body-b-2-paragraphindent: 0px;
  --body-b-2-textcase: none;
  --body-b-2-textdecoration: none;
  --body-b-3-fontfamily: Helvetica Neue;
  --body-b-3-fontweight: Medium;
  --body-b-3-lineheight: 20px;
  --body-b-3-fontsize: 14px;
  --body-b-3-letterspacing: 0;
  --body-b-3-paragraphspacing: 0;
  --body-b-3-paragraphindent: 0px;
  --body-b-3-textcase: none;
  --body-b-3-textdecoration: none;
  --body-b-4-fontfamily: Helvetica Neue;
  --body-b-4-fontweight: Medium;
  --body-b-4-lineheight: 17px;
  --body-b-4-fontsize: 12px;
  --body-b-4-letterspacing: 0;
  --body-b-4-paragraphspacing: 0;
  --body-b-4-paragraphindent: 0px;
  --body-b-4-textcase: none;
  --body-b-4-textdecoration: none;
  --body-b-5-fontfamily: Helvetica Neue;
  --body-b-5-fontweight: 65 Medium;
  --body-b-5-lineheight: AUTO;
  --body-b-5-fontsize: 10px;
  --body-b-5-letterspacing: 0;
  --body-b-5-paragraphspacing: 0;
  --body-b-5-paragraphindent: 0px;
  --body-b-5-textcase: none;
  --body-b-5-textdecoration: none;
  --headings-h-1-fontfamily: Helvetica Neue;
  --headings-h-1-fontweight: Heavy;
  --headings-h-1-lineheight: 55px;
  --headings-h-1-fontsize: 44px;
  --headings-h-1-letterspacing: 0;
  --headings-h-1-paragraphspacing: 0;
  --headings-h-1-paragraphindent: 0px;
  --headings-h-1-textcase: none;
  --headings-h-1-textdecoration: none;
  --headings-h-2-fontfamily: Helvetica Neue;
  --headings-h-2-fontweight: Heavy;
  --headings-h-2-lineheight: 45px;
  --headings-h-2-fontsize: 36px;
  --headings-h-2-letterspacing: 0;
  --headings-h-2-paragraphspacing: 0;
  --headings-h-2-paragraphindent: 0px;
  --headings-h-2-textcase: capitalize;
  --headings-h-2-textdecoration: none;
  --headings-h-3-fontfamily: Helvetica Neue;
  --headings-h-3-fontweight: Heavy;
  --headings-h-3-lineheight: 40px;
  --headings-h-3-fontsize: 30px;
  --headings-h-3-letterspacing: 0;
  --headings-h-3-paragraphspacing: 0;
  --headings-h-3-paragraphindent: 0px;
  --headings-h-3-textcase: capitalize;
  --headings-h-3-textdecoration: none;
  --headings-h-4-fontfamily: Helvetica Neue;
  --headings-h-4-fontweight: Heavy;
  --headings-h-4-lineheight: 30px;
  --headings-h-4-fontsize: 26px;
  --headings-h-4-letterspacing: 0;
  --headings-h-4-paragraphspacing: 0;
  --headings-h-4-paragraphindent: 0px;
  --headings-h-4-textcase: none;
  --headings-h-4-textdecoration: none;
  --headings-h-5-fontfamily: Helvetica Neue;
  --headings-h-5-fontweight: Heavy;
  --headings-h-5-lineheight: 29px;
  --headings-h-5-fontsize: 22px;
  --headings-h-5-letterspacing: 0;
  --headings-h-5-paragraphspacing: 0;
  --headings-h-5-paragraphindent: 0px;
  --headings-h-5-textcase: capitalize;
  --headings-h-5-textdecoration: none;
  --headings-h-6-fontfamily: Helvetica Neue;
  --headings-h-6-fontweight: Bold;
  --headings-h-6-lineheight: 25px;
  --headings-h-6-fontsize: 20px;
  --headings-h-6-letterspacing: 0;
  --headings-h-6-paragraphspacing: 0;
  --headings-h-6-paragraphindent: 0px;
  --headings-h-6-textcase: none;
  --headings-h-6-textdecoration: none;
  --textcase-capitalize: capitalize;
  --textcase-none: none;
  --textdecoration-none: none;
  --paragraphindent-0: 0px;
  --100: #ffffff;
  --200: #e0e0e0;
  --300: #969696;
  --400: #4a4a4a;
  --500: #222222;
  --black-65%: #000000a6;
  --background2: #f7f7f7;
  --background1: #fbfbfb;
  --white-20%: #f5f5f533;
  --danger: #e71e21;
  --secondary-light: #cff1d3;
  --secondary: #39b54a;
  --primary: #04303b;
  --linear: linear-gradient(90deg, #071d224d 0%, #04303b 100%);
  --paragraphspacing-0: 0;
  --paragraphspacing-1: 0;
  --paragraphspacing-2: 0;
  --paragraphspacing-3: 0;
  --paragraphspacing-4: 0;
  --paragraphspacing-5: 0;
  --paragraphspacing-6: 0;
  --paragraphspacing-7: 0;
  --paragraphspacing-8: 0;
  --paragraphspacing-9: 0;
  --paragraphspacing-10: 0;
  --paragraphspacing-11: 0;
  --buttons-paragraphspacing: 0;
  --buttons-paragraphindent: 0px;
  --buttons-textcase: capitalize;
  --buttons-textdecoration: none;
  --textcase-capitalize: capitalize;
  --textcase-none: none;
  --textdecoration-none: none;
  --paragraphindent-0: 0px;
  --100: #ffffff;
  --200: #e0e0e0;
  --300: #969696;
  --400: #4a4a4a;
  --500: #222222;
  --black-65%: #000000a6;
  --white-20%: #f5f5f533;

  /* Shadows */
  --shadow-color: #00000026;
  --shadow-type: dropShadow;
  --shadow-y: 15px;
  --shadow-blur: 24px;
  --shadow-spread: -20px;
  --shadow01-color: #00000059;
  --shadow01-type: dropShadow;
  --shadow01-y: 4px;
  --shadow01-blur: 35px;
  --shadow01-spread: -20px;

  /* Typography */
  --fontfamilies-helvetica-neue: Helvetica Neue;
  --lineheights-0: 22px;
  --lineheights-1: 25px;
  --lineheights-2: 25px;
  --lineheights-3: 20px;
  --lineheights-4: 17px;
  --lineheights-5: AUTO;
  --lineheights-6: 55px;
  --lineheights-7: 45px;
  --lineheights-8: 40px;
  --lineheights-9: 30px;
  --lineheights-10: 29px;
  --lineheights-11: 25px;
  --fontweights-helvetica-neue-0: Heavy;
  --fontweights-helvetica-neue-1: Medium;
  --fontweights-helvetica-neue-2: 65 Medium;
  --fontweights-helvetica-neue-3: Bold;
  --fontsize-0: 14px;
  --fontsize-1: 18px;
  --fontsize-2: 16px;
  --fontsize-3: 14px;
  --fontsize-4: 12px;
  --fontsize-5: 10px;
  --fontsize-6: 44px;
  --fontsize-7: 36px;
  --fontsize-8: 30px;
  --fontsize-9: 26px;
  --fontsize-10: 22px;
  --fontsize-11: 20px;
  --letterspacing-0: 0;
  --letterspacing-1: 0;
  --letterspacing-2: 0;
  --letterspacing-3: 0;
  --letterspacing-4: 0;
  --letterspacing-5: 0;
  --letterspacing-6: 0;
  --letterspacing-7: 0;
  --letterspacing-8: 0;
  --letterspacing-9: 0;
  --letterspacing-10: 0;
  --letterspacing-11: 0;
  --buttons-fontfamily: Helvetica Neue;
  --buttons-fontweight: Heavy;
  --buttons-lineheight: 22px;
  --buttons-fontsize: 14px;
  --buttons-letterspacing: 0;
  --body-b-1-fontfamily: Helvetica Neue;
  --body-b-1-fontweight: Medium;
  --body-b-1-lineheight: 25px;
  --body-b-1-fontsize: 18px;
  --body-b-1-letterspacing: 0;
  --body-b-1-paragraphspacing: 0;
  --body-b-1-paragraphindent: 0px;
  --body-b-1-textcase: none;
  --body-b-1-textdecoration: none;
  --body-b-2-fontfamily: Helvetica Neue;
  --body-b-2-fontweight: 65 Medium;
  --body-b-2-lineheight: 25px;
  --body-b-2-fontsize: 16px;
  --body-b-2-letterspacing: 0;
  --body-b-2-paragraphspacing: 0;
  --body-b-2-paragraphindent: 0px;
  --body-b-2-textcase: none;
  --body-b-2-textdecoration: none;
  --body-b-3-fontfamily: Helvetica Neue;
  --body-b-3-fontweight: Medium;
  --body-b-3-lineheight: 20px;
  --body-b-3-fontsize: 14px;
  --body-b-3-letterspacing: 0;
  --body-b-3-paragraphspacing: 0;
  --body-b-3-paragraphindent: 0px;
  --body-b-3-textcase: none;
  --body-b-3-textdecoration: none;
  --body-b-4-fontfamily: Helvetica Neue;
  --body-b-4-fontweight: Medium;
  --body-b-4-lineheight: 17px;
  --body-b-4-fontsize: 12px;
  --body-b-4-letterspacing: 0;
  --body-b-4-paragraphspacing: 0;
  --body-b-4-paragraphindent: 0px;
  --body-b-4-textcase: none;
  --body-b-4-textdecoration: none;
  --body-b-5-fontfamily: Helvetica Neue;
  --body-b-5-fontweight: 65 Medium;
  --body-b-5-lineheight: AUTO;
  --body-b-5-fontsize: 10px;
  --body-b-5-letterspacing: 0;
  --body-b-5-paragraphspacing: 0;
  --body-b-5-paragraphindent: 0px;
  --body-b-5-textcase: none;
  --body-b-5-textdecoration: none;
  --headings-h-1-fontfamily: Helvetica Neue;
  --headings-h-1-fontweight: Heavy;
  --headings-h-1-lineheight: 55px;
  --headings-h-1-fontsize: 44px;
  --headings-h-1-letterspacing: 0;
  --headings-h-1-paragraphspacing: 0;
  --headings-h-1-paragraphindent: 0px;
  --headings-h-1-textcase: none;
  --headings-h-1-textdecoration: none;
  --headings-h-2-fontfamily: Helvetica Neue;
  --headings-h-2-fontweight: Heavy;
  --headings-h-2-lineheight: 45px;
  --headings-h-2-fontsize: 36px;
  --headings-h-2-letterspacing: 0;
  --headings-h-2-paragraphspacing: 0;
  --headings-h-2-paragraphindent: 0px;
  --headings-h-2-textcase: capitalize;
  --headings-h-2-textdecoration: none;
  --headings-h-3-fontfamily: Helvetica Neue;
  --headings-h-3-fontweight: Heavy;
  --headings-h-3-lineheight: 40px;
  --headings-h-3-fontsize: 30px;
  --headings-h-3-letterspacing: 0;
  --headings-h-3-paragraphspacing: 0;
  --headings-h-3-paragraphindent: 0px;
  --headings-h-3-textcase: capitalize;
  --headings-h-3-textdecoration: none;
  --headings-h-4-fontfamily: Helvetica Neue;
  --headings-h-4-fontweight: Heavy;
  --headings-h-4-lineheight: 30px;
  --headings-h-4-fontsize: 26px;
  --headings-h-4-letterspacing: 0;
  --headings-h-4-paragraphspacing: 0;
  --headings-h-4-paragraphindent: 0px;
  --headings-h-4-textcase: none;
  --headings-h-4-textdecoration: none;
  --headings-h-5-fontfamily: Helvetica Neue;
  --headings-h-5-fontweight: Heavy;
  --headings-h-5-lineheight: 29px;
  --headings-h-5-fontsize: 22px;
  --headings-h-5-letterspacing: 0;
  --headings-h-5-paragraphspacing: 0;
  --headings-h-5-paragraphindent: 0px;
  --headings-h-5-textcase: capitalize;
  --headings-h-5-textdecoration: none;
  --headings-h-6-fontfamily: Helvetica Neue;
  --headings-h-6-fontweight: Bold;
  --headings-h-6-lineheight: 25px;
  --headings-h-6-fontsize: 20px;
  --headings-h-6-letterspacing: 0;
  --headings-h-6-paragraphspacing: 0;
  --headings-h-6-paragraphindent: 0px;
  --headings-h-6-textcase: none;
  --headings-h-6-textdecoration: none;

  /* Colors */
  --background2: #f7f7f7;
  --background1: #fbfbfb;
  --danger: #e71e21;
  --secondary-light: #cff1d3;
  --secondary: #39b54a;
  --primary: #04303b;

  /* Buttons */
  --buttonvariants-primary-bg: #04303b;
  --buttonvariants-primary-text: #ffffff;
  --buttonvariants-primary-hover: #022128;
  --buttonvariants-secondary-bg: #39b54a;
  --buttonvariants-secondary-text: #ffffff;
  --buttonvariants-secondary-hover: #2d9139;
  --buttonvariants-danger-bg: #e71e21;
  --buttonvariants-danger-text: #ffffff;
  --buttonvariants-danger-hover: #c11719;
  --buttonvariants-ghost-bg: transparent;
  --buttonvariants-ghost-text: #04303b;
  --buttonvariants-ghost-hover: #fbfbfb;
  --buttonvariants-outline-bg: transparent;
  --buttonvariants-outline-text: #04303b;
  --buttonvariants-outline-border: #04303b;
  --buttonvariants-outline-hover-bg: #04303b;
  --buttonvariants-outline-hover-text: #ffffff;
  --buttonvariants-padding-sm: 6px 12px;
  --buttonvariants-padding-md: 10px 20px;
  --buttonvariants-padding-lg: 14px 28px;
  --buttonvariants-border-radius: 6px;
  --buttonvariants-font-size-sm: 12px;
  --buttonvariants-font-size-md: 14px;
  --buttonvariants-font-size-lg: 16px;

  /* Navigation */
  --navigation-bg: #ffffff;
  --navigation-text: #4a4a4a;
  --navigation-text-hover: #04303b;
  --navigation-active-bg: #04303b;
  --navigation-active-text: #ffffff;
  --navigation-border: #e0e0e0;
  --navigation-submenu-bg: #fbfbfb;
  --navigation-submenu-text: #4a4a4a;
  --navigation-submenu-hover-bg: #f7f7f7;
  --navigation-submenu-hover-text: #04303b;
  --navigation-padding: 10px 12px;
  --navigation-border-radius: 6px;
  --navigation-font-size: 14px;
  --navigation-icon-size: 20px;

  /* Forms */
  --forms-input-bg: #ffffff;
  --forms-input-text: #222222;
  --forms-input-border: #e0e0e0;
  --forms-input-border-focus: #04303b;
  --forms-input-border-error: #e71e21;
  --forms-input-placeholder: #969696;
  --forms-input-disabled-bg: #fbfbfb;
  --forms-input-disabled-text: #969696;
  --forms-label-text: #222222;
  --forms-label-font-size: 14px;
  --forms-input-padding: 10px 12px;
  --forms-input-border-radius: 6px;
  --forms-input-font-size: 14px;
  --forms-input-border-width: 1px;

  /* Components */
  --components-card-bg: #ffffff;
  --components-card-border: #e0e0e0;
  --components-card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --components-card-hover-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --components-card-padding: 16px;
  --components-card-border-radius: 8px;
  --components-badge-primary-bg: #04303b;
  --components-badge-primary-text: #ffffff;
  --components-badge-secondary-bg: #39b54a;
  --components-badge-secondary-text: #ffffff;
  --components-badge-padding: 4px 10px;
  --components-badge-border-radius: 12px;
  --components-badge-font-size: 12px;

  /* Legacy color variables for compatibility */
  --color-primary: var(--primary, #04303b);
  --color-primary-dark: var(--buttonvariants-primary-hover, #022128);
  --color-primary-light: var(--secondary-light, #cff1d3);
  --color-secondary: var(--secondary, #39b54a);
  --color-danger: var(--danger, #e71e21);
  --color-bg-1: var(--background1, #fbfbfb);
  --color-bg-2: var(--background2, #f7f7f7);
  --color-border: var(--200, #e0e0e0);
  --color-text-dark: var(--500, #222222);
  --color-text-muted: var(--300, #969696);

}

/* Utility Classes */

/* Color Utilities */
.text-background2 { color: #f7f7f7; }
.bg-background2 { background-color: #f7f7f7; }
.border-background2 { border-color: #f7f7f7; }
.text-background1 { color: #fbfbfb; }
.bg-background1 { background-color: #fbfbfb; }
.border-background1 { border-color: #fbfbfb; }
.text-danger { color: #e71e21; }
.bg-danger { background-color: #e71e21; }
.border-danger { border-color: #e71e21; }
.text-secondary-light { color: #cff1d3; }
.bg-secondary-light { background-color: #cff1d3; }
.border-secondary-light { border-color: #cff1d3; }
.text-secondary { color: #39b54a; }
.bg-secondary { background-color: #39b54a; }
.border-secondary { border-color: #39b54a; }
.text-primary { color: #04303b; }
.bg-primary { background-color: #04303b; }
.border-primary { border-color: #04303b; }

/* Typography Utilities */
.font-fontfamilies-helvetica-neue { font-family: Helvetica Neue; }
.leading-lineheights-0 { line-height: 22px; }
.leading-lineheights-1 { line-height: 25px; }
.leading-lineheights-2 { line-height: 25px; }
.leading-lineheights-3 { line-height: 20px; }
.leading-lineheights-4 { line-height: 17px; }
.leading-lineheights-5 { line-height: AUTO; }
.leading-lineheights-6 { line-height: 55px; }
.leading-lineheights-7 { line-height: 45px; }
.leading-lineheights-8 { line-height: 40px; }
.leading-lineheights-9 { line-height: 30px; }
.leading-lineheights-10 { line-height: 29px; }
.leading-lineheights-11 { line-height: 25px; }
.font-fontweights-helvetica-neue-0 { font-weight: Heavy; }
.font-fontweights-helvetica-neue-1 { font-weight: Medium; }
.font-fontweights-helvetica-neue-2 { font-weight: 65 Medium; }
.font-fontweights-helvetica-neue-3 { font-weight: Bold; }
.text-fontsize-0 { font-size: 14px; }
.text-fontsize-1 { font-size: 18px; }
.text-fontsize-2 { font-size: 16px; }
.text-fontsize-3 { font-size: 14px; }
.text-fontsize-4 { font-size: 12px; }
.text-fontsize-5 { font-size: 10px; }
.text-fontsize-6 { font-size: 44px; }
.text-fontsize-7 { font-size: 36px; }
.text-fontsize-8 { font-size: 30px; }
.text-fontsize-9 { font-size: 26px; }
.text-fontsize-10 { font-size: 22px; }
.text-fontsize-11 { font-size: 20px; }
.font-buttons-fontfamily { font-family: Helvetica Neue; }
.font-buttons-fontweight { font-weight: Heavy; }
.leading-buttons-lineheight { line-height: 22px; }
.text-buttons-fontsize { font-size: 14px; }
.font-body-b-1-fontfamily { font-family: Helvetica Neue; }
.font-body-b-1-fontweight { font-weight: Medium; }
.leading-body-b-1-lineheight { line-height: 25px; }
.text-body-b-1-fontsize { font-size: 18px; }
.font-body-b-2-fontfamily { font-family: Helvetica Neue; }
.font-body-b-2-fontweight { font-weight: 65 Medium; }
.leading-body-b-2-lineheight { line-height: 25px; }
.text-body-b-2-fontsize { font-size: 16px; }
.font-body-b-3-fontfamily { font-family: Helvetica Neue; }
.font-body-b-3-fontweight { font-weight: Medium; }
.leading-body-b-3-lineheight { line-height: 20px; }
.text-body-b-3-fontsize { font-size: 14px; }
.font-body-b-4-fontfamily { font-family: Helvetica Neue; }
.font-body-b-4-fontweight { font-weight: Medium; }
.leading-body-b-4-lineheight { line-height: 17px; }
.text-body-b-4-fontsize { font-size: 12px; }
.font-body-b-5-fontfamily { font-family: Helvetica Neue; }
.font-body-b-5-fontweight { font-weight: 65 Medium; }
.leading-body-b-5-lineheight { line-height: AUTO; }
.text-body-b-5-fontsize { font-size: 10px; }
.font-headings-h-1-fontfamily { font-family: Helvetica Neue; }
.font-headings-h-1-fontweight { font-weight: Heavy; }
.leading-headings-h-1-lineheight { line-height: 55px; }
.text-headings-h-1-fontsize { font-size: 44px; }
.font-headings-h-2-fontfamily { font-family: Helvetica Neue; }
.font-headings-h-2-fontweight { font-weight: Heavy; }
.leading-headings-h-2-lineheight { line-height: 45px; }
.text-headings-h-2-fontsize { font-size: 36px; }
.font-headings-h-3-fontfamily { font-family: Helvetica Neue; }
.font-headings-h-3-fontweight { font-weight: Heavy; }
.leading-headings-h-3-lineheight { line-height: 40px; }
.text-headings-h-3-fontsize { font-size: 30px; }
.font-headings-h-4-fontfamily { font-family: Helvetica Neue; }
.font-headings-h-4-fontweight { font-weight: Heavy; }
.leading-headings-h-4-lineheight { line-height: 30px; }
.text-headings-h-4-fontsize { font-size: 26px; }
.font-headings-h-5-fontfamily { font-family: Helvetica Neue; }
.font-headings-h-5-fontweight { font-weight: Heavy; }
.leading-headings-h-5-lineheight { line-height: 29px; }
.text-headings-h-5-fontsize { font-size: 22px; }
.font-headings-h-6-fontfamily { font-family: Helvetica Neue; }
.font-headings-h-6-fontweight { font-weight: Bold; }
.leading-headings-h-6-lineheight { line-height: 25px; }
.text-headings-h-6-fontsize { font-size: 20px; }

/* Spacing Utilities */

/* Border Utilities */

/* Shadow Utilities */

/* Button Component Classes */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fontfamilies-helvetica-neue);
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: none;
  text-decoration: none;
  padding: var(--buttonvariants-padding-md, 10px 20px);
  font-size: var(--buttonvariants-font-size-md, 14px);
  border-radius: var(--buttonvariants-border-radius, 6px);
}

.btn-primary {
  background-color: var(--buttonvariants-primary-bg, var(--primary));
  color: var(--buttonvariants-primary-text, #ffffff);
}
.btn-primary:hover {
  background-color: var(--buttonvariants-primary-hover, #022128);
}

.btn-secondary {
  background-color: var(--buttonvariants-secondary-bg, var(--secondary));
  color: var(--buttonvariants-secondary-text, #ffffff);
}
.btn-secondary:hover {
  background-color: var(--buttonvariants-secondary-hover, #2d9139);
}

.btn-danger {
  background-color: var(--buttonvariants-danger-bg, var(--danger));
  color: var(--buttonvariants-danger-text, #ffffff);
}
.btn-danger:hover {
  background-color: var(--buttonvariants-danger-hover, #c11719);
}

.btn-ghost {
  background-color: var(--buttonvariants-ghost-bg, transparent);
  color: var(--buttonvariants-ghost-text, var(--primary));
}
.btn-ghost:hover {
  background-color: var(--buttonvariants-ghost-hover, var(--background1));
}

.btn-outline {
  background-color: var(--buttonvariants-outline-bg, transparent);
  color: var(--buttonvariants-outline-text, var(--primary));
  border: 1px solid var(--buttonvariants-outline-border, var(--primary));
}
.btn-outline:hover {
  background-color: var(--buttonvariants-outline-hover-bg, var(--primary));
  color: var(--buttonvariants-outline-hover-text, #ffffff);
}

.btn-sm {
  padding: var(--buttonvariants-padding-sm, 6px 12px);
  font-size: var(--buttonvariants-font-size-sm, 12px);
}

.btn-lg {
  padding: var(--buttonvariants-padding-lg, 14px 28px);
  font-size: var(--buttonvariants-font-size-lg, 16px);
}

/* Navigation Component Classes */
.nav-item {
  display: flex;
  align-items: center;
  padding: var(--navigation-padding, 10px 12px);
  font-size: var(--navigation-font-size, 14px);
  color: var(--navigation-text, #4a4a4a);
  background-color: var(--navigation-bg, #ffffff);
  border-radius: var(--navigation-border-radius, 6px);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
}

.nav-item:hover {
  color: var(--navigation-text-hover, var(--primary));
}

.nav-item.active {
  background-color: var(--navigation-active-bg, var(--primary));
  color: var(--navigation-active-text, #ffffff);
}

.nav-submenu {
  background-color: var(--navigation-submenu-bg, var(--background1));
  color: var(--navigation-submenu-text, #4a4a4a);
  padding: var(--navigation-padding, 10px 12px);
  margin-left: 20px;
  border-radius: var(--navigation-border-radius, 6px);
}

.nav-submenu:hover {
  background-color: var(--navigation-submenu-hover-bg, var(--background2));
  color: var(--navigation-submenu-hover-text, var(--primary));
}

/* Form Component Classes */
.form-input {
  width: 100%;
  padding: var(--forms-input-padding, 10px 12px);
  font-size: var(--forms-input-font-size, 14px);
  color: var(--forms-input-text, #222222);
  background-color: var(--forms-input-bg, #ffffff);
  border: var(--forms-input-border-width, 1px) solid var(--forms-input-border, #e0e0e0);
  border-radius: var(--forms-input-border-radius, 6px);
  transition: border-color 0.2s ease-in-out;
}

.form-input:focus {
  outline: none;
  border-color: var(--forms-input-border-focus, var(--primary));
}

.form-input::placeholder {
  color: var(--forms-input-placeholder, #969696);
}

.form-input:disabled {
  background-color: var(--forms-input-disabled-bg, var(--background1));
  color: var(--forms-input-disabled-text, #969696);
  cursor: not-allowed;
}

.form-input.error {
  border-color: var(--forms-input-border-error, var(--danger));
}

.form-label {
  display: block;
  font-size: var(--forms-label-font-size, 14px);
  color: var(--forms-label-text, #222222);
  margin-bottom: 6px;
  font-weight: 500;
}

.form-select {
  width: 100%;
  padding: var(--forms-input-padding, 10px 12px);
  font-size: var(--forms-input-font-size, 14px);
  color: var(--forms-input-text, #222222);
  background-color: var(--forms-input-bg, #ffffff);
  border: var(--forms-input-border-width, 1px) solid var(--forms-input-border, #e0e0e0);
  border-radius: var(--forms-input-border-radius, 6px);
}

.form-textarea {
  width: 100%;
  padding: var(--forms-input-padding, 10px 12px);
  font-size: var(--forms-input-font-size, 14px);
  color: var(--forms-input-text, #222222);
  background-color: var(--forms-input-bg, #ffffff);
  border: var(--forms-input-border-width, 1px) solid var(--forms-input-border, #e0e0e0);
  border-radius: var(--forms-input-border-radius, 6px);
  resize: vertical;
  min-height: 100px;
}

/* Component Utility Classes */
.card {
  background-color: var(--components-card-bg, #ffffff);
  border: 1px solid var(--components-card-border, #e0e0e0);
  border-radius: var(--components-card-border-radius, 8px);
  padding: var(--components-card-padding, 16px);
  box-shadow: var(--components-card-shadow, 0 1px 3px 0 rgba(0, 0, 0, 0.1));
  transition: box-shadow 0.2s ease-in-out;
}

.card:hover {
  box-shadow: var(--components-card-hover-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--components-badge-padding, 4px 10px);
  font-size: var(--components-badge-font-size, 12px);
  border-radius: var(--components-badge-border-radius, 12px);
  font-weight: 500;
}

.badge-primary {
  background-color: var(--components-badge-primary-bg, var(--primary));
  color: var(--components-badge-primary-text, #ffffff);
}

.badge-secondary {
  background-color: var(--components-badge-secondary-bg, var(--secondary));
  color: var(--components-badge-secondary-text, #ffffff);
}