/**
 * Exponent — Design Tokens
 * Global colors, typography and shared layout primitives
 */

:root {
  /* =======================================================
     COLORS
     ======================================================= */

  --exp-color-navy: #04024d;
  --exp-color-gold: #d0a161;
  --exp-color-white: #ffffff;
  --exp-color-gray-light: #edf1f3;
  --exp-color-blue-gray: #a5bac2;

  /* RGB channels for opacity */

  --exp-color-navy-rgb: 4, 2, 77;
  --exp-color-gold-rgb: 208, 161, 97;
  --exp-color-white-rgb: 255, 255, 255;
  --exp-color-gray-light-rgb: 237, 241, 243;
  --exp-color-blue-gray-rgb: 165, 186, 194;


  /* =======================================================
     FONT FAMILIES
     ======================================================= */

  --exp-font-primary:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  --exp-font-editorial:
    "Playfair Display",
    Georgia,
    "Times New Roman",
    serif;


  /* =======================================================
     FONT WEIGHTS
     ======================================================= */

  --exp-font-weight-light: 300;
  --exp-font-weight-regular: 400;
  --exp-font-weight-medium: 500;


  /* =======================================================
     FONT STYLES
     ======================================================= */

  --exp-font-style-regular: normal;
  --exp-font-style-italic: italic;


  /* =======================================================
     SECTION LABEL / EYEBROW
     Example: ONE TEAM AROUND THE OWNER
     ======================================================= */

  --exp-eyebrow-font-size:
    clamp(0.75rem, 0.8vw, 0.875rem);

  --exp-eyebrow-font-weight:
    var(--exp-font-weight-medium);

  --exp-eyebrow-line-height: 1.2;
  --exp-eyebrow-letter-spacing: 0.025em;

  --exp-eyebrow-dot-size: 0.35rem;
  --exp-eyebrow-gap: 0.625rem;

  --exp-eyebrow-title-gap:
    clamp(0.875rem, 1.2vw, 1.25rem);


  /* =======================================================
     SECTION TITLE
     ======================================================= */

  --exp-section-title-font-size:
    clamp(2rem, 2.5vw, 3rem);

  --exp-section-title-font-weight:
    var(--exp-font-weight-light);

  --exp-section-title-line-height: 1.04;
  --exp-section-title-letter-spacing: -0.03em;


  /* =======================================================
     EDITORIAL TITLE
     Playfair Display Italic
     ======================================================= */

  --exp-editorial-font-weight:
    var(--exp-font-weight-regular);

  --exp-editorial-line-height: 1;
  --exp-editorial-letter-spacing: -0.02em;


  /* =======================================================
     BODY COPY
     ======================================================= */

  --exp-body-font-size:
    clamp(0.9375rem, 1vw, 1.0625rem);

  --exp-body-font-weight:
    var(--exp-font-weight-light);

  --exp-body-line-height: 1.45;
  --exp-body-letter-spacing: -0.01em;


  /* =======================================================
     CARD TITLE
     ======================================================= */

  --exp-card-title-font-size:
    clamp(1rem, 1.2vw, 1.125rem);

  --exp-card-title-font-weight:
    var(--exp-font-weight-regular);

  --exp-card-title-line-height: 1.25;
  --exp-card-title-letter-spacing: -0.015em;


  /* =======================================================
     META / CATEGORY
     ======================================================= */

  --exp-meta-font-size:
    clamp(0.625rem, 0.65vw, 0.75rem);

  --exp-meta-font-weight:
    var(--exp-font-weight-medium);

  --exp-meta-line-height: 1;
  --exp-meta-letter-spacing: 0.025em;


  /* =======================================================
     BUTTON TEXT
     ======================================================= */

  --exp-button-font-size: 0.75rem;
  --exp-button-font-weight:
    var(--exp-font-weight-medium);

  --exp-button-line-height: 1;
  --exp-button-letter-spacing: 0.02em;


  /* =======================================================
     GLOBAL CONTAINER
     Maximum width: 1680px
     ======================================================= */

  --exp-container-max-width: 105rem;

  /*
   * Total horizontal space:
   * 48px minimum and 240px maximum.
   */

  --exp-container-spacing:
    clamp(3rem, 12.5vw, 15rem);

  /*
   * Individual gutter:
   * 24px minimum and 120px maximum.
   */

  --exp-container-gutter:
    clamp(1.5rem, 6.25vw, 7.5rem);

  /*
   * Offset for full-width carousels that begin
   * aligned with the global container.
   */

  --exp-container-offset:
    max(
      var(--exp-container-gutter),
      calc(
        (100vw - var(--exp-container-max-width)) / 2
      )
    );


  /* =======================================================
     SECTION SPACING
     ======================================================= */

  --exp-section-padding-block:
    clamp(5rem, 8vw, 9rem);

  --exp-section-header-bottom-gap:
    clamp(4rem, 5.5vw, 7rem);


  /* =======================================================
     BORDER RADIUS
     ======================================================= */

  --exp-radius-small: 0.75rem;
  --exp-radius-medium: 1.125rem;
  --exp-radius-large: 1.5rem;
  --exp-radius-pill: 999px;


  /* =======================================================
     ANIMATION
     ======================================================= */

  --exp-transition-fast: 180ms;
  --exp-transition-normal: 320ms;
  --exp-transition-slow: 650ms;

  --exp-ease-premium:
    cubic-bezier(0.22, 1, 0.36, 1);


  /* =======================================================
     CONTEXTUAL COLORS
     Sections can override these values.
     ======================================================= */

  --exp-section-text-color:
    var(--exp-color-navy);

  --exp-section-muted-color:
    rgba(var(--exp-color-navy-rgb), 0.72);

  --exp-section-border-color:
    rgba(var(--exp-color-navy-rgb), 0.12);
}


/* =========================================================
   GLOBAL CONTAINER
   ========================================================= */

.exp-container {
  width: min(
    calc(100% - var(--exp-container-spacing)),
    var(--exp-container-max-width)
  );

  margin-inline: auto;
}


/* =========================================================
   SECTION LABEL / EYEBROW
   ========================================================= */

.exp-section-label {
  display: flex;
  align-items: center;
  gap: var(--exp-eyebrow-gap);

  width: fit-content;
  margin: 0 0 var(--exp-eyebrow-title-gap);
  padding: 0;

  color: var(--exp-section-text-color);

  font-family: var(--exp-font-primary);
  font-size: var(--exp-eyebrow-font-size);
  font-style: var(--exp-font-style-regular);
  font-weight: var(--exp-eyebrow-font-weight);
  line-height: var(--exp-eyebrow-line-height);
  letter-spacing: var(
    --exp-eyebrow-letter-spacing
  );

  text-transform: uppercase;
}

.exp-section-label__dot {
  display: block;
  flex: 0 0 auto;

  width: var(--exp-eyebrow-dot-size);
  height: var(--exp-eyebrow-dot-size);

  border-radius: 50%;
  background-color: var(--exp-color-gold);
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.exp-section-title {
  max-width: 48rem;
  margin: 0;
  padding: 0;

  color: var(--exp-section-text-color);

  font-family: var(--exp-font-primary);
  font-size: var(--exp-section-title-font-size);
  font-style: var(--exp-font-style-regular);
  font-weight: var(--exp-section-title-font-weight);
  line-height: var(--exp-section-title-line-height);
  letter-spacing: var(
    --exp-section-title-letter-spacing
  );

  text-wrap: balance;
}

.exp-section-title em,
.exp-section-title i,
.exp-section-title__editorial {
  display: block;

  color: inherit;

  font-family: var(--exp-font-editorial);
  font-size: 1em;
  font-style: var(--exp-font-style-italic);
  font-weight: var(--exp-editorial-font-weight);
  line-height: var(--exp-editorial-line-height);
  letter-spacing: var(
    --exp-editorial-letter-spacing
  );
}

/*
 * Use this modifier when the Playfair fragment
 * should remain within the same line.
 */

.exp-section-title--inline em,
.exp-section-title--inline i,
.exp-section-title--inline
.exp-section-title__editorial {
  display: inline;
}


/* =========================================================
   BODY COPY
   ========================================================= */

.exp-section-copy {
  margin: 0;
  padding: 0;

  color: var(--exp-section-muted-color);

  font-family: var(--exp-font-primary);
  font-size: var(--exp-body-font-size);
  font-style: var(--exp-font-style-regular);
  font-weight: var(--exp-body-font-weight);
  line-height: var(--exp-body-line-height);
  letter-spacing: var(--exp-body-letter-spacing);
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.exp-card-title {
  margin: 0;
  padding: 0;

  color: var(--exp-section-text-color);

  font-family: var(--exp-font-primary);
  font-size: var(--exp-card-title-font-size);
  font-style: var(--exp-font-style-regular);
  font-weight: var(--exp-card-title-font-weight);
  line-height: var(--exp-card-title-line-height);
  letter-spacing: var(
    --exp-card-title-letter-spacing
  );

  text-wrap: pretty;
}


/* =========================================================
   META / CATEGORY
   ========================================================= */

.exp-meta-label {
  margin: 0;
  padding: 0;

  font-family: var(--exp-font-primary);
  font-size: var(--exp-meta-font-size);
  font-style: var(--exp-font-style-regular);
  font-weight: var(--exp-meta-font-weight);
  line-height: var(--exp-meta-line-height);
  letter-spacing: var(--exp-meta-letter-spacing);

  text-transform: uppercase;
}


/* =========================================================
   BUTTON LABEL
   ========================================================= */

.exp-button-label {
  font-family: var(--exp-font-primary);
  font-size: var(--exp-button-font-size);
  font-style: var(--exp-font-style-regular);
  font-weight: var(--exp-button-font-weight);
  line-height: var(--exp-button-line-height);
  letter-spacing: var(
    --exp-button-letter-spacing
  );

  text-transform: uppercase;
}


/* =========================================================
   LIGHT AND DARK SECTION THEMES
   ========================================================= */

.exp-theme-light {
  --exp-section-text-color:
    var(--exp-color-navy);

  --exp-section-muted-color:
    rgba(var(--exp-color-navy-rgb), 0.72);

  --exp-section-border-color:
    rgba(var(--exp-color-navy-rgb), 0.12);
}

.exp-theme-dark {
  --exp-section-text-color:
    var(--exp-color-white);

  --exp-section-muted-color:
    rgba(var(--exp-color-white-rgb), 0.72);

  --exp-section-border-color:
    rgba(var(--exp-color-white-rgb), 0.16);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 47.99rem) {
  :root {
    --exp-section-padding-block: 5rem;
    --exp-section-header-bottom-gap: 4rem;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  :root {
    --exp-transition-fast: 0ms;
    --exp-transition-normal: 0ms;
    --exp-transition-slow: 0ms;
  }
}