/* ═══════════════════════════════════════════
   Jessi Contreras — Design Tokens
   Single source of truth for all variables
   ═══════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {

  /* Brand — Purple */
  --purple:        #55418A;
  --purple-tint:   #F1F1FC;
  --purple-mid:    #B6B4E9;
  --purple-dark:   #55418A;
  --purple-deep:   #291F47;

  /* Accent — Yellow */
  --yellow:        #FFC120;
  --yellow-tint:   #FBF4CE;
  --yellow-dark:   #6D3B1C;

  /* Neutrals */
  --white:         #ffffff;
  --cream:         #F8F6F4;
  --sand:          #E8E2D9;
  --stone:         #C8B7A9;
  --ink:           #2D2A33;
  --ink-light:     #5C5667;

  /* Dark section text */
  --label-on-dark: #D8D1EA;

  /* Typography */
  --font-heading:  'Poppins', sans-serif;
  --font-body:     'DM Sans', sans-serif;

  /* Font weights — replace hardcoded numbers with these tokens only */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra-bold: 800;


  /* Typography scale — size + letter-spacing per role */
  /* Usage: font-size: var(--t-display-size); letter-spacing: var(--t-display-ls); */

  --t-display-size:    clamp(2.4rem, 4vw, 3.6rem);
  --t-display-ls:      -0.04em;

  --t-h1-size:         clamp(2rem, 3.5vw, 3rem);
  --t-h1-ls:           -0.03em;

  --t-h2-size:         1.5rem;
  --t-h2-ls:           -0.02em;

  --t-h3-size:         1.1rem;
  --t-h3-ls:           -0.01em;

  --t-pullquote-size:  clamp(1.6rem, 3vw, 2.4rem);
  --t-pullquote-ls:    0.01em;

  --t-body-size:       1rem;
  --t-body-ls:         0;

  --t-body-sm-size:    0.875rem;
  --t-body-sm-ls:      0;

  --t-label-size:      0.8rem;
  --t-label-ls:        0.08em;

  --t-eyebrow-size:    0.75rem;
  --t-eyebrow-ls:      0.12em;

  --t-caption-size:    0.75rem;
  --t-caption-ls:      0.06em;


  --t-decorative-size:     10rem;
  --t-decorative-ls:       0;

  --t-metric-xl-size:      2.4rem;
  --t-metric-xl-ls:        0;

  --t-metric-lg-size:      3.5rem;
  --t-metric-lg-ls:        0;

  --t-metric-md-size:      2rem;
  --t-metric-md-ls:        0;

  --t-metric-sm-size:      1.8rem;
  --t-metric-sm-ls:        0;

  --t-heading-footer-size: 1.7rem;
  --t-heading-footer-ls:   0;

  --t-heading-sm-size:     1.3rem;
  --t-heading-sm-ls:       -0.01em;

  --t-icon-size:           1.2rem;
  --t-icon-ls:             0;

  --t-body-xs-size:        0.9rem;
  --t-body-xs-ls:          0;

  /* Spacing */
  --space-xs:      4px;
  --space-sm:      8px;
  --space-md:      16px;
  --space-lg:      32px;
  --space-xl:      64px;
  --space-2xl:     96px;

  /* Border radius */
  --radius-sm:     8px;
  --radius-md:     14px;
  --radius-lg:     20px;
  --radius-xl:     32px;
  --radius-pill:   100px;

  /* Layout */
  --max-w:         1200px;
  --page-px:       clamp(20px, 5vw, 72px);
}

/* Focus states — Option A */
:focus-visible {
  outline: 2px solid var(--purple-mid);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip navigation */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 16px;
  background: var(--purple);
  color: var(--white);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--t-body-sm-size);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  z-index: 9999;
  transition: top 0.2s;
}
.skip-nav:focus { top: 16px; }

/* Base */
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}