/* ============================================================
   DESIGN TOKENS — colors · type · layout
   Mirrors the Figma token library. Do not add values here
   that are not in the spec.
   ============================================================ */

/* ----------------------------------------------------------
   COLORS — light mode defaults
   ---------------------------------------------------------- */
:root {
  --accent-50:      #F7EFFF;
  --accent-500:     #7F00FF;
  --neutral-0:      #FFFFFF;
  --neutral-50:     #F9F9F9;
  --neutral-100:    #E9E9E9;
  --neutral-500:    #B7B7B7;
  --neutral-600:    #757575;
  --neutral-1000:   #000000;
  --white:          #FFFFFF;
  --black:          #000000;
  --bkg-primary:    #FFFFFF;
  --bkg-secondary:  #FFFFFF;
  --bkg-tertiary:   #F2F2F7;
}

/* ----------------------------------------------------------
   COLORS — dark mode overrides (--white / --black stay fixed)
   ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --accent-50:      #2A0E46;
    --accent-500:     #9E3EFF;
    --neutral-0:      #0E0E0E;
    --neutral-50:     #1E1E1E;
    --neutral-100:    #4D4D4D;
    --neutral-500:    #6E6E6E;
    --neutral-600:    #BDBDBD;
    --neutral-1000:   #FFFFFF;
    --bkg-primary:    #1C1C1E;
    --bkg-secondary:  #000000;
    --bkg-tertiary:   #29292C;
  }
}

/* ----------------------------------------------------------
   TYPOGRAPHY — font stack
   ---------------------------------------------------------- */
:root {
  --font-stack: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Fixed text styles */
.text-regular-small {
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.2px;
  font-weight: 400;
}

.text-regular-subtitle {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.2px;
  font-weight: 400;
}

.text-regular-baseline {
  font-size: 17px;
  line-height: 20px;
  letter-spacing: -0.2px;
  font-weight: 400;
}

.text-medium-title-small {
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.2px;
  font-weight: 600;
}

.text-bold-small {
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.2px;
  font-weight: 700;
}

.text-bold-subtitle {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.2px;
  font-weight: 700;
}

.text-bold-baseline {
  font-size: 17px;
  line-height: 20px;
  letter-spacing: -0.2px;
  font-weight: 700;
}

.text-bold-title-small {
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.2px;
  font-weight: 700;
}

.text-bold-title-medium {
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.2px;
  font-weight: 700;
}

/* Fluid text styles — font-size scales with viewport */
.text-bold-title-large {
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.2px;
  font-weight: 700;
}

.text-bold-title-xlarge {
  font-size: clamp(2.125rem, 1.1rem + 4.2vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: -0.2px;
  font-weight: 700;
}

/* ----------------------------------------------------------
   LAYOUT — mobile-first responsive tokens
   ---------------------------------------------------------- */
:root {
  --container-max: 2000px;
  --margin:        16px;
  --gutter:        16px;
}

@media (min-width: 769px) {
  :root {
    --margin:  48px;
    --gutter:  16px;
  }
}

@media (min-width: 1025px) {
  :root {
    --margin:  88px;
    --gutter:  32px;
  }
}