/* ===========================================================================
   Cocoon — Base element styles & typographic utilities
   Maps the raw tokens onto real, usable element defaults and helper classes.
   =========================================================================== */

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: var(--weight-regular);
  color: var(--ink-900);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--sage-300);
  color: var(--ink-900);
}

/* --- Type roles ----------------------------------------------------------- */
.cc-display {
  font-size: var(--display-size);
  line-height: var(--display-line);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
}
.cc-h1 { font-size: var(--h1-size); line-height: var(--h1-line); font-weight: var(--h1-weight); letter-spacing: var(--h1-track); margin: 0; }
.cc-h2 { font-size: var(--h2-size); line-height: var(--h2-line); font-weight: var(--h2-weight); letter-spacing: var(--h2-track); margin: 0; }
.cc-h3 { font-size: var(--h3-size); line-height: var(--h3-line); font-weight: var(--h3-weight); margin: 0; }
.cc-h4 { font-size: var(--h4-size); line-height: var(--h4-line); font-weight: var(--h4-weight); margin: 0; }
.cc-body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-line); }
.cc-body { font-size: var(--body-size); line-height: var(--body-line); }
.cc-body-sm { font-size: var(--body-sm-size); line-height: var(--body-sm-line); }
.cc-caption { font-size: var(--caption-size); line-height: var(--caption-line); color: var(--ink-500); }
.cc-label {
  font-size: var(--label-size);
  line-height: var(--label-line);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
}
.cc-eyebrow {
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-track);
  color: var(--ink-500);
}
.cc-kicker {
  font-size: var(--kicker-size);
  font-weight: var(--kicker-weight);
  letter-spacing: var(--kicker-track);
  text-transform: uppercase;
  color: var(--ink-900);
}
.cc-code {
  font-family: var(--font-mono);
  font-size: var(--code-size);
  line-height: var(--code-line);
}

/* --- Color helpers -------------------------------------------------------- */
.cc-text-secondary { color: var(--ink-500); }
.cc-text-muted { color: var(--ink-400); }
.cc-text-sage { color: var(--color-sage); }

/* --- Shared interaction states -------------------------------------------- */
.cc-button:hover:not(:disabled) { filter: brightness(0.96); }
.cc-tag-removable:hover { filter: brightness(0.97); }
.cc-input:focus,
.cc-input:focus-within {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* --- Paper texture overlay ------------------------------------------------ */
/* Apply to a surface to give it the brand's structured-paper warmth. */
.cc-paper {
  background-color: var(--color-canvas);
  background-image: url("../assets/brand/paper-texture.jpeg");
  background-size: 480px;
  background-blend-mode: multiply;
}