:root {
  /* BLUSH skin tokens */
  --blush-paper: #F6EBE6;
  --blush-cream: #FBF4F0;
  --blush-ink:   #4A3833;
  --blush-rose:  #C08577;
  --blush-clay:  #9E5B4F;

  /* NOIR 2.0 dual-ground tokens */
  --paper-dark:      #161210;
  --surface-dark:    #201A16;
  --rule-dark:       #3B322A;
  --ink-dark:        #EDE4D6;
  --ink-muted-dark:  #A99B89;

  --paper-cream:     #F2E8DC;
  --surface-cream:   #E7DAC8;
  --rule-cream:      #C7B6A0;
  --ink-cream:       #241A14;
  --ink-muted-cream: #6B5B4C;

  --accent:      #C6A268;
  --accent-deep: #7A5F38;

  /* Colors — aliased to dark ground (default) */
  --paper:     var(--paper-dark);
  --surface:   var(--surface-dark);
  --rule:      var(--rule-dark);
  --ink:       var(--ink-dark);
  --ink-muted: var(--ink-muted-dark);
  --accent-40: color-mix(in srgb, var(--accent) 40%, transparent);
  --accent-15: color-mix(in srgb, var(--accent) 15%, transparent);

  /* Fonts */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-label: 'Hanken Grotesk', system-ui, sans-serif;

  /* Type scale */
  --fs-display: clamp(3.24rem, 6.48vw + 1.08rem, 6.75rem);
  --fs-h1:      clamp(2.25rem, 3.6vw + 1rem, 4rem);
  --fs-h2:      clamp(1.75rem, 2vw + 1rem, 2.75rem);
  --fs-h3:      clamp(1.25rem, 1vw + 1rem, 1.625rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-label:   0.75rem;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 5.5rem;
  --space-7: 7rem;
  --space-8: 8rem;

  /* Layout */
  --container-reading: 68ch;
  --container-wide: 1280px;

  /* Radius */
  --radius: 2px;
}

.ground-cream {
  --paper:     var(--paper-cream);
  --surface:   var(--surface-cream);
  --rule:      var(--rule-cream);
  --ink:       var(--ink-cream);
  --ink-muted: var(--ink-muted-cream);
  --accent:    var(--accent-deep);
  --accent-40: color-mix(in srgb, #C6A268 60%, transparent);
  --accent-15: color-mix(in srgb, #C6A268 25%, transparent);
}

/* Specificity 0,0,1,1 — wins over any single-class section rule in page CSS
   that loads after tokens.css (e.g. .about-bio, .experience-stages). Without
   this, those rules override .ground-cream and assign --surface-cream instead
   of --paper-cream, creating a two-tone stripe at ground seams. */
body .ground-cream {
  background: var(--paper);
  color: var(--ink);
}

.ground-cream img {
  border: 1px solid var(--rule);
}

/* When ground-cream sits inside a constrained .wrap, break out to full viewport */
.wrap > .ground-cream {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  max-width: none;
}