/* ==========================================================================
   Wooly — brand foundation
   Tokens, reset, type, and the stitched-felt primitives shared by the
   marketing site and the app. Nothing layout-specific lives here.
   ========================================================================== */

:root {
  /* Core palette — Brand Kit v1.0 */
  --mist: #edf0f7;
  --tusk: #fffbf2;
  --chestnut: #7c4a3a;
  --chestnut-deep: #5f3830;
  --marigold: #f5a623;
  --slate: #1f2937;
  --fog: #8593a8;
  --line: #e6dccd;

  /* Member "yarn" colors — one per family member */
  --yarn-marigold: #f5a623;
  --yarn-teal: #2a9d8f;
  --yarn-coral: #e76f51;
  --yarn-plum: #7b5ea7;
  --yarn-moss: #6a994e;
  --yarn-sky: #4a90d9;

  /* Derived / functional */
  --ink: var(--slate);
  --ink-soft: #55617a;          /* secondary body text */
  --ink-on-marigold: #3a2a12;   /* AA on #F5A623 */
  --surface: var(--tusk);
  --surface-warm: #f3eae3;      /* Wooly's own voice */
  --page: var(--tusk);

  --good-bg: #eaf6f0;
  --good-line: #bfe3d5;
  --good-ink: #1e7a63;
  --warn-bg: #fbedea;
  --warn-ink: #c0392b;

  /* The stitch — one declaration, everywhere */
  --stitch: rgba(124, 74, 58, 0.24);
  --stitch-strong: rgba(124, 74, 58, 0.32);
  --stitch-width: 2px;

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;

  --shadow-lift: 0 18px 40px -22px rgba(90, 60, 50, 0.42);
  --shadow-deep: 0 28px 56px -26px rgba(90, 60, 50, 0.55);

  --font-display: "Fredoka", "Trebuchet MS", "Segoe UI", sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-wordmark: "Quicksand", "Fredoka", "Trebuchet MS", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;

  --ease-thread: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --- reset ---------------------------------------------------------------- */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 17px;            /* floor is 16px; body sits just above it */
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

ul, ol { list-style: none; }

/* --- type ---------------------------------------------------------------- */

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.5rem, 6.2vw, 4.15rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.6rem); letter-spacing: -0.02em; }
h3 { font-size: 1.3rem; }

strong, b { font-weight: 700; }

.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}

/* Small caps label. Used where the label names a *kind* of thing. */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
}

.lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 54ch;
}

.muted { color: var(--ink-soft); }
.dim { color: var(--fog); }

/* --- the stitch: felt surfaces -------------------------------------------- */

.stitched {
  background: var(--surface);
  border: var(--stitch-width) dashed var(--stitch);
  border-radius: var(--r-lg);
}

.stitched--warm { background: var(--surface-warm); }
.stitched--solid { border-style: solid; border-color: var(--line); }

/* --- buttons -------------------------------------------------------------- */
/* Buttons never drop below 18px per the accessibility floor. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.2;
  padding: 0.9375rem 1.75rem;
  border-radius: var(--r-md);
  min-height: 52px;
  transition: transform 0.14s var(--ease-thread), box-shadow 0.14s var(--ease-thread),
    background-color 0.14s ease, border-color 0.14s ease;
}

.btn--primary {
  background: var(--marigold);
  color: var(--ink-on-marigold);
  box-shadow: 0 2px 0 rgba(124, 74, 58, 0.18);
}
.btn--primary:hover { background: #ffb63f; transform: translateY(-1px); }
.btn--primary:active { transform: translateY(1px); box-shadow: none; }

.btn--ghost {
  background: var(--surface);
  color: var(--chestnut);
  border: var(--stitch-width) dashed var(--stitch-strong);
}
.btn--ghost:hover { border-color: var(--chestnut); background: #fff; }

.btn--onDark {
  background: var(--marigold);
  color: var(--ink-on-marigold);
}

.btn--quiet {
  color: var(--chestnut);
  padding: 0.625rem 0.875rem;
  min-height: 44px;
  font-size: 1rem;
}
.btn--quiet:hover { color: var(--chestnut-deep); text-decoration: underline; }

.btn--sm {
  font-size: 1rem;
  padding: 0.6875rem 1.125rem;
  min-height: 44px;
  border-radius: var(--r-sm);
}

.btn--block { width: 100%; }

/* --- yarn dots: the family, always in the same order ---------------------- */

.yarns {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.yarns i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  display: block;
}

/* --- focus + motion floor ------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--chestnut);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible,
.slab :focus-visible { outline-color: var(--marigold); }

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 999;
  background: var(--chestnut);
  color: var(--tusk);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-family: var(--font-display);
}
.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}