/** Shopify CDN: Minification failed

Line 735:11 Expected ":"
Line 737:11 Expected ":"

**/
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* CTA link base */
.ntw-btn-deluxe {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  display: inline-block;
}

/* 1px gradient border */
.ntw-btn-deluxe-gradient-border {
  padding: 1px;
  border-radius: 9999px;
  background: linear-gradient(to bottom, #a63abb, #931faa);
}

/* 1px purple overlay */
.ntw-btn-deluxe-purple-frame {
  padding: 1px;
  border-radius: 9999px;
  height: 100%;
  background: #BA24D5;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0)        100%
  );
}

/* Inner content: auto‑sizing, icon + text */
.ntw-btn-deluxe-inner-frame {
  display: inline-flex;
  align-items: center;
  height: 100%;
  gap: 6px;
  padding: 8px 14px;   /* 8px top/bottom, 14px left/right */
  border-radius: 1px;
  background: #BA24D5;
}

.ntw-btn-deluxe-inner-frame svg {
  flex-shrink: 0;
}

/* extra padding around the text */
.ntw-btn-deluxe-text {
  padding: 0 2px;
}

.ntw-btn-deluxe-inner-frame:hover {
  filter: brightness(0.9);
}

.ntw-btn-deluxe-inner-frame:active {
  filter: brightness(1);
}

.ntw-s-cta a:hover {
  filter: brightness(0.9);
}

.ntw-s-cta a:active {
  filter: brightness(1);
}

@media (max-width: 1440px) {
  /* CTA link base */
.ntw-btn-deluxe {
  color: #fff;
  width: 100%;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
  display: inline-block;
}

/* 1px gradient border */
.ntw-btn-deluxe-gradient-border {
  padding: 1px;
  width: 100%;
  border-radius: 9999px;
  background: linear-gradient(to bottom, #a63abb, #931faa);
}

/* 1px purple overlay */
.ntw-btn-deluxe-purple-frame {
  padding: 1px;
  border-radius: 9999px;
  width: 100%;
  height: 100%;
  background: #BA24D5;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0)        100%
  );
}
/* either globally */
*, *::before, *::after {
  box-sizing: border-box;
}

/* or just on your button wrappers */
.ntw-btn-deluxe-gradient-border,
.ntw-btn-deluxe-purple-frame,
.ntw-btn-deluxe-inner-frame {
  box-sizing: border-box;
}
/* Inner content: auto‑sizing, icon + text */
.ntw-btn-deluxe-inner-frame {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
      justify-content: center;
  padding: 8px 14px;   /* 8px top/bottom, 14px left/right */
  border-radius: 9999px;
  background: #BA24D5;
}
}


html, body {
  margin: 0;
  padding: 0;
  background: black; /* or whatever dark color you’re using */
  /* overflow-x: hidden;  */
  width: 100%;
}


.heading-wrapper {
  position: relative;
  max-width: 415px;
  margin: 0 auto var(--spacing-xl);
}

.blurred-heading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: yellow;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

.real-heading {
  position: relative;
  color: white;
  z-index: 1;
}


.ntw-main-sub-heading {
  background: linear-gradient(90deg, var(--Colors-Yellow-400, #FAC515) 41.36%, var(--Colors-Brand-500, #D444F1) 59.68%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}



/* NTW Announcement Bar Styles */
.ntw-announcement-bar {
  background-color: var(--bg-brand-section_subtle);
  border-bottom: 1px solid var(--border-brand);
  height: var(--space-12);
  display: flex;
  align-items: center;
}

.ntw-container {
  color: var(--text-primary);
  max-width: calc(var(--container-max-width-desktop) + 80px);
  padding: 0 40px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ntw-announcement-item {
  flex: 1;
  text-align: center;
}


/* override flex on small screens so Swiper can take over */
@media (max-width: 1439px) {
  .ntw-container.asddsjqf { display: block; overflow: hidden; }
  .swiper-announcement .swiper-slide { text-align: center; }
  .ntw-container .swiper-slide {
    text-align: center;
  }
}
@media (min-width: 1440px) {
  /* restore your 3-col flex for desktop */
  .ntw-container { display: flex !important; }
  .ntw-container .swiper-slide {
    width: auto !important;
  }
}





.price-list.price-list--lg .text-lg.text-on-sale {
  color: var(--colors-text-text-primary-900, #181D27);

/* Display xs/Semibold */
font-family: var(--Font-family-font-family-display, Inter);
font-size: var(--Font-size-display-xs, 24px);
font-style: normal;
font-weight: 600;
line-height: var(--Line-height-display-xs, 32px); /* 133.333% */
}

.price-list.price-list--lg .text-subdued.line-through {
color: var(--colors-text-text-secondary-700, #414651);

/* Text lg/Regular */
font-family: var(--Font-family-font-family-body, Inter);
font-size: var(--Font-size-text-lg, 18px);
font-style: normal;
font-weight: 400;
line-height: var(--Line-height-text-lg, 28px);
text-decoration-line: line-through;
}

.product-info__price .text-sm.text-subdued {
color: var(--colors-text-text-primary-900, #181D27);

/* Text md/Regular */
font-family: var(--Font-family-font-family-body, Inter);
font-size: var(--Font-size-text-md, 16px);
font-style: normal;
font-weight: 400;
line-height: var(--Line-height-text-md, 24px);
}

.rating-with-text .product-info__badge-list .badge--on-sale {
  display: flex;
padding: var(--spacing-xs, 4px) var(--spacing-lg, 12px);
align-items: center;
  border-radius: var(--radius-full, 9999px);
border: 1px solid var(--Component-colors-Utility-Pink-utility-pink-200, #FCCEEE);
background: var(--Component-colors-Utility-Pink-utility-pink-50, #FDF2FA);
  color: var(--Component-colors-Utility-Pink-utility-pink-700, #C11574);
text-align: center;

/* Text sm/Medium */
font-family: var(--Font-family-font-family-body, Inter);
font-size: var(--Font-size-text-sm, 14px);
font-style: normal;
font-weight: 500;
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
}



.dark-primary-text-color {
  color: #F7F7F7 !important;
}

.dark-tertiary-text-color {
  color: #94979c !important;
}

.light-primary-text-color {
  color: #181D27 !important;
}

.light-tertiary-text-color {
  color: #535862 !important;
}

.globo-form-control.ntw-globo-form-heading {
  align-items: center;
  margin-top: 24px !important;
}

.ntw-globo-form-logo-or-text {
  display: flex;
padding: var(--spacing-xs, 4px) !important;
justify-content: center;
align-items: center;
gap: var(--spacing-xs, 4px);
align-self: stretch;
  border-radius: var(--radius-lg, 10px);
border: 1px solid var(--Colors-Border-border-secondary, #E9EAEB);
background: var(--Colors-Background-bg-secondary_alt, #FAFAFA);
}

.ntw-globo-form-logo-or-text .globo-form-input {
  width: 100%;
}

.ntw-globo-form-logo-or-text .gfb__button-container {
  width: 100%;
}

.ntw-globo-form-logo-or-text div .globo-list-control {
  flex: 1 0 0;

}

.ntw-globo-form-logo-or-text div .globo-list-control label {
  margin: 0px;
}

.ntw-globo-form-logo-or-text div .globo-list-control label {
  display: flex !important;
height: 36px !important;
padding: var(--spacing-md, 8px) var(--spacing-lg, 12px) !important;
justify-content: center !important;
align-items: center !important;
gap: var(--spacing-md, 8px !important);
flex: 1 0 0 !important;
border-radius: var(--radius-sm, 6px) !important;
  color: var(--colors-text-text-quaternary-500, #717680) !important;

/* Text sm/Semibold */
font-family: var(--Font-family-font-family-body, Inter) !important;
font-size: var(--Font-size-text-sm, 14px) !important;
font-style: normal !important;
font-weight: 600 !important;
line-height: var(--Line-height-text-sm, 20px) !important; /* 142.857% */
  background: var(--Colors-Background-bg-secondary_alt, #FAFAFA) !important;
}

.ntw-globo-form-logo-or-text div .globo-list-control input:checked+label {
    display: flex;
height: 36px;
padding: var(--spacing-md, 8px) var(--spacing-lg, 12px) !important;
justify-content: center !important;
align-items: center !important;
gap: var(--spacing-md, 8px) !important;
  border-radius: var(--radius-sm, 6px) !important;
border: 1px solid var(--Colors-Border-border-brand_alt, #BA24D5) !important;
background: var(--Colors-Background-bg-primary_alt, #FFF) !important;
color: var(--colors-text-text-secondary-700, #414651) !important;

/* Text sm/Semibold */
font-family: var(--Font-family-font-family-body, Inter) !important;
font-size: var(--Font-size-text-sm, 14px) !important;
font-style: normal !important;
font-weight: 600 !important;
line-height: var(--Line-height-text-sm, 20px) !important; /* 142.857% */
/* Shadows/shadow-sm */
box-shadow: 0px 1px 3px 0px var(--Colors-Effects-Shadows-shadow-sm_01, rgba(10, 13, 18, 0.10)), 0px 1px 2px -1px var(--Colors-Effects-Shadows-shadow-sm_02, rgba(10, 13, 18, 0.10)) !important;
}


.ntw-globo-form-upload-je-logo .globo-form-input {
  all: unset;
  display: flex;
padding: var(--spacing-xl, 16px) var(--spacing-3xl, 24px);
flex-direction: column;
align-items: center;
gap: var(--spacing-xs, 4px);
align-self: stretch;
  border-radius: var(--radius-xl, 12px);
border: 1px solid var(--Colors-Border-border-secondary, #E9EAEB);
background: var(--Colors-Background-bg-primary, #FFF);
  
}

.ntw-globo-form-upload-je-logo div .gfb__dropzone {
  all: unset !important;
  width: 100%;
  height: 100%;
}

.ntw-globo-form-upload-je-logo div .gfb__dropzone .gfb__dropzone--content {
  all: unset;
  width: 100%;
  height: 100%;
}

.ntw-globo-form-upload-je-logo div .gfb__dropzone .gfb__dropzone--content .gfb__dropzone--placeholder .gfb__dropzone--placeholder--title {
  all: unset;
  display: flex;
    align-items: center;
    flex-direction: column;
}

.ntw-globo-form-upload-je-logo div .gfb__dropzone .gfb__dropzone--content .gfb__dropzone--placeholder .gfb__dropzone--placeholder--title  {
  text-align: center;
  color: var(--colors-text-text-tertiary-600, #535862);

/* Text sm/Regular */
font-family: var(--Font-family-font-family-body, Inter);
font-size: var(--Font-size-text-sm, 14px);
font-style: normal;
font-weight: 400;
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
}

.ntw-globo-form-upload-je-logo div .gfb__dropzone .gfb__dropzone--content .gfb__dropzone--placeholder .gfb__dropzone--placeholder--title button {
  color: var(--Component-colors-Components-Buttons-Tertiary-color-button-tertiary-color-fg, #9F1AB1);

/* Text sm/Semibold */
font-family: var(--Font-family-font-family-body, Inter);
font-size: var(--Font-size-text-sm, 14px);
font-style: normal;
font-weight: 600;
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
}
.gfb__dropzone--placeholder--description {
  all: unset;
  color: var(--colors-text-text-tertiary-600, #535862);
text-align: center;

/* Text xs/Regular */
font-family: var(--Font-family-font-family-body, Inter);
font-size: var(--Font-size-text-xs, 12px);
font-style: normal;
font-weight: 400;
line-height: var(--Line-height-text-xs, 18px); /* 150% */
}

.ntw-globo-form-upload-je-logo div .gfb__dropzone .gfb__dropzone--content .gfb__dropzone--placeholder .gfb__dropzone--placeholder--button {
  display: none;
}

.globo-form-control.layout-1-column.ntw-drpd {
  width: 100%;
  max-width: 300px;
}

.globo-form-control.layout-1-column.ntw-drpd .globo-form-input {
  border: 1px solid #D5D7DA;
box-shadow: 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(10, 13, 18, 0.05));
  background-color: white !important;
}

.globo-form-control.layout-1-column[data-type="radio"] label span {
color: var(--colors-text-text-secondary-700, #414651);

/* Text sm/Semibold */
font-family: var(--Font-family-font-family-body, Inter);
font-size: var(--Font-size-text-sm, 14px);
font-style: normal;
font-weight: 600;
line-height: var(--Line-height-text-sm, 20px); /* 142.857% */
}
.globo-form-control.layout-1-column[data-type="radio"] label {
  margin-bottom: 16px;
}

.ntw-jifm{
  color: var(--colors-text-text-primary-900, #181D27);

/* Text lg/Bold */
font-family: var(--Font-family-font-family-body, Inter);
font-size: var(--Font-size-text-lg, 18px);
font-style: normal;
font-weight: 700;
line-height: var(--Line-height-text-lg, 28px); /* 155.556% */
}
.globo-form-control.layout-1-column.ntw-input-v .globo-form-input {
  box-shadow: 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(10, 13, 18, 0.05));
background: white !important;
border: 1px solid var(--Colors-Border-border-primary, #D5D7DA);

}

.globo-form-control.layout-1-column.ntw-input-v label.globo-label.material_filled-label.gfb__label-v2 {
  color: #717680 !important;
}

.gfb__footer button.submit.wizard__submit {
  border-radius: var(--radius-full, 9999px);
border: 2px solid var(--Gradient-skeuemorphic-gradient-border, rgba(255, 255, 255, 0.12));
background: var(--Component-colors-Components-Buttons-Primary-button-primary-bg, #BA24D5);
  height: 48px;

/* Shadows/shadow-xs-skeuomorphic */
box-shadow: 0px 0px 0px 1px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner-border, rgba(10, 13, 18, 0.18)) inset, 0px -2px 0px 0px var(--Colors-Effects-Shadows-shadow-skeumorphic-inner, rgba(10, 13, 18, 0.05)) inset, 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(10, 13, 18, 0.05));
}

/* ntw-theme.css */

/* ==========================================================================
   Global Tokens (Palette, Spacing, Typography, etc.)
   ========================================================================== */

/* ==========================================================================
   Spacing Utilities (based on --spacing-* tokens)
   ========================================================================== */
/* Padding */
.p-none   { padding: var(--spacing-none); }
.p-xxs    { padding: var(--spacing-xxs); }
.p-xs     { padding: var(--spacing-xs); }
.p-sm     { padding: var(--spacing-sm); }
.p-md     { padding: var(--spacing-md); }
.p-lg     { padding: var(--spacing-lg); }
.p-xl     { padding: var(--spacing-xl); }
.p-2xl    { padding: var(--spacing-2xl); }
.p-3xl    { padding: var(--spacing-3xl); }
.p-4xl    { padding: var(--spacing-4xl); }
.p-5xl    { padding: var(--spacing-5xl); }
.p-6xl    { padding: var(--spacing-6xl); }
.p-7xl    { padding: var(--spacing-7xl); }
.p-8xl    { padding: var(--spacing-8xl); }
.p-9xl    { padding: var(--spacing-9xl); }
.p-10xl   { padding: var(--spacing-10xl); }
.p-11xl   { padding: var(--spacing-11xl); }

/* Margin */
.m-none   { margin: var(--spacing-none); }
.m-xxs    { margin: var(--spacing-xxs); }
.m-xs     { margin: var(--spacing-xs); }
.m-sm     { margin: var(--spacing-sm); }
.m-md     { margin: var(--spacing-md); }
.m-lg     { margin: var(--spacing-lg); }
.m-xl     { margin: var(--spacing-xl); }
.m-2xl    { margin: var(--spacing-2xl); }
.m-3xl    { margin: var(--spacing-3xl); }
.m-4xl    { margin: var(--spacing-4xl); }
.m-5xl    { margin: var(--spacing-5xl); }
.m-6xl    { margin: var(--spacing-6xl); }
.m-7xl    { margin: var(--spacing-7xl); }
.m-8xl    { margin: var(--spacing-8xl); }
.m-9xl    { margin: var(--spacing-9xl); }
.m-10xl   { margin: var(--spacing-10xl); }
.m-11xl   { margin: var(--spacing-11xl); }

/* You can also add directional padding/margin classes (e.g. .pt-sm, .mr-lg, etc.) */

/* ==========================================================================
   Radius Utilities (based on --radius-* tokens)
   ========================================================================== */
.radius-none  { border-radius: var(--radius-none); }
.radius-xxs   { border-radius: var(--radius-xxs); }
.radius-xs    { border-radius: var(--radius-xs); }
.radius-sm    { border-radius: var(--radius-sm); }
.radius-md    { border-radius: var(--radius-md); }
.radius-lg    { border-radius: var(--radius-lg); }
.radius-xl    { border-radius: var(--radius-xl); }
.radius-2xl   { border-radius: var(--radius-2xl); }
.radius-3xl   { border-radius: var(--radius-3xl); }
.radius-4xl   { border-radius: var(--radius-4xl); }
.radius-full  { border-radius: var(--radius-full); }

/* ==========================================================================
   Typography Utilities
   ========================================================================== */
/* Text sizes & line heights */
.text-display-2xl {
  font-size: var(--text-display-2xl-size);
  line-height: var(--text-display-2xl-line);
}
.text-display-xl {
  font-size: var(--text-display-xl-size);
  line-height: var(--text-display-xl-line);
}

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

@media (max-width: 1440px) {
  .text-display-lg {
    font-size: 30px;
    line-height: 38px;
  }
}

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

@media (max-width: 1440px) {
  .text-display-md {
    font-size: 30px;
    line-height: 38px;
  }
}

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

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

@media (max-width: 1440px) {
  .text-xl {
    font-size: 18px;
  }
}

.text-lg {
  font-size: var(--text-lg-size);
  line-height: var(--text-lg-line);
}
.text-md {
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
}
.text-sm {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
}
.text-xs {
  font-size: var(--text-xs-size);
  line-height: var(--text-xs-line);
}

/* Font weight utilities */
.regular {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight-regular);
}
.medium {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight-medium);
}
.semibold {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: var(--font-weight-semibold);
  font-style: normal;
}
.bold {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight-bold);
}


:root {
  /* Color Palette */
  --gray-25: #FAFAFA;
  --gray-50: #F7F7F7;
  --gray-100: #F0F0F1;
  --gray-200: #ECECED;
  --gray-300: #CECFD2;
  --gray-400: #94979C;
  --gray-500: #85888E;
  --gray-600: #61656C;
  --gray-700: #373A41;
  --gray-800: #22262F;
  --gray-900: #13161B;
  --gray-950: #0C0E12;

  --brand-25:  #FEFAFF;
  --brand-50:  #FDF4FF;
  --brand-100: #FBE8FF;
  --brand-200: #F6D0FE;
  --brand-300: #EEAAFD;
  --brand-400: #E478FA;
  --brand-500: #D444F1;
  --brand-600: #BA24D5;
  --brand-700: #9F1AB1;
  --brand-800: #821890;
  --brand-900: #6F1877;
  --brand-950: #47104C;

  --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;

  --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;

  --success-25:  #F6FEF9;
  --success-50:  #ECFDF3;
  --success-100: #D1FADF;
  --success-200: #ABEFCC;
  --success-300: #75E0A7;
  --success-400: #47CD89;
  --success-500: #17B26A;
  --success-600: #079455;
  --success-700: #067647;
  --success-800: #085D3A;
  --success-900: #074D31;
  --success-950: #053321;

  /* Spacing Tokens */
  --space-0: 0rem;
  --space-0.5: 0.125rem;
  --space-1: 0.25rem;
  --space-1.5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;
  --space-56: 14rem;
  --space-64: 16rem;
  --space-80: 20rem;
  --space-96: 24rem;
  --space-120: 30rem;
  --space-140: 35rem;
  --space-160: 40rem;
  --space-180: 45rem;
  --space-192: 48rem;
  --space-256: 64rem;
  --space-320: 80rem;
  --space-360: 90rem;
  --space-400: 100rem;
  --space-480: 120rem;

  /* Border Radius */
  --radius-none: 0rem;
  --radius-xxs: 0.125rem;
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.25rem;
  --radius-4xl: 1.5rem;
  --radius-full: 9999px;

  /* Spacing Scale (Aliases) */
  --spacing-none: 0rem;
  --spacing-xxs: 0.125rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.375rem;
  --spacing-md: 0.5rem;
  --spacing-lg: 0.75rem;
  --spacing-xl: 1rem;
  --spacing-2xl: 1.25rem;
  --spacing-3xl: 1.5rem;
  --spacing-4xl: 2rem;
  --spacing-5xl: 2.5rem;
  --spacing-6xl: 3rem;
  --spacing-7xl: 4rem;
  --spacing-8xl: 5rem;
  --spacing-9xl: 6rem;
  --spacing-10xl: 8rem;
  --spacing-11xl: 10rem;

  /* Width Tokens */
  --width-xxs: 20rem;
  --width-xs: 24rem;
  --width-sm: 30rem;
  --width-md: 35rem;
  --width-lg: 40rem;
  --width-xl: 48rem;
  --width-2xl: 64rem;
  --width-3xl: 80rem;
  --width-4xl: 90rem;
  --width-5xl: 100rem;
  --width-6xl: 120rem;

  /* Container */
  --container-padding-mobile: 1rem;
  --container-padding-desktop: 2rem;
  --container-max-width-desktop: 80rem;

  /* Typography */
  --paragraph-max-width: 45rem;

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

  /* Text Styles */
  --text-display-2xl-size: 4.5rem;
  --text-display-2xl-line: 5.625rem;
  --text-display-2xl-spacing: -2%;
  --text-display-xl-size: 3.75rem;
  --text-display-xl-line: 4.5rem;
  --text-display-xl-spacing: -2%;
  --text-display-lg-size: 3rem;
  --text-display-lg-line: 3.75rem;
  --text-display-lg-spacing: -2%;
  --text-display-md-size: 2.25rem;
  --text-display-md-line: 2.75rem;
  --text-display-md-spacing: -2%;
  --text-display-sm-size: 1.875rem;
  --text-display-sm-line: 2.375rem;
  --text-display-sm-spacing: -2%;
  --text-display-xs-size: 1.5rem;
  --text-display-xs-line: 2rem;
  --text-xl-size: 1.25rem;
  --text-xl-line: 1.875rem;
  --text-lg-size: 1.125rem;
  --text-lg-line: 1.75rem;
  --text-md-size: 1rem;
  --text-md-line: 1.5rem;
  --text-sm-size: 0.875rem;
  --text-sm-line: 1.25rem;
  --text-xs-size: 0.75rem;
  --text-xs-line: 1.125rem;
}

/* ==========================================================================
   Light Mode Tokens (Scoped under .light)
   ========================================================================== */
.light {
  /* Text Colors */
  --text-primary: var(--gray-900);
  --text-primary_on-brand: white;
  --text-secondary: var(--gray-700);
  --text-secondary_hover: var(--gray-800);
  --text-secondary_on-brand: var(--brand-200);
  --text-tertiary: var(--gray-600);
  --text-tertiary_hover: var(--gray-700);
  --text-tertiary_on-brand: var(--brand-200);
  --text-quaternary: var(--gray-500);
  --text-quaternary_on-brand: var(--brand-300);
  --text-white: white;
  --text-disabled: var(--gray-500);
  --text-placeholder: var(--gray-500);
  --text-placeholder_subtle: var(--gray-300);
  --text-brand-primary: var(--brand-900);
  --text-brand-secondary: var(--brand-700);
  --text-brand-tertiary: var(--brand-600);
  --text-brand-tertiary_alt: var(--brand-600);
  --text-error-primary: var(--error-600);
  --text-warning-primary: var(--warning-600);
  --text-success-primary: var(--success-600);

  /* Border Colors */
  --border-primary: var(--gray-300);
  --border-secondary: var(--gray-200);
  --border-tertiary: var(--gray-100);
  --border-disabled: var(--gray-300);
  --border-disabled_subtle: var(--gray-200);
  --border-brand: var(--brand-500);
  --border-brand_alt: var(--brand-600);
  --border-error: var(--error-500);
  --border-error_subtle: var(--error-300);

  /* Foreground Colors */
  --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: var(--gray-500);
  --fg-quaternary_hover: var(--gray-600);
  --fg-quinary: var(--gray-400);
  --fg-quinary_hover: var(--gray-500);
  --fg-senary: var(--gray-300);
  --fg-white: white;
  --fg-disabled: var(--gray-400);
  --fg-disabled_subtle: var(--gray-300);
  --fg-brand-primary: var(--brand-600);
  --fg-brand-primary_alt: var(--brand-600);
  --fg-brand-secondary: var(--brand-500);
  --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);

  /* Background Colors */
  --bg-primary: white;
  --bg-primary_alt: white;
  --bg-primary_hover: var(--gray-50);
  --bg-primary-solid: var(--gray-950);
  --bg-secondary: var(--gray-50);
  --bg-secondary_alt: var(--gray-50);
  --bg-secondary_hover: var(--gray-100);
  --bg-secondary_subtle: var(--gray-25);
  --bg-secondary-solid: var(--gray-600);
  --bg-tertiary: var(--gray-100);
  --bg-quaternary: var(--gray-200);
  --bg-active: var(--gray-50);
  --bg-disabled: var(--gray-100);
  --bg-disabled_subtle: var(--gray-50);
  --bg-overlay: var(--gray-950);
  --bg-brand-primary: var(--brand-50);
  --bg-brand-primary_alt: var(--brand-50);
  --bg-brand-secondary: var(--brand-100);
  --bg-brand-solid: var(--brand-600);
  --bg-brand-solid_hover: var(--brand-700);
  --bg-brand-section: var(--brand-800);
  --bg-brand-section_subtle: var(--brand-700);
  --bg-error-primary: var(--error-50);
  --bg-error-secondary: var(--error-100);
  --bg-error-solid: var(--error-600);
  --bg-warning-primary: var(--warning-50);
  --bg-warning-secondary: var(--warning-100);
  --bg-warning-solid: var(--warning-600);
  --bg-success-primary: var(--success-50);
  --bg-success-secondary: var(--success-100);
  --bg-success-solid: var(--success-600);
}

/* ==========================================================================
   Dark Mode Tokens (Scoped under .dark)
   ========================================================================== */
.dark {
  /* Text Colors */
  --text-primary: var(--gray-50);
  --text-primary_on-brand: var(--gray-50);
  --text-secondary: var(--gray-300);
  --text-secondary_hover: var(--gray-200);
  --text-secondary_on-brand: var(--gray-300);
  --text-tertiary: var(--gray-400);
  --text-tertiary_hover: var(--gray-300);
  --text-tertiary_on-brand: var(--gray-400);
  --text-quaternary: var(--gray-400);
  --text-quaternary_on-brand: var(--gray-400);
  --text-white: white;
  --text-disabled: var(--gray-500);
  --text-placeholder: var(--gray-400);
  --text-placeholder_subtle: var(--gray-700);
  --text-brand-primary: var(--gray-50);
  --text-brand-secondary: var(--gray-300);
  --text-brand-tertiary: var(--gray-400);
  --text-brand-tertiary_alt: var(--gray-50);
  --text-error-primary: var(--error-400);
  --text-warning-primary: var(--warning-400);
  --text-success-primary: var(--success-400);

  /* Border Colors */
  --border-primary: var(--gray-700);
  --border-secondary: var(--gray-800);
  --border-tertiary: var(--gray-800);
  --border-disabled: var(--gray-700);
  --border-disabled_subtle: var(--gray-800);
  --border-brand: var(--brand-400);
  --border-brand_alt: var(--gray-700);
  --border-error: var(--error-400);
  --border-error_subtle: var(--error-400);

  /* Foreground Colors */
  --fg-primary: 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: var(--gray-400);
  --fg-quaternary_hover: var(--gray-300);
  --fg-quinary: var(--gray-500);
  --fg-quinary_hover: var(--gray-400);
  --fg-senary: var(--gray-600);
  --fg-white: white;
  --fg-disabled: var(--gray-500);
  --fg-disabled_subtle: var(--gray-600);
  --fg-brand-primary: var(--brand-500);
  --fg-brand-primary_alt: var(--gray-300);
  --fg-brand-secondary: var(--brand-500);
  --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);

  /* Background Colors */
  --bg-primary: var(--gray-950);
  --bg-primary_alt: var(--gray-900);
  --bg-primary_hover: var(--gray-800);
  --bg-primary-solid: var(--gray-900);
  --bg-secondary: var(--gray-900);
  --bg-secondary_alt: var(--gray-950);
  --bg-secondary_hover: var(--gray-800);
  --bg-secondary_subtle: var(--gray-900);
  --bg-secondary-solid: var(--gray-600);
  --bg-tertiary: var(--gray-800);
  --bg-quaternary: var(--gray-700);
  --bg-active: var(--gray-800);
  --bg-disabled: var(--gray-800);
  --bg-disabled_subtle: var(--gray-900);
  --bg-overlay: var(--gray-600);
  --bg-brand-primary: var(--brand-500);
  --bg-brand-primary_alt: var(--gray-800);
  --bg-brand-secondary: var(--brand-600);
  --bg-brand-solid: var(--brand-600);
  --bg-brand-solid_hover: var(--brand-500);
  --bg-brand-section: var(--gray-800);
  --bg-brand-section_subtle: var(--gray-950);
  --bg-error-primary: var(--error-500);
  --bg-error-secondary: var(--error-600);
  --bg-error-solid: var(--error-600);
  --bg-warning-primary: var(--warning-500);
  --bg-warning-secondary: var(--warning-600);
  --bg-warning-solid: var(--warning-600);
  --bg-success-primary: var(--success-500);
  --bg-success-secondary: var(--success-600);
  --bg-success-solid: var(--success-600);
}

/* ==========================================================================
   Sample Usage

.light body,
.dark body {
  margin: 0;
  font-family: sans-serif;
}

 Example: Using background and text colors
.light body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.dark body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}
   ========================================================================== */