@font-face {
        font-family: 'aileron';
        src: url('./fonts/aileron-light-webfont.woff') format('woff'), url('./fonts/aileron-light-webfont.ttf') format('truetype');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
      }

@font-face {
        font-family: 'aileron';
        src: url('./fonts/aileron-regular-webfont.woff') format('woff'), url('./fonts/aileron-regular-webfont.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }

@font-face {
        font-family: 'aileron';
        src: url('./fonts/aileron-semibold-webfont.woff') format('woff'), url('./fonts/aileron-semibold-webfont.ttf') format('truetype');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
      }

@font-face {
        font-family: 'aileron';
        src: url('./fonts/aileron-bold-webfont.woff') format('woff'), url('./fonts/aileron-bold-webfont.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
      }

@font-face {
        font-family: 'aileron';
        src: url('./fonts/aileron-lightitalic-webfont.woff') format('woff'), url('./fonts/aileron-lightitalic-webfont.ttf') format('truetype');
        font-weight: 300;
        font-style: italic;
        font-display: swap;
      }

@font-face {
        font-family: 'aileron';
        src: url('./fonts/aileron-italic-webfont.woff') format('woff'), url('./fonts/aileron-italic-webfont.ttf') format('truetype');
        font-weight: 400;
        font-style: italic;
        font-display: swap;
      }

@font-face {
        font-family: 'aileron';
        src: url('./fonts/aileron-semibolditalic-webfont.woff') format('woff'), url('./fonts/aileron-semibolditalic-webfont.ttf') format('truetype');
        font-weight: 600;
        font-style: italic;
        font-display: swap;
      }

@font-face {
        font-family: 'aileron';
        src: url('./fonts/aileron-bolditalic-webfont.woff') format('woff'), url('./fonts/aileron-bolditalic-webfont.ttf') format('truetype');
        font-weight: 700;
        font-style: italic;
        font-display: swap;
      }
        @font-face {
        font-family: 'aileron-light';
        src: url('./fonts/aileron-light-webfont.woff') format('woff'), url('./fonts/aileron-light-webfont.ttf') format('truetype');
        font-display: swap;
        }

@font-face {
        font-family: 'aileronlight';
        src: url('./fonts/aileron-light-webfont.woff') format('woff'), url('./fonts/aileron-light-webfont.ttf') format('truetype');
        font-display: swap;
        }

@font-face {
        font-family: 'aileronregular';
        src: url('./fonts/aileron-regular-webfont.woff') format('woff'), url('./fonts/aileron-regular-webfont.ttf') format('truetype');
        font-display: swap;
        }

@font-face {
        font-family: 'aileronsemibold';
        src: url('./fonts/aileron-semibold-webfont.woff') format('woff'), url('./fonts/aileron-semibold-webfont.ttf') format('truetype');
        font-display: swap;
        }

@font-face {
        font-family: 'aileron-semibold';
        src: url('./fonts/aileron-semibold-webfont.woff') format('woff'), url('./fonts/aileron-semibold-webfont.ttf') format('truetype');
        font-display: swap;
        }

@font-face {
        font-family: 'aileronbold';
        src: url('./fonts/aileron-bold-webfont.woff') format('woff'), url('./fonts/aileron-bold-webfont.ttf') format('truetype');
        font-display: swap;
        }

@font-face {
        font-family: 'aileron-bold';
        src: url('./fonts/aileron-bold-webfont.woff') format('woff'), url('./fonts/aileron-bold-webfont.ttf') format('truetype');
        font-display: swap;
        }

@font-face {
        font-family: 'aileron-light-italic';
        src: url('./fonts/aileron-lightitalic-webfont.woff') format('woff'), url('./fonts/aileron-lightitalic-webfont.ttf') format('truetype');
        font-display: swap;
        }

@font-face {
        font-family: 'aileronlight_italic';
        src: url('./fonts/aileron-lightitalic-webfont.woff') format('woff'), url('./fonts/aileron-lightitalic-webfont.ttf') format('truetype');
        font-display: swap;
        }

@font-face {
        font-family: 'aileronitalic';
        src: url('./fonts/aileron-italic-webfont.woff') format('woff'), url('./fonts/aileron-italic-webfont.ttf') format('truetype');
        font-display: swap;
        }

@font-face {
        font-family: 'aileron-italic';
        src: url('./fonts/aileron-italic-webfont.woff') format('woff'), url('./fonts/aileron-italic-webfont.ttf') format('truetype');
        font-display: swap;
        }

@font-face {
        font-family: 'aileron-semibold-italic';
        src: url('./fonts/aileron-semibolditalic-webfont.woff') format('woff'), url('./fonts/aileron-semibolditalic-webfont.ttf') format('truetype');
        font-display: swap;
        }

@font-face {
        font-family: 'aileronsemibold_italic';
        src: url('./fonts/aileron-semibolditalic-webfont.woff') format('woff'), url('./fonts/aileron-semibolditalic-webfont.ttf') format('truetype');
        font-display: swap;
        }

@font-face {
        font-family: 'aileron-bold-italic';
        src: url('./fonts/aileron-bolditalic-webfont.woff') format('woff'), url('./fonts/aileron-bolditalic-webfont.ttf') format('truetype');
        font-display: swap;
        }

@font-face {
        font-family: 'aileronbold_italic';
        src: url('./fonts/aileron-bolditalic-webfont.woff') format('woff'), url('./fonts/aileron-bolditalic-webfont.ttf') format('truetype');
        font-display: swap;
        }

@font-face {
        font-family: 'Aileron TDL Dot';
        src: url('./fonts/AileronTDLDot-Bold.woff') format('woff'), url('./fonts/AileronTDLDot-Bold.ttf') format('truetype');
        font-display: swap;
        }

        sonic-display:not(:defined),
sonic-h1:not(:defined),
sonic-h2:not(:defined),
sonic-h3:not(:defined),
sonic-h4:not(:defined),
sonic-h5:not(:defined),
sonic-intro-text:not(:defined),
sonic-large-text:not(:defined),
sonic-text:not(:defined),
theme-visualizer:not(:defined),
sonic-svg:not(:defined),
sonic-link:not(:defined),
sonic-icon:not(:defined),
sonic-button:not(:defined),
sonic-video:not(:defined),
sonic-tree:not(:defined),
sonic-tree-drilled:not(:defined),
sonic-tree-item:not(:defined),
sonic-structured-list:not(:defined),
sonic-structured-list-item:not(:defined),
sonic-skeleton-avatar:not(:defined),
sonic-skeleton-button:not(:defined),
sonic-skeleton-image:not(:defined),
sonic-skeleton-line:not(:defined),
sonic-single-banner:not(:defined),
sonic-section:not(:defined),
sonic-quicklinks:not(:defined),
sonic-quicklinks-item:not(:defined),
sonic-profile-sidebar:not(:defined),
sonic-profile-header:not(:defined),
sonic-profile-card:not(:defined),
sonic-notification:not(:defined),
sonic-news-tile:not(:defined),
sonic-mobile-menu:not(:defined),
sonic-media-card:not(:defined),
sonic-main-menu:not(:defined),
sonic-main-menu-item:not(:defined),
sonic-list:not(:defined),
sonic-list-item:not(:defined),
sonic-image-card:not(:defined),
sonic-image:not(:defined),
sonic-icon-card:not(:defined),
sonic-hero:not(:defined),
sonic-flyout:not(:defined),
sonic-flyout-item:not(:defined),
sonic-flex:not(:defined),
sonic-flat-card:not(:defined),
sonic-feature-card:not(:defined),
sonic-dropdown:not(:defined),
sonic-content:not(:defined),
sonic-container:not(:defined),
sonic-chip-set:not(:defined),
sonic-chip:not(:defined),
sonic-carousel:not(:defined),
sonic-breadcrumb:not(:defined),
sonic-brand-bar:not(:defined),
sonic-basic-card:not(:defined),
sonic-back-to-top:not(:defined),
sonic-autocomplete:not(:defined),
sonic-accordion-item:not(:defined) {
  visibility: hidden;
}


        :root {

  /* Spacing - Fluid (mobile → tablet → desktop) */
  --sd-spacing-none: 0;                                            /* 0px */
  --sd-spacing-xxs: clamp(2px, -0.286px + 0.298vw, 4px);           /* 2px → 2px → 4px */
  --sd-spacing-xs: clamp(2px, -0.113px + 0.563vw, 8px);            /* 2px → 4px (~4.2px) → 8px */
  --sd-spacing-sm: clamp(4px, 0.25px + 1vw, 12px);                 /* 4px → 8px (~7.93px) → 12px */
  --sd-spacing-md: clamp(0.5rem, 0.25rem + 1vw, 1rem);             /* 8px → 12px (~11.68px) → 16px */
  --sd-spacing-lg: clamp(12px, 7.775px + 1.127vw, 24px);           /* 12px → 16px (~16.43px) → 24px */
  --sd-spacing-xl: clamp(16px, 8.5px + 2vw, 32px);                 /* 16px → 24px (~23.86px) → 32px */
  --sd-spacing-xxl: clamp(24px, 15.549px + 2.254vw, 48px);         /* 24px → 32px (~32.85px) → 48px */

   /* Spacing - Static */
  --sd-spacing-static-none: 0;           /* 0rem */
  --sd-spacing-static-xxs: 0.25rem;      /* 4px */
  --sd-spacing-static-xs: 0.5rem;        /* 8px */
  --sd-spacing-static-sm: 0.75rem;       /* 12px */
  --sd-spacing-static-md: 1rem;          /* 16px */
  --sd-spacing-static-lg: 1.5rem;        /* 24px */
  --sd-spacing-static-xl: 2rem;          /* 32px */
  --sd-spacing-static-xxl: 3rem;         /* 48px */


  /* Padding - Fluid (mobile → tablet → desktop) */
  --sd-padding-none: 0;                                            /* 0px */
  --sd-padding-xxs: clamp(2px, -0.286px + 0.298vw, 4px);           /* 2px → 2px → 4px */
  --sd-padding-xs: clamp(2px, -0.113px + 0.563vw, 8px);            /* 2px → 4px (~4.2px) → 8px */
  --sd-padding-sm: clamp(4px, 0.25px + 1vw, 12px);                 /* 4px → 8px (~7.93px) → 12px */
  --sd-padding-md: clamp(0.5rem, 0.25rem + 1vw, 1rem);             /* 8px → 12px (~11.68px) → 16px */
  --sd-padding-lg: clamp(12px, 7.775px + 1.127vw, 24px);           /* 12px → 16px (~16.43px) → 24px */
  --sd-padding-xl: clamp(16px, 8.5px + 2vw, 32px);                 /* 16px → 24px (~23.86px) → 32px */
  --sd-padding-xxl: clamp(24px, 15.549px + 2.254vw, 48px);         /* 24px → 32px (~32.85px) → 48px */

  /* Padding - Static */
  --sd-padding-static-none: 0;           /* 0rem */
  --sd-padding-static-xxs: 0.25rem;      /* 4px */
  --sd-padding-static-xs: 0.5rem;        /* 8px */
  --sd-padding-static-sm: 0.75rem;       /* 12px */
  --sd-padding-static-md: 1rem;          /* 16px */
  --sd-padding-static-lg: 1.5rem;        /* 24px */
  --sd-padding-static-xl: 2rem;          /* 32px */
  --sd-padding-static-xxl: 3rem;         /* 48px */

  /* Border Radius */
  --sd-border-radius-none: 0;         /* 0px */
  --sd-border-radius-xs: 0.125rem;    /* 2px */
  --sd-border-radius-sm: 0.25rem;     /* 4px */
  --sd-border-radius-md: 0.5rem;      /* 8px */
  --sd-border-radius-lg: 1rem;        /* 16px */
  --sd-border-radius-pill: 3.125rem;  /* 50px */
  --sd-border-radius-round: 50%;      /* 50% */ 

  /* Shadows */
  --sd-shadow-none: none;
  --sd-shadow-sm: 0 1px 1px 0 rgba(0, 0, 0, 0.10);
  --sd-shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
  --sd-shadow-lg: 0 2px 8px 0 rgba(0, 0, 0, 0.10);
  --sd-shadow-xl: 0 2px 16px 0 rgba(0, 0, 0, 0.10);
  --sd-shadow-2xl: 0 2px 24px 0 rgba(0, 0, 0, 0.10);

  /* Transitions */
  --transition-value: 250ms;
  --sd-transition-fast: 150ms;
  --sd-transition-base: 250ms;
  --sd-transition-slow: 350ms;
  --sd-transition-slower: 500ms;

  /* Opacity */
  --sd-opacity-0: 0%;
  --sd-opacity-8: 8%;
  --sd-opacity-20: 20%;           
  --sd-opacity-50: 50%;           
  --sd-opacity-80: 80%;           

  /* Fonts */
  --sd-font-family-primary: aileron;
  --sd-font-family-monospace: "Courier New", Courier, monospace;

  /* Font Sizes - Fluid (mobile → tablet → desktop) */
  --sd-font-size-sm: 1rem;                                           /* 16px - static, min accessible */
  --sd-font-size-md: 1.125rem;                                       /* 18px - static */
  --sd-font-size-lg: 1.25rem;                                        /* 20px - static */
  --sd-font-size-xl: clamp(18px, 16.125px + 0.5vw, 22px);            /* 18px → 20px → 22px */
  --sd-font-size-2xl: clamp(20px, 15.120px + 1.3vw, 32px);           /* 20px → 24px → 32px */
  --sd-font-size-3xl: clamp(24px, 16.125px + 2.1vw, 40px);           /* 24px → 32px → 40px */
  --sd-font-size-4xl: clamp(32px, 24.125px + 2.1vw, 48px);           /* 32px → 40px → 48px */

  /* Font Weights */
  --sd-font-weight-regular: 400;
  --sd-font-weight-semibold: 600;
  --sd-font-weight-bold: 700;

  /* Line Heights - unitless multipliers */
  --sd-line-height-tight: 1.1;      /* 110% */
  --sd-line-height-snug: 1.25;      /* 125% */
  --sd-line-height-normal: 1.4;     /* 140% */
  --sd-line-height-relaxed: 1.5;    /* 150% */

  /* Container max-widths (Bootstrap-inspired breakpoints) */
  --sd-container-lg: 960px;
  --sd-container-xl: 1140px;
  --sd-container-xxl: 1416px;

        }