/* ==========================================================================
   GLOBAL DESIGN TOKENS & VARIABLES
   Generated from Design System Spec (Fonts & Colors)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root {
  /* ------------------------------------------------------------------------
     1. COLOR SYSTEM
     ------------------------------------------------------------------------ */
  /* Colors Theme */
  --color-primary: #FFFFFF;
  --color-accent-dark: #0F0F0F;
  --color-neutral-grey: #888887;
  --color-accent-gold: #C4A887;
  --color-bg-light: #DEDED4;

  /* Text Colors */
  --color-text-title: #0F0F0F;
  --color-text-dark: #0F0F0F;
  --color-text-white: #FFFFFF;
  --color-text-grey: #888887;

  /* ------------------------------------------------------------------------
     2. FONT FAMILY
     ------------------------------------------------------------------------ */
  --font-family-base: 'Montserrat', sans-serif;

  /* ------------------------------------------------------------------------
     3. FONT WEIGHTS
     ------------------------------------------------------------------------ */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ------------------------------------------------------------------------
     4. TYPOGRAPHY TOKENS (FONT SIZE & LINE HEIGHT)
     ------------------------------------------------------------------------ */
  /* Headings */
  --font-size-h1: 50px;
  --line-height-h1: 150%;
  --font-weight-h1: var(--font-weight-bold);

  --font-size-h2-l: 40px;
  --line-height-h2-l: 142%;
  --font-weight-h2-l: var(--font-weight-extrabold);

  --font-size-h2-m: 35px;
  --line-height-h2-m: 142%;
  --font-weight-h2-m: var(--font-weight-extrabold);

  --font-size-h2-s: 30px;
  --line-height-h2-s: 142%;
  --font-weight-h2-s: var(--font-weight-bold);

  --font-size-h3: 27px;
  --line-height-h3: 125%;
  --font-weight-h3: var(--font-weight-semibold);

  --font-size-h4: 23px;
  --line-height-h4: 125%;
  --font-weight-h4: var(--font-weight-semibold);

  --font-size-h5: 18px;
  --line-height-h5: 125%;
  --font-weight-h5: var(--font-weight-semibold);

  /* Body Text */
  --font-size-body-l: 16px;
  --line-height-body-l: 150%;
  --font-weight-body-l: var(--font-weight-medium);

  --font-size-body-m: 16px;
  --line-height-body-m: 150%;
  --font-weight-body-m: var(--font-weight-light);

  --font-size-body-s: 14px;
  --line-height-body-s: 150%;
  --font-weight-body-s: var(--font-weight-light);

  /* Captions & UI Components */
  --font-size-form: 13px;
  --line-height-form: 150%;
  --font-weight-form: var(--font-weight-semibold);

  --font-size-btn-m: 13px;
  --line-height-btn-m: 150%;
  --font-weight-btn-m: var(--font-weight-medium);

  --font-size-btn-s: 10px;
  --line-height-btn-s: 150%;
  --font-weight-btn-s: var(--font-weight-bold);

  --font-size-link-m: 16px;
  --line-height-link-m: 150%;
  --font-weight-link-m: var(--font-weight-bold);

  --font-size-link-s: 13px;
  --line-height-link-s: 150%;
  --font-weight-link-s: var(--font-weight-light);
}