/* ============================================================
   Yu! — Brand System v1.2 LOCK · shared tokens & primitives
   Palette LOCKED. Type: Inter + JetBrains Mono.
   ============================================================ */

:root {
  /* Palette v1.2 — locked, no other hexes */
  --ink: #0E0E0E;
  --cream: #F5F1E8;
  --terracotta: #D14B2F;
  --terracotta-deep: #A8381F;
  --dark-ink: #1A1A1A;
  --cyan: #19A7E2;
  --light-blue: #3CBFF0;
  --indigo: #687DFA;
  --magenta: #C934E4;
  --paper-2: #EDE9DF;
  --muted: #6B6B6B;
  --neutral-300: #A6A29A;

  --line: rgba(14,14,14,0.12);
  --line-soft: rgba(14,14,14,0.07);
  --line-dark: rgba(245,241,232,0.14);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --maxw: 1240px;
  --gutter: clamp(24px, 5vw, 80px);
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  font-size: 17px;
  font-weight: 400;
}

::selection { background: var(--terracotta); color: var(--cream); }

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

[hidden] { display: none !important; }

/* ---- shared layout ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---- eyebrow / mono label ---- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- buttons (Yu! v1.2 — radius-md rectangle, per product UI) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  line-height: 1; cursor: pointer; border: none;
  transition: background .2s ease, color .2s ease, transform .12s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:active { transform: scale(0.99); }
.btn-pill { border-radius: 14px; padding: 14px 22px; }
.btn-primary { background: var(--terracotta); color: var(--cream); box-shadow: 0 1px 2px rgba(14,14,14,0.10); }
.btn-primary:hover { background: var(--terracotta-deep); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-link { font-weight: 600; font-size: 16px; color: var(--ink); border-bottom: 1.5px solid var(--terracotta); padding-bottom: 2px; }
.btn-spark { flex: none; }
.btn-arrow { flex: none; transition: transform .18s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ---- pulse breathing (Motion-Principles: subtle) ---- */
@keyframes yu-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.82; }
}
@keyframes yu-ring {
  0% { transform: scale(0.85); opacity: 0.45; }
  70% { opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}