/*
   Breakpoints:
   - Mobile (Base)
   - Tablet: 522px - 874px
   - Desktop: 875px+
*/


/* ---------------------------
  Mobile (Base)
  --------------------------- */

:root {

  /* 01A. Tonal Palettes */

  --primary-00: #f9f9fb;
  --primary-10: #ebeaf2;
  --primary-15: #d8d6e6;
  --primary-20: #c0bdd6;
  --primary-30: #a39ec3;
  --primary-40: #8780b1;
  --primary-50: #6a629e;
  --primary-60: #595284;
  --primary-70: #444064;
  --primary-80: #302d43;
  --primary-85: #242232;
  --primary-90: #121118;
  --secondary-00: #fafdfe;
  --secondary-10: #e6f5f8;
  --secondary-15: #cfecf2;
  --secondary-20: #a6dde7;
  --secondary-30: #89cedc;
  --secondary-40: #5abbce;
  --secondary-50: #3badc4;
  --secondary-60: #268193;
  --secondary-70: #1f626f;
  --secondary-80: #143f48;
  --secondary-85: #0e2a2f;
  --secondary-90: #071518;
  --tertiary-00: #fefafb;
  --tertiary-10: #fae8eb;
  --tertiary-15: #f2cbd2;
  --tertiary-20: #ebaeb8;
  --tertiary-30: #da8291;
  --tertiary-40: #d06274;
  --tertiary-50: #c43b52;
  --tertiary-60: #9d2f41;
  --tertiary-70: #742532;
  --tertiary-80: #4e1821;
  --tertiary-85: #2b1216;
  --tertiary-90: #0f0507;
  --gray-00: #f8f7fa;
  --gray-10: #eeeef0;
  --gray-15: #dedee0;
  --gray-20: #cdcdd1;
  --gray-30: #bebec2;
  --gray-40: #a0a0a3;
  --gray-50: #807f85;
  --gray-60: #626266;
  --gray-70: #4d4d52;
  --gray-80: #3a3a3d;
  --gray-85: #262629;
  --gray-90: #131314;
  --gray-white: #ffffff;
  --gray-black: #000000;

  /* 01B. Scales */

  --scale-unit-00: 0px;
  --scale-unit-02: 2px;
  --scale-unit-04: 4px;
  --scale-unit-08: 8px;
  --scale-unit-12: 12px;
  --scale-unit-16: 16px;
  --scale-unit-20: 20px;
  --scale-unit-24: 24px;
  --scale-unit-32: 32px;
  --scale-unit-40: 40px;
  --scale-unit-48: 48px;
  --scale-unit-64: 64px;
  --scale-unit-80: 80px;
  --scale-unit-96: 96px;
  --scale-unit-999: 999px;
  --scale-typography-10: 10px;
  --scale-typography-12: 12px;
  --scale-typography-14: 14px;
  --scale-typography-16: 16px;
  --scale-typography-18: 18px;
  --scale-typography-20: 20px;
  --scale-typography-24: 24px;
  --scale-typography-28: 28px;
  --scale-typography-32: 32px;
  --scale-typography-36: 36px;
  --scale-typography-42: 42px;
  --scale-typography-48: 48px;
  --scale-typography-54: 54px;
  --scale-typography-60: 60px;
  --scale-typography-68: 68px;
  --scale-typography-76: 76px;
  --scale-typography-84: 84px;
  --scale-typography-92: 92px;
  --scale-width-170: 170px; /* 2 column span */
  --scale-width-288: 288px; /* 3 column span */
  --scale-width-393: 393px; /* iPhone 15 Pro */
  --scale-width-406: 406px; /* 4 column span */
  --scale-width-522: 522px; /* 5 column span */
  --scale-width-640: 640px; /* 6 column span */
  --scale-width-758: 758px; /* 7 column span */
  --scale-width-768: 768px; /* Standard Tablet */
  --scale-width-874: 874px; /* 8 column span */
  --scale-width-992: 992px; /* 9 column span */
  --scale-width-1110: 1110px; /* 10 column span, full content area */
  --scale-width-1344: 1344px; /* 12 column span */
  --scale-width-1440: 1440px; /* Large Desktop */
  --scale-width-1920: 1920px; /* Widescreen */

  /* 01C. Fonts */

  --font-brand-primary: "Gambarino";
  --font-brand-secondary: "Commissioner";
  --font-file-default: "IBM Plex Sans";
  --font-file-mono: "IBM Plex Mono";
  --font-weight-light: "Light";
  --font-weight-light-italic: "Light Italic";
  --font-weight-regular: "Regular";
  --font-weight-regular-italic: "Italic";
  --font-weight-medium: "Medium";
  --font-weight-medium-italic: "Medium Italic";
  --font-weight-semibold: "Semibold";
  --font-weight-semibold-italic: "Semibold Italic";
  --font-weight-bold: "Bold";
  --font-weight-bold-italic: "Bold Italic";

  /* 02A. Color Schemes */

  --surface-primary-light: var(--primary-10);
  --surface-primary-soft: var(--primary-20);
  --surface-primary-accent: var(--primary-60);
  --surface-primary-inverse: var(--primary-70);
  --surface-secondary-light: var(--secondary-10);
  --surface-secondary-soft: var(--secondary-20);
  --surface-secondary-accent: var(--secondary-60);
  --surface-secondary-inverse: var(--secondary-70);
  --surface-tertiary-light: var(--tertiary-10);
  --surface-tertiary-soft: var(--tertiary-20);
  --surface-tertiary-accent: var(--tertiary-60);
  --surface-tertiary-inverse: var(--tertiary-70);
  --surface-gray-light: var(--gray-10);
  --surface-gray-soft: var(--gray-20);
  --surface-gray-accent: var(--gray-60);
  --surface-gray-inverse: var(--gray-70);
  --surface-base-light: var(--gray-white);
  --surface-base-soft: var(--primary-00);
  --surface-utility-white: var(--gray-white);
  --surface-utility-black: var(--gray-black);
  --border-primary-light: var(--primary-20);
  --border-primary-soft: var(--primary-40);
  --border-primary-accent: var(--primary-80);
  --border-primary-inverse: var(--primary-90);
  --border-secondary-light: var(--secondary-20);
  --border-secondary-soft: var(--secondary-40);
  --border-secondary-accent: var(--secondary-80);
  --border-secondary-inverse: var(--secondary-90);
  --border-tertiary-light: var(--tertiary-20);
  --border-tertiary-soft: var(--tertiary-40);
  --border-tertiary-accent: var(--tertiary-80);
  --border-tertiary-inverse: var(--tertiary-90);
  --border-gray-light: var(--gray-20);
  --border-gray-soft: var(--gray-40);
  --border-gray-accent: var(--gray-80);
  --border-gray-inverse: var(--gray-90);
  --border-base-light: var(--primary-15);
  --border-base-soft: var(--primary-20);
  --border-utility-white: rgba(255, 255, 255, 0.24);
  --border-utility-black: rgba(0, 0, 0, 0.24);
  --text-primary-main: var(--primary-80);
  --text-primary-accent: var(--primary-60);
  --text-primary-inverse-main: var(--primary-00);
  --text-primary-inverse-accent: var(--primary-15);
  --text-secondary-main: var(--secondary-80);
  --text-secondary-accent: var(--secondary-60);
  --text-secondary-inverse-main: var(--secondary-00);
  --text-secondary-inverse-accent: var(--secondary-15);
  --text-tertiary-main: var(--tertiary-80);
  --text-tertiary-accent: var(--tertiary-60);
  --text-tertiary-inverse-main: var(--tertiary-00);
  --text-tertiary-inverse-accent: var(--tertiary-15);
  --text-gray-main: var(--gray-80);
  --text-gray-accent: var(--gray-60);
  --text-gray-inverse-main: var(--gray-00);
  --text-gray-inverse-accent: var(--gray-15);
  --link-base-default: var(--tertiary-60);
  --link-base-hover: var(--tertiary-70);
  --link-base-active: var(--tertiary-80);
  --link-base-visited: var(--tertiary-60);
  --link-inverse-default: var(--tertiary-30);
  --link-inverse-hover: var(--tertiary-20);
  --link-inverse-active: var(--tertiary-10);
  --link-inverse-visited: var(--tertiary-20);
  --icon-primary-base: var(--primary-60);
  --icon-primary-accent: var(--primary-15);
  --icon-primary-inverse: var(--primary-20);
  --icon-secondary-base: var(--secondary-60);
  --icon-secondary-accent: var(--secondary-15);
  --icon-secondary-inverse: var(--secondary-20);
  --icon-tertiary-base: var(--tertiary-60);
  --icon-tertiary-accent: var(--tertiary-15);
  --icon-tertiary-inverse: var(--tertiary-20);
  --icon-gray-base: var(--gray-60);
  --icon-gray-accent: var(--gray-15);
  --icon-gray-inverse: var(--gray-20);

  /* 02B. Layout */

  --spacing-static-none: var(--scale-unit-00);
  --spacing-static-3xs: var(--scale-unit-04);
  --spacing-static-2xs: var(--scale-unit-08);
  --spacing-static-xs: var(--scale-unit-12);
  --spacing-static-sm: var(--scale-unit-16);
  --spacing-static-md: var(--scale-unit-24);
  --spacing-static-lg: var(--scale-unit-32);
  --spacing-static-xl: var(--scale-unit-48);
  --spacing-static-2xl: var(--scale-unit-64);
  --spacing-static-3xl: var(--scale-unit-80);
  --max-width-columns-2: var(--scale-width-170);
  --max-width-columns-4: var(--scale-width-406);
  --max-width-columns-6: var(--scale-width-640);
  --max-width-content-sidebar: var(--scale-width-288);
  --max-width-content-main: var(--scale-width-758);
  --max-width-content-feature: var(--scale-width-874);
  --max-width-content-wrap: var(--scale-width-1110);
  --max-width-page-inner: var(--scale-width-1440);

  /* 02C. Responsive - Mobile */

  --spacing-variable-3xs: var(--scale-unit-04);
  --spacing-variable-2xs: var(--scale-unit-08);
  --spacing-variable-xs: var(--scale-unit-12);
  --spacing-variable-sm: var(--scale-unit-16);
  --spacing-variable-md: var(--scale-unit-16);
  --spacing-variable-lg: var(--scale-unit-20);
  --spacing-variable-xl: var(--scale-unit-24);
  --spacing-variable-2xl: var(--scale-unit-32);
  --spacing-variable-3xl: var(--scale-unit-48);
  --font-size-2xs: var(--scale-typography-10);
  --font-size-xs: var(--scale-typography-12);
  --font-size-sm: var(--scale-typography-16);
  --font-size-md: var(--scale-typography-20);
  --font-size-lg: var(--scale-typography-24);
  --font-size-xl: var(--scale-typography-28);
  --font-size-2xl: var(--scale-typography-36);
  --font-size-3xl: var(--scale-typography-48);
  --scale-radius-xs: var(--scale-unit-02);
  --scale-radius-sm: var(--scale-unit-04);
  --scale-radius-md: var(--scale-unit-08);
  --scale-radius-lg: var(--scale-unit-12);
  --scale-radius-xl: var(--scale-unit-24);
  --scale-radius-full: var(--scale-unit-999);
  --grid-viewport: var(--width-393);
  --grid-column: 2px;
  --grid-margin: var(--scale-unit-24);
  --grid-gap: var(--scale-unit-32);

  /* 03A. UI Elements */

  --button-radius: var(--scale-radius-full);
  --button-spacing: var(--spacing-static-3xs);
  --button-padding-x: var(--spacing-static-md);
  --button-padding-y: var(--spacing-static-xs);
  --button-padding-full: var(--spacing-static-sm);
  --button-icon-size: var(--spacing-static-sm);

  /* 03B. Typography */

  --typography-heading-display-family: var(--font-brand-primary);
  --typography-heading-display-size: var(--font-size-3xl);
  --typography-heading-display-weight: var(--font-weight-regular);
  --typography-heading-display-margin-top: var(--spacing-static-none);
  --typography-heading-display-margin-bottom: var(--spacing-static-sm);
  --typography-heading-1-family: var(--font-brand-primary);
  --typography-heading-1-size: var(--font-size-2xl);
  --typography-heading-1-weight: var(--font-weight-regular);
  --typography-heading-1-margin-top: var(--spacing-static-none);
  --typography-heading-1-margin-bottom: var(--spacing-static-none);
  --typography-heading-2-family: var(--font-brand-secondary);
  --typography-heading-2-size: var(--font-size-xl);
  --typography-heading-2-weight: var(--font-weight-medium);
  --typography-heading-2-margin-top: var(--spacing-static-xl);
  --typography-heading-2-margin-bottom: var(--spacing-static-md);
  --typography-heading-3-family: var(--font-brand-secondary);
  --typography-heading-3-size: var(--font-size-md);
  --typography-heading-3-weight: var(--font-weight-medium);
  --typography-heading-3-margin-top: var(--spacing-static-xl);
  --typography-heading-3-margin-bottom: var(--spacing-static-md);
  --typography-heading-4-family: var(--font-brand-secondary);
  --typography-heading-4-size: var(--font-size-sm);
  --typography-heading-4-weight: var(--font-weight-medium);
  --typography-heading-4-margin-top: var(--spacing-static-lg);
  --typography-heading-4-margin-bottom: var(--spacing-static-md);
  --typography-heading-5-family: var(--font-brand-secondary);
  --typography-heading-5-size: var(--font-size-sm);
  --typography-heading-5-weight: var(--font-weight-medium);
  --typography-heading-5-margin-top: var(--spacing-static-lg);
  --typography-heading-5-margin-bottom: var(--spacing-static-md);
  --typography-heading-6-family: var(--font-brand-secondary);
  --typography-heading-6-size: var(--font-size-xs);
  --typography-heading-6-weight: var(--font-weight-semibold);
  --typography-heading-6-margin-top: var(--spacing-static-lg);
  --typography-heading-6-margin-bottom: var(--spacing-static-md);
  --typography-body-lg-family: var(--font-brand-secondary);
  --typography-body-lg-size: var(--font-size-md);
  --typography-body-lg-weight: var(--font-weight-regular);
  --typography-body-lg-margin-top: var(--spacing-static-none);
  --typography-body-lg-margin-bottom: var(--spacing-static-md);
  --typography-body-md-family: var(--font-brand-secondary);
  --typography-body-md-size: var(--font-size-sm);
  --typography-body-md-weight: var(--font-weight-regular);
  --typography-body-md-margin-top: var(--spacing-static-none);
  --typography-body-md-margin-bottom: var(--spacing-static-md);
  --typography-body-sm-family: var(--font-brand-secondary);
  --typography-body-sm-size: var(--font-size-xs);
  --typography-body-sm-weight: var(--font-weight-regular);
  --typography-body-sm-margin-top: var(--spacing-static-none);
  --typography-body-sm-margin-bottom: var(--spacing-static-md);
  --typography-body-pullquote-family: var(--font-brand-secondary);
  --typography-body-pullquote-size: var(--font-size-xl);
  --typography-body-pullquote-weight: var(--font-weight-regular);
  --typography-body-pullquote-margin-top: var(--spacing-static-md);
  --typography-body-pullquote-margin-bottom: var(--spacing-static-md);
  --typography-body-blockquote-family: var(--font-brand-secondary);
  --typography-body-blockquote-size: var(--font-size-lg);
  --typography-body-blockquote-weight: var(--font-weight-regular);
  --typography-body-blockquote-margin-top: var(--spacing-static-lg);
  --typography-body-blockquote-margin-bottom: var(--spacing-static-xl);
  --typography-body-citation-family: var(--font-brand-secondary);
  --typography-body-citation-size: var(--font-size-xs);
  --typography-body-citation-weight: var(--font-weight-regular);
  --typography-body-citation-margin-top: var(--spacing-static-none);
  --typography-body-citation-margin-bottom: var(--spacing-static-xs);
  --typography-body-caption-family: var(--font-brand-secondary);
  --typography-body-caption-size: var(--font-size-xs);
  --typography-body-caption-weight: var(--font-weight-regular);
  --typography-body-caption-margin-top: var(--spacing-static-sm);
  --typography-body-caption-margin-bottom: var(--spacing-static-sm);
  --typography-nav-lg-family: var(--font-brand-secondary);
  --typography-nav-lg-size: var(--scale-typography-18);
  --typography-nav-lg-weight: var(--font-weight-regular);
  --typography-nav-md-family: var(--font-brand-secondary);
  --typography-nav-md-size: var(--scale-typography-14);
  --typography-nav-md-weight: var(--font-weight-regular);
  --typography-nav-sm-family: var(--font-brand-secondary);
  --typography-nav-sm-size: var(--scale-typography-12);
  --typography-nav-sm-weight: var(--font-weight-medium);
  --typography-nav-breadcrumb-family: var(--font-brand-secondary);
  --typography-nav-breadcrumb-size: var(--font-size-2xs);
  --typography-nav-breadcrumb-weight: var(--font-weight-regular);
  --typography-ui-label-family: var(--font-brand-secondary);
  --typography-ui-label-size: var(--font-size-sm);
  --typography-ui-label-weight: var(--font-weight-medium);
  --typography-ui-tab-family: var(--font-brand-secondary);
  --typography-ui-tab-size: var(--font-size-xs);
  --typography-ui-tab-weight: var(--font-weight-semibold);
  --typography-ui-footnote-family: var(--font-brand-secondary);
  --typography-ui-footnote-size: var(--font-size-2xs);
  --typography-ui-footnote-weight: var(--font-weight-regular);

}


/* ---------------------------
  Tablet: 522px-874px
  --------------------------- */

@media (min-width: 522px) {

  :root {

    /* 02C. Responsive - Tablet */

    --spacing-variable-3xs: var(--scale-unit-08);
    --spacing-variable-2xs: var(--scale-unit-12);
    --spacing-variable-xs: var(--scale-unit-16);
    --spacing-variable-sm: var(--scale-unit-20);
    --spacing-variable-md: var(--scale-unit-24);
    --spacing-variable-lg: var(--scale-unit-24);
    --spacing-variable-xl: var(--scale-unit-32);
    --spacing-variable-2xl: var(--scale-unit-48);
    --spacing-variable-3xl: var(--scale-unit-64);
    --font-size-xs: var(--scale-typography-14);
    --font-size-sm: var(--scale-typography-18);
    --font-size-md: var(--scale-typography-24);
    --font-size-lg: var(--scale-typography-28);
    --font-size-xl: var(--scale-typography-32);
    --font-size-2xl: var(--scale-typography-42);
    --font-size-3xl: var(--scale-typography-60);
    --scale-radius-xs: var(--scale-unit-02);
    --scale-radius-sm: var(--scale-unit-04);
    --scale-radius-md: var(--scale-unit-08);
    --scale-radius-lg: var(--scale-unit-16);
    --scale-radius-xl: var(--scale-unit-32);
    --scale-radius-full: var(--scale-unit-999);
    --grid-viewport: var(--width-768);
    --grid-column: 6px;
    --grid-margin: var(--scale-unit-48);
    --grid-gap: var(--scale-unit-64);

  }

}


/* ---------------------------
  Desktop: 875px+
  --------------------------- */

@media (min-width: 875px) {

  :root {

    /* 02C. Responsive - Desktop */

    --spacing-variable-3xs: var(--scale-unit-08);
    --spacing-variable-2xs: var(--scale-unit-12);
    --spacing-variable-xs: var(--scale-unit-16);
    --spacing-variable-sm: var(--scale-unit-20);
    --spacing-variable-md: var(--scale-unit-24);
    --spacing-variable-lg: var(--scale-unit-32);
    --spacing-variable-xl: var(--scale-unit-48);
    --spacing-variable-2xl: var(--scale-unit-64);
    --spacing-variable-3xl: var(--scale-unit-80);
    --font-size-2xs: var(--scale-typography-12);
    --font-size-xs: var(--scale-typography-14);
    --font-size-sm: var(--scale-typography-18);
    --font-size-md: var(--scale-typography-24);
    --font-size-lg: var(--scale-typography-28);
    --font-size-xl: var(--scale-typography-32);
    --font-size-2xl: var(--scale-typography-54);
    --font-size-3xl: var(--scale-typography-68);
    --grid-viewport: var(--width-1440);
    --scale-radius-xs: var(--scale-unit-02);
    --scale-radius-sm: var(--scale-unit-04);
    --scale-radius-md: var(--scale-unit-08);
    --scale-radius-lg: var(--scale-unit-16);
    --scale-radius-xl: var(--scale-unit-32);
    --scale-radius-full: var(--scale-unit-999);
    --grid-column: 12px;
    --grid-margin: var(--scale-unit-48);
    --grid-gap: var(--scale-unit-64);

  }
  
}