:root {

  --color-primary-50:  #EFF3FA;
  --color-primary-100: #DAE5F6;
  --color-primary-200: #B5CAEE;
  --color-primary-300: #82A7E3;
  --color-primary-400: #477ED7;
  --color-primary-500: #2A64C0;
  --color-primary-600: #22519B;
  --color-primary-700: #1A417F;
  --color-primary-800: #143367;
  --color-primary-950: #0A1E3D;

  --color-secondary-100: #FDECD7;
  --color-secondary-200: #FAD5AE;
  --color-secondary-400: #F18E46;
  --color-secondary-600: #D45216;
  --color-secondary-700: #B94115;
  --color-secondary-800: #933419;

  --color-neutral-50:  #F4F5F7;
  --color-neutral-100: #E4E7E9;
  --color-neutral-200: #CDD2D4;   
  --color-neutral-400: #7F8B91;
  --color-neutral-500: #647076;
  --color-neutral-700: #494F55;
  --color-neutral-800: #414549;
  --color-neutral-900: #393C40;
  --color-neutral-950: #232629;

  --color-white: #FFFFFF;
  --color-alpha-white-30: rgba(255, 255, 255, 0.30);
  --color-alpha-white-70: rgba(255, 255, 255, 0.70);
  --color-alpha-black-10: rgba(0, 0, 0, 0.10);
  --color-alpha-black-30: rgba(35, 38, 41, 0.30);

  --color-focus-ring: var(--color-primary-700);

  --shadow-nav-sticky:
    0 2px  6px  rgba(35, 38, 41, 0.08),
    0 12px 32px rgba(35, 38, 41, 0.12);

  --nav-action-bar-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  --font-serif: 'Spectral', Georgia, serif;
  --font-sans:  'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-size-h1:     60px;  --line-height-h1: 68px;  --tracking-h1: -0.04em;
  --font-size-h2:     48px;  --line-height-h2: 56px;  --tracking-h2: -0.02em;
  --font-size-h3:     40px;  --line-height-h3: 48px;  --tracking-h3: -0.02em;
  --font-size-h4:     32px;  --line-height-h4: 40px;  --tracking-h4: -0.02em;
  --font-size-h5:     24px;  --line-height-h5: 32px;  --tracking-h5: -0.02em;

  --font-size-body-2: 24px;  --line-height-body-2: 32px;
  --font-size-body-3: 20px;  --line-height-body-3: 28px;
  --font-size-body-4: 16px;  --line-height-body-4: 24px;

  --font-size-body-5:   var(--font-size-body-4);
  --line-height-body-5: var(--line-height-body-4);

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --layout-narrow-w:   720px;
  --layout-content-w: 1280px;
  --layout-wide-w:    1280px;
  --layout-post-w:     800px;
  --layout-side-gutter: 24px;

  --bp-mobile-max:  767px;
  --bp-tablet-min:  768px;
  --bp-tablet-max:  1279px;          
  --bp-desktop-min: 1280px;          

  --container-desktop: 1280px;
  --container-tablet:   704px;
  --container-mobile:   358px;

  --card-width-mobile: 320px;

  --house-outline-mobile-w: 360px;

  --gutter-desktop: 24px;
  --gutter-tablet:  32px;
  --gutter-mobile:  16px;

  --section-pad-y:        80px;
  --section-pad-y-tablet: 64px;
  --section-pad-y-mobile: 32px;

  --nav-height:                 80px;   
  --nav-height-desktop:         80px;
  --nav-height-tablet:          80px;
  --nav-height-mobile:          64px;   
  --nav-height-mobile-scrolled: 64px;   
  --action-bar-height-mobile:   64px;   
  --hero-height: 800px;          

  --radius-card: 24px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  --space-4:   4px;
  --space-8:   8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;

  --space-card-gap: 20px;
  --space-section-pad: 80px;

  --motion-duration-fast: 150ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 300ms;
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-ease-out:      cubic-bezier(0.0, 0, 0.2, 1);

  --z-nav: 100;
  --z-overlay: 1000;

  --gradient-metric-overlay:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0)   20%,
      rgba(0, 0, 0, 0.6) 60%,
      rgba(0, 0, 0, 0.9) 90%
    );
}

@media (max-width: 1279px) {
  :root {
    --font-size-h1:     48px;  --line-height-h1: 56px;
    --font-size-h2:     40px;  --line-height-h2: 48px;
    --font-size-h3:     32px;  --line-height-h3: 40px;
    --font-size-h4:     28px;  --line-height-h4: 36px;
    --font-size-h5:     24px;  --line-height-h5: 32px;
    --font-size-body-2: 20px;  --line-height-body-2: 28px;
    --font-size-body-3: 16px;  --line-height-body-3: 24px;

  }
}

@media (max-width: 767px) {
  :root {
    --font-size-h1:     36px;  --line-height-h1: 44px;
    --font-size-h2:     32px;  --line-height-h2: 40px;
    --font-size-h3:     24px;  --line-height-h3: 32px;
    --font-size-h4:     24px;  --line-height-h4: 32px;
    --font-size-h5:     20px;  --line-height-h5: 28px;
    --font-size-body-2: 20px;  --line-height-body-2: 28px;
    --font-size-body-3: 16px;  --line-height-body-3: 24px;

    --layout-side-gutter: 16px;
  }
}