/* ===========================================================
   Wise Moon Build — Design Tokens (v2, grounded in real logo)
   Sunny yellow + ink black + warm cream. Bold modern register.
   =========================================================== */

/* ---------- Webfonts (Google substitutions; flagged in README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ----------------------- Color ----------------------- */

  /* Signature — the yellow disc, sampled from the logo */
  --sun:         #EAD32C;
  --sun-deep:    #D9C022;  /* hover state on sun-filled buttons */
  --sun-soft:    #F6EBA0;  /* tinted background, chips */
  --sun-wash:    #FBF5D2;  /* very subtle yellow wash */

  /* Surfaces */
  --bone:        #F7F4ED;  /* primary page background — warm white */
  --paper:       #FFFFFF;  /* elevated card surface */
  --sand:        #ECE6D6;  /* sunken / striped surface, input fill */
  --shell:       #E2DBC4;  /* deeper neutral band */

  /* Foregrounds (true black-ish, slightly warm) */
  --ink:         #0E0E0C;  /* primary text */
  --char:        #2E2E2A;  /* secondary heading */
  --stone:       #6E6D67;  /* secondary text, captions */
  --stone-soft:  #A8A69E;  /* tertiary, dividers */
  --border:      rgba(14,14,12, 0.12);
  --border-strong: rgba(14,14,12, 0.20);

  /* Supporting accents (used sparingly) */
  --rust:        #B5421F;  /* the only warm contrast color — for emphasis */
  --moss:        #4F5A3A;  /* organic supporting accent */

  /* Status (warm-balanced) */
  --success:     #4F7038;
  --warning:     #C9831F;
  --danger:      #B5421F;
  --info:        var(--ink);

  /* Semantic aliases — use these in components when possible */
  --bg:          var(--bone);
  --bg-elevated: var(--paper);
  --bg-sunken:   var(--sand);
  --bg-inverse:  var(--ink);
  --fg:          var(--ink);
  --fg-muted:    var(--stone);
  --fg-on-dark:  var(--bone);
  --accent:      var(--sun);
  --accent-fg:   var(--ink);

  /* ----------------------- Type ----------------------- */
  /*
    Archivo is the display face — geometric, slightly condensed at heavy weights,
    echoes the chunky W/M monogram. Inter Tight handles body. JetBrains Mono is
    reserved for measurements/specs.
  */

  --font-display: "Archivo", "Archivo Black", "Helvetica Neue", system-ui, sans-serif;
  --font-sans:    "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-serif:   "Newsreader", "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* Scale */
  --text-xs:     12px;
  --text-sm:     14px;
  --text-base:   16px;
  --text-md:     18px;
  --text-lg:     22px;
  --text-xl:     28px;
  --text-2xl:    36px;
  --text-3xl:    48px;
  --text-4xl:    64px;
  --text-5xl:    84px;
  --text-6xl:   112px;

  /* Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Line heights */
  --leading-tight: 0.95;   /* display headlines — packed tight */
  --leading-snug: 1.10;
  --leading-normal: 1.35;
  --leading-relaxed: 1.55;
  --leading-loose: 1.75;

  /* Tracking */
  --tracking-tightest: -0.04em;  /* huge display only */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-overline: 0.16em;

  /* ----------------------- Spacing ----------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --content-max: 1280px;
  --content-gutter: 32px;
  --content-gutter-lg: 64px;

  /* ----------------------- Radii (architectural, mostly square) ----------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-pill: 999px;
  /* Most surfaces use radius-sm or none. The brand is angular — soft pillows look wrong. */

  /* ----------------------- Shadows (cool/neutral, very subtle) ----------------------- */
  --shadow-soft:
    0 1px 2px rgba(14, 14, 12, 0.06),
    0 2px 6px rgba(14, 14, 12, 0.04);

  --shadow-lift:
    0 4px 10px rgba(14, 14, 12, 0.08),
    0 12px 28px rgba(14, 14, 12, 0.06);

  --shadow-deep:
    0 8px 24px rgba(14, 14, 12, 0.12),
    0 32px 64px rgba(14, 14, 12, 0.10);

  /* The brand prefers hard borders to shadow. Use sparingly. */

  /* ----------------------- Motion ----------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap: cubic-bezier(0.3, 0, 0, 1);   /* slight snap, for bold register */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --dur-stage: 480ms;
}

/* ===========================================================
   Base element styles. Apply class `wm` on a wrapper to scope.
   =========================================================== */

.wm,
.wm * {
  box-sizing: border-box;
}

.wm {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wm h1, .wm h2, .wm h3, .wm h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.wm h1 { font-size: clamp(48px, 8vw, var(--text-6xl)); letter-spacing: var(--tracking-tightest); }
.wm h2 { font-size: clamp(36px, 5vw, var(--text-4xl)); }
.wm h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); }
.wm h4 { font-size: var(--text-lg); line-height: var(--leading-snug); font-weight: var(--weight-bold); }

.wm h5, .wm h6,
.wm .overline {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--stone);
  margin: 0;
}

.wm p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}

.wm p + p { margin-top: var(--space-4); }

.wm .lede {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--char);
  font-weight: 400;
}

.wm small,
.wm .caption {
  font-size: var(--text-sm);
  color: var(--stone);
  line-height: var(--leading-normal);
}

.wm a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--sun);
  transition: text-decoration-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.wm a:hover { text-decoration-color: var(--ink); }

.wm code,
.wm .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--ink);
  background: var(--sand);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

.wm .spec {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--stone);
}

.wm hr {
  border: 0;
  border-top: 1px solid var(--ink);
  margin: var(--space-7) 0;
}

/* Selection */
.wm ::selection {
  background: var(--sun);
  color: var(--ink);
}

/* Focus */
.wm :focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}