/* SJC Walk 250 — Design Tokens 2026
   Source: partner_sites/configs/71/pagesTemplate2026.cfm
   -------------------------------------------------------- */

/* Fonts — Inter (body) + Koulen (display/H1) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Koulen&display=swap');

/* Colors */
:root {
  --color-brown:  #321716;
  --color-blue:   #049E9E;
  --color-red:    #CA3625;
  --color-orange: #CD7C29;
  --color-beige:  #E2CDA3;
  --color-green:  #68682B;
}

/* Typography */
:root {
  --font-body:    'Inter', sans-serif;
  --font-display: 'Koulen', sans-serif;

  /* Scale */
  --text-body:         18px;
  --text-body-semi:    20px;
  --text-body-small:   13px;
  --text-button:       18px;
  --text-caption:      14px;
  --text-h1:           48px;
  --text-quote:        24px;

  /* Weights */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;

  /* Line heights */
  --leading-tight:     100%;  /* H1 */
  --leading-normal:    140%;  /* body, buttons, captions, quote */
}

/* Spacing */
:root {
  --space-0:    0px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   16px;
  --space-4:   24px;
  --space-5:   32px;
  --space-6:   40px;
  --space-7:   64px;
  --space-8:   80px;
  --space-9:  100px;
}

/* --------------------------------------------------------
   Type helpers — apply these classes to elements
   -------------------------------------------------------- */

.t-body {
  font-family: var(--font-body);
  font-size:   var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

.t-body-semi {
  font-family: var(--font-body);
  font-size:   var(--text-body-semi);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

.t-body-small {
  font-family: var(--font-body);
  font-size:   var(--text-body-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

.t-button {
  font-family: var(--font-body);
  font-size:   var(--text-button);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.t-caption {
  font-family:     var(--font-body);
  font-size:       var(--text-caption);
  font-weight:     var(--weight-medium);
  line-height:     var(--leading-normal);
  letter-spacing:  1.4px;
  text-transform:  uppercase;
}

.t-h1 {
  font-family:    var(--font-display);
  font-size:      var(--text-h1);
  font-weight:    var(--weight-regular);
  line-height:    var(--leading-tight);
  text-transform: uppercase;
}

.t-quote {
  font-family:  var(--font-body);
  font-size:    var(--text-quote);
  font-style:   italic;
  font-weight:  var(--weight-regular);
  line-height:  var(--leading-normal);
}