/* ============================================================
   ResVR Design Tokens
   Generated from Figma: ResVR Website (2026-02-22)
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOR — BRAND (Teal)
     ---------------------------------------------------------- */
  --color-brand-1000: #062b2c;
  --color-brand-900:  #083a3c;
  --color-brand-800:  #0a4c4d;
  --color-brand-700:  #0d6163;
  --color-brand-600:  #117a7c;
  --color-brand-500:  #16c9cc;  /* Primary accent */
  --color-brand-400:  #4ddadd;
  --color-brand-300:  #8ee8ea;
  --color-brand-200:  #c2f3f4;
  --color-brand-100:  #e6fafa;
  --color-brand-50:   #f2fdfc;

  /* ----------------------------------------------------------
     COLOR — NEUTRAL (Warm Gray)
     ---------------------------------------------------------- */
  --color-neutral-1000: #1f1d1a;
  --color-neutral-900:  #2f2c28;
  --color-neutral-800:  #5f5b55;
  --color-neutral-700:  #5f5b55;  /* Note: same as 800 — verify in Figma */
  --color-neutral-600:  #7d7871;
  --color-neutral-500:  #9f9a94;
  --color-neutral-400:  #bab6b1;
  --color-neutral-300:  #d2cfcb;
  --color-neutral-200:  #e4e2de;
  --color-neutral-100:  #f6f5f3;
  --color-neutral-50:   #faf9f7;
  --color-neutral-0:    #ffffff;

  /* ----------------------------------------------------------
     COLOR — SEMANTIC ALIASES
     ---------------------------------------------------------- */
  --color-text-primary:     var(--color-neutral-1000);
  --color-text-secondary:   var(--color-neutral-600);
  --color-text-disabled:    var(--color-neutral-400);
  --color-text-inverse:     var(--color-neutral-0);

  --color-bg-page:          var(--color-neutral-0);
  --color-bg-subtle:        var(--color-neutral-50);
  --color-bg-muted:         var(--color-neutral-100);
  --color-bg-brand:         var(--color-brand-1000);
  --color-bg-brand-subtle:  var(--color-brand-50);

  --color-accent:           var(--color-brand-500);
  --color-accent-hover:     var(--color-brand-400);

  --color-border:           var(--color-neutral-200);
  --color-border-strong:    var(--color-neutral-300);

  /* ----------------------------------------------------------
     TYPOGRAPHY — FONT FAMILIES
     ---------------------------------------------------------- */
  --font-display: 'Neue Haas Grotesk Display Pro', sans-serif;
  --font-text:    'Neue Haas Grotesk Text Pro', sans-serif;

  /* ----------------------------------------------------------
     TYPOGRAPHY — DESKTOP SCALE
     ---------------------------------------------------------- */
  --text-h1-size:    68px;
  --text-h1-lh:      76px;
  --text-h1-ls:      -1px;
  --text-h1-weight:  500;

  --text-h2-size:    56px;
  --text-h2-lh:      64px;
  --text-h2-ls:      -1px;
  --text-h2-weight:  500;

  --text-h3-size:    48px;
  --text-h3-lh:      56px;
  --text-h3-ls:      -0.5px;
  --text-h3-weight:  500;

  --text-h4-size:    32px;
  --text-h4-lh:      40px;
  --text-h4-ls:      0;
  --text-h4-weight:  500;

  --text-h5-size:    24px;
  --text-h5-lh:      32px;
  --text-h5-ls:      0;
  --text-h5-weight:  500;

  --text-h6-size:    20px;
  --text-h6-lh:      28px;
  --text-h6-ls:      0;
  --text-h6-weight:  500;

  --text-body-xl-size:    20px;
  --text-body-xl-lh:      32px;
  --text-body-xl-weight:  400;

  --text-body-l-size:     18px;
  --text-body-l-lh:       28px;
  --text-body-l-weight:   400;

  --text-body-m-size:     16px;
  --text-body-m-lh:       26px;
  --text-body-m-weight:   450;

  --text-body-s-size:     14px;
  --text-body-s-lh:       22px;
  --text-body-s-weight:   400;

  --text-body-xs-size:    12px;
  --text-body-xs-lh:      20px;
  --text-body-xs-weight:  400;

  --text-button-size:     18px;
  --text-button-lh:       24px;
  --text-button-weight:   700;
}

/* ----------------------------------------------------------
   TYPOGRAPHY — TABLET & MOBILE SCALE
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --text-h1-size:   44px;
    --text-h1-lh:     52px;

    --text-h2-size:   36px;
    --text-h2-lh:     44px;

    --text-h3-size:   32px;
    --text-h3-lh:     40px;

    --text-h4-size:   28px;
    --text-h4-lh:     32px;

    --text-h5-size:   20px;
    --text-h5-lh:     28px;

    --text-h6-size:   16px;
    --text-h6-lh:     26px;

    --text-body-xl-size:  16px;
    --text-body-xl-lh:    28px;

    --text-body-l-size:   14px;
    --text-body-l-lh:     26px;

    --text-body-m-size:   14px;
    --text-body-m-lh:     22px;

    --text-body-s-size:   12px;
    --text-body-s-lh:     20px;

    --text-body-xs-size:  10px;
    --text-body-xs-lh:    18px;
  }
}

/* ----------------------------------------------------------
   TYPOGRAPHY UTILITY CLASSES
   ---------------------------------------------------------- */
.text-h1 {
  font-family: var(--font-display);
  font-weight: var(--text-h1-weight);
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-lh);
  letter-spacing: var(--text-h1-ls);
}
.text-h2 {
  font-family: var(--font-display);
  font-weight: var(--text-h2-weight);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-lh);
  letter-spacing: var(--text-h2-ls);
}
.text-h3 {
  font-family: var(--font-display);
  font-weight: var(--text-h3-weight);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-lh);
  letter-spacing: var(--text-h3-ls);
}
.text-h4 {
  font-family: var(--font-display);
  font-weight: var(--text-h4-weight);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-lh);
  letter-spacing: var(--text-h4-ls);
}
.text-h5 {
  font-family: var(--font-display);
  font-weight: var(--text-h5-weight);
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-lh);
  letter-spacing: var(--text-h5-ls);
}
.text-h6 {
  font-family: var(--font-display);
  font-weight: var(--text-h6-weight);
  font-size: var(--text-h6-size);
  line-height: var(--text-h6-lh);
  letter-spacing: var(--text-h6-ls);
}
.text-body-xl {
  font-family: var(--font-text);
  font-weight: var(--text-body-xl-weight);
  font-size: var(--text-body-xl-size);
  line-height: var(--text-body-xl-lh);
}
.text-body-l {
  font-family: var(--font-text);
  font-weight: var(--text-body-l-weight);
  font-size: var(--text-body-l-size);
  line-height: var(--text-body-l-lh);
}
.text-body-m {
  font-family: var(--font-display);
  font-weight: var(--text-body-m-weight);
  font-size: var(--text-body-m-size);
  line-height: var(--text-body-m-lh);
}
.text-body-s {
  font-family: var(--font-text);
  font-weight: var(--text-body-s-weight);
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-lh);
}
.text-body-xs {
  font-family: var(--font-text);
  font-weight: var(--text-body-xs-weight);
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-lh);
}