/* ============================================================
   Kin Coffee — shared design tokens & primitives
   Loaded by every variant BEFORE its own style.css.
   ============================================================ */

:root {
  /* palette — 60/30/10: ivory dominant, beige rhythm, taupe accent */
  --ivory: #F6F2EC;
  --beige: #E8DFD1;
  --taupe: #A48F7A;
  --taupe-dark: #837261;
  --taupe-warm: #8C7B6E;
  --taupe-deep: #6E5F51;       /* button fill — AA-safe with ivory text */
  --ink: #3D332C;              /* body text anchor — WCAG-safe on ivory/beige */
  --ink-soft: #63574C;         /* small labels/captions — AA-safe on ivory & beige */
  --hairline: rgba(131, 114, 97, 0.35);

  --font-sans: 'Montserrat', 'Avenir Next', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Cormorant', Georgia, serif;

  --track-caps: 0.18em;        /* nav / buttons */
  --track-label: 0.25em;       /* eyebrow micro-labels */

  --pad-section: clamp(72px, 12vw, 160px);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* accessibility */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--ivory);
  padding: 12px 20px; font-size: 13px; letter-spacing: var(--track-caps);
  text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--taupe); outline-offset: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* film-grain overlay — near-subliminal tactile warmth (brief §6) */
.grain::after {
  content: "";
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the single motion primitive — fade + translateY, observer adds .is-revealed.
   Scoped to html.js (set by an inline head script) so content never hides
   when JavaScript is unavailable. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* hairline rule */
.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

/* eyebrow micro-label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-soft); /* small text — taupe-dark fails AA below 24px */
}