/* ---- Font imports (Google Fonts) ---- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,400;0,500;0,600;0,700;0,800&family=Raleway:ital,wght@0,500;0,600;0,700;0,800;1,500&display=swap');

:root {
  /* --- Brand: Teal / Green (primary) --- */
  --color-primary:            #5DAB97; /* most-used accent (mint teal) */
  --color-primary-dark:       #02574D; /* deep teal — headings, primary buttons */
  --color-primary-darker:     #02564C; /* near-identical deep teal variant */
  --color-primary-soft:       #E4F2E7; /* pale green — surfaces, tags, fills */
  --color-primary-soft-2:     #F4FAF5; /* lightest green tint */
  --color-primary-muted:      #70A796; /* muted teal */
  --color-primary-border:     #AED4CA; /* soft teal border */

  /* --- Brand: Purple (secondary) --- */
  --color-secondary:          #604EA1; /* primary purple */
  --color-secondary-strong:   #6040BF; /* saturated purple */
  --color-secondary-deep:     #3F2D87; /* deep purple (often @ 70%) */
  --color-secondary-deep-2:   #4F3D94; /* deep purple variant */
  --color-secondary-light:    #B09FE4; /* light lavender */
  --color-secondary-lighter:  #9986D3; /* lavender */
  --color-secondary-tint:     #F2EFFF; /* pale purple surface */
  --color-secondary-tint-2:   #F3F1F8; /* pale purple-grey surface */
  --color-secondary-border:   #D7CFEF; /* lavender border */

  /* --- Brand: Blue (tertiary / links & accents) --- */
  --color-blue:               #576BB2;
  --color-blue-light:         #778AC5;
  --color-blue-alt:           #546BBC;
  --color-blue-strong:        #4B57C2;

  /* --- Accent / Status --- */
  --color-danger:             #E11F27; /* red — errors, alerts */
  --color-danger-alt:         #DF1F26;
  --color-danger-light:       #F15F5F;
  --color-warning:            #F39320; /* orange */
  --color-warning-alt:        #F7941D;
  --color-warning-dark:       #BC4E13;
  --color-pink:               #F15FD4;

  /* --- Neutrals: Text --- */
  --color-text:               #555565; /* default body text (very heavily used) */
  --color-text-strong:        #292D32; /* strong/near-black text */
  --color-text-muted:         #717183; /* secondary text */
  --color-text-disabled:      #91919F; /* tertiary / placeholder */
  --color-text-dark:          #4C4C51;
  --color-ink:                #1E1D1D; /* darkest body */
  --color-black:              #000000;

  /* --- Neutrals: Surface / Background --- */
  --color-white:              #FFFFFF;
  --color-surface:            #F4F4F4; /* light grey background */
  --color-surface-2:          #EFEFF3; /* cool grey background */
  --color-surface-3:          #F1F2F9; /* cool blue-grey surface */
  --color-border:             #D9D9D9; /* default border / divider */

  /* --- Common alpha tokens (overlays, faint fills) --- */
  --color-overlay-40:         rgba(0, 0, 0, 0.40);
  --color-overlay-60:         rgba(0, 0, 0, 0.60);
  --color-primary-dark-40:    rgba(2, 87, 77, 0.40);  /* #02574D @ 40% */
  --color-primary-dark-08:    rgba(2, 87, 77, 0.08);
  --color-primary-10:         rgba(93, 171, 151, 0.10); /* #5DAB97 @ 10% */
  --color-secondary-deep-70:  rgba(63, 45, 135, 0.70); /* #3F2D87 @ 70% */
  --color-secondary-08:       rgba(96, 78, 161, 0.08);
  --color-secondary-10:       rgba(96, 78, 161, 0.10);
  --color-text-12:            rgba(113, 113, 131, 0.12);
  --color-text-20:            rgba(85, 85, 101, 0.20);
  --color-danger-08:          rgba(225, 31, 39, 0.08);
  --color-danger-10:          rgba(225, 31, 39, 0.10);
  --color-soft-green-50:      rgba(228, 242, 231, 0.50);

  /* ========================================================
     TYPOGRAPHY TOKENS
     ======================================================== */

  /* Font families */
  --font-heading: 'Montserrat Alternates', sans-serif;
  --font-body:    'Raleway', sans-serif;

  /* Font weights */
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --fs-16: 16px;  /* dominant body size */
  --fs-18:   18px;
  --fs-20:   20px;
  --fs-24:   24px;
  --fs-28:   28px;
  --fs-32:   32px;
  --fs-60:   60px;

  /* Letter spacing (Figma used -3%, -1%, +10%) */
  --ls-tight:   -0.03em;
  --ls-snug:    -0.01em;
  --ls-wide:     0.10em; /* eyebrows / labels */
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  line-height: 21px;
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  background: var(--color-white);
}

/* ============================================================
   TYPOGRAPHY UTILITY CLASSES
   Named scale derived from the most-used styles in the file.
   ============================================================ */
.text-hero {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-60);
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
}

/* --- Headings (Montserrat Alternates) --- */
.h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-32);
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
}
.h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-28);
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
}
.h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: 1.5;
}
.h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: 1.5;
}
.h5 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
}
.h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-18);
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
}

/* Font size utilities */
.font-16 { font-size: var(--fs-16); }
.font-18 { font-size: var(--fs-18); }
.font-20 { font-size: var(--fs-20); }
.font-24 { font-size: var(--fs-24); }
.font-28 { font-size: var(--fs-28); }
.font-32 { font-size: var(--fs-32); }
.font-60 { font-size: var(--fs-60); }

/* Font weight utilities */
.fw-medium    { font-weight: var(--fw-medium); }
.fw-semibold  { font-weight: var(--fw-semibold); }
.fw-bold      { font-weight: var(--fw-bold); }
.fw-extrabold { font-weight: var(--fw-extrabold); }

/* Font family utilities */
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }

/* --- Body (Raleway) --- */
.text-lg {                 /* large body / lead - 20px */
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-20);
  line-height: 1.5;
  letter-spacing: var(--ls-snug);
}
.text-body {               /* default paragraph - 16px */
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  line-height: 1.5;
  letter-spacing: var(--ls-tight);
}
.text-italic {
  font-style: italic;
  font-weight: var(--fw-medium);
}

/* ============================================================
   COLOR UTILITY CLASSES
   ============================================================ */
.text-primary       { color: var(--color-primary); }
.text-primary-dark  { color: var(--color-primary-dark); }
.text-secondary     { color: var(--color-secondary); }
.text-default       { color: var(--color-text); }
.text-muted         { color: var(--color-text-muted); }
.text-disabled      { color: var(--color-text-disabled); }
.text-danger        { color: var(--color-danger); }
.text-white         { color: var(--color-white); }

.bg-primary         { background-color: var(--color-primary); }
.bg-primary-dark    { background-color: var(--color-primary-dark); }
.bg-primary-soft    { background-color: var(--color-primary-soft); }
.bg-secondary       { background-color: var(--color-secondary); }
.bg-secondary-tint  { background-color: var(--color-secondary-tint); }
.bg-surface         { background-color: var(--color-surface); }
.bg-surface-2       { background-color: var(--color-surface-2); }
.bg-surface-3       { background-color: var(--color-surface-3); }
.bg-white           { background-color: var(--color-white); }

.border-default     { border: 1px solid var(--color-border); }
.border-primary     { border: 1px solid var(--color-primary-border); }
.border-secondary   { border: 1px solid var(--color-secondary-border); }