/* Pawnther Chess — design tokens
   Slimmed from colors_and_type.css + site.css. Single source of truth for the
   three direction explorations. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Inter:wght@300..900&family=Patrick+Hand&family=JetBrains+Mono:wght@500;700;800&display=swap');

:root {
  /* Paper & ink ─────────────────────────────────────── */
  --paper-50:   #fff9ec;
  --paper-100:  #fffaf2;
  --paper-200:  #fbf7f0;
  --paper-300:  #fbf4e6;
  --paper-400:  #f7f1e7;
  --paper-card: #fffdf8;
  --paper-cream:#fffaf0;

  --ink:        #191714;
  --ink-warm:   #26211c;
  --ink-soft:   #5f5a52;
  --ink-muted:  #8f877b;

  --line:        #d8cfc1;
  --line-strong: #bcae96;

  /* Accents ─────────────────────────────────────────── */
  --gold:        #e39b44;
  --gold-soft:   #f1dfb1;
  --gold-deep:   #b87928;
  --olive:       #8d9870;
  --olive-soft:  #e7eddc;
  --blue:        #6e8aa0;
  --blue-soft:   #e2ebf0;
  --rose:        #b77a86;
  --rose-soft:   #f3e2e6;
  --orange:      #e88742;
  --green:       #77a875;

  /* Board ─────────────────────────────────────────── */
  --board-light: #f7e8cb;
  --board-dark:  #9c8265;
  --board-hot:   #d7b15a;
  --board-good:  #b8c9a7;
  --board-frame: #f0e3c7;

  /* Type ─────────────────────────────────────────── */
  --font-display: "Fraunces","Iowan Old Style",Georgia,serif;
  --font-ui:      "Inter",system-ui,-apple-system,sans-serif;
  --font-hand:    "Patrick Hand","Comic Sans MS",cursive;
  --font-mono:    "JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* Motion ─────────────────────────────────────────── */
  --ease-soft: cubic-bezier(.2,.7,.2,1);
  --ease-pop:  cubic-bezier(.34,1.56,.64,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);

  /* Bg washes ─────────────────────────────────────── */
  --bg-adult:
    radial-gradient(1200px 600px at 8% -10%, rgba(248,223,154,.32), transparent 60%),
    radial-gradient(1000px 700px at 110% 12%, rgba(216,106,145,.16), transparent 55%),
    radial-gradient(900px 800px at -10% 85%, rgba(141,152,112,.18), transparent 55%),
    radial-gradient(700px 600px at 105% 95%, rgba(110,138,160,.18), transparent 55%),
    linear-gradient(180deg, var(--paper-200), var(--paper-400));

  --noise-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* Dark mode — invert paper to deep cocoa, keep all accents
   Activated via [data-mode="dark"] on the artboard root. */
[data-mode="dark"]{
  --paper-100: #221d18;
  --paper-200: #1d1916;
  --paper-300: #1f1b17;
  --paper-400: #181410;
  --paper-card:#2a231d;
  --paper-cream:#2e251e;

  --ink:        #f5ead6;
  --ink-warm:   #f1e3c8;
  --ink-soft:   #c0b39a;
  --ink-muted:  #9b8e76;

  --line:        rgba(255,243,217,.12);
  --line-strong: rgba(255,243,217,.22);

  --gold-soft:  rgba(241,223,177,.16);
  --olive-soft: rgba(141,152,112,.18);
  --blue-soft:  rgba(110,138,160,.18);
  --rose-soft:  rgba(243,226,230,.16);

  --board-light: #c9b187;
  --board-dark:  #5d4a35;
  --board-frame: #2a221a;

  --bg-adult:
    radial-gradient(1200px 600px at 8% -10%, rgba(227,155,68,.18), transparent 60%),
    radial-gradient(1000px 700px at 110% 12%, rgba(216,106,145,.14), transparent 55%),
    radial-gradient(900px 800px at -10% 85%, rgba(141,152,112,.10), transparent 55%),
    linear-gradient(180deg, #1d1916, #14110e);
}

/* Reset within artboards ─────────────────────────────── */
.pw-frame, .pw-frame *{ box-sizing: border-box; }
.pw-frame{
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg-adult);
  background-attachment: local;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" 1, "cv11" 1;
}
.pw-frame::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  z-index: 0; opacity:.18; background-image: var(--noise-svg);
  mix-blend-mode: multiply;
}
[data-mode="dark"].pw-frame::before{ mix-blend-mode: overlay; opacity:.12; }

.pw-frame > *{ position: relative; z-index: 1; }

/* Type primitives ─────────────────────────────────── */
.pw-frame h1, .pw-frame h2, .pw-frame h3, .pw-frame h4{
  font-family: var(--font-display); font-weight:700;
  letter-spacing:-.04em; line-height:1.02; margin:0;
}
.pw-frame p{ margin:0; }
.pw-frame a{ color: inherit; text-decoration: none; }
.pw-frame button{
  font: inherit; cursor: pointer; border: 0;
  background: transparent; color: inherit;
}
.pw-frame .mono{ font-family: var(--font-mono); }
.pw-frame .serif{ font-family: var(--font-display); }
.pw-frame .italic{ font-style: italic; }
.pw-frame .eyebrow{
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-muted);
}
.pw-frame .kicker{
  display:inline-block; color: var(--gold);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase;
}

/* Inline chess piece (uses unicode for ornaments only) */
.pw-glyph{ font-family: var(--font-display); font-style: normal; }

/* Reveal on enter — JS toggles .pw-in */
.pw-reveal{ opacity: 0; transform: translateY(14px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
  transition-delay: var(--pw-d, 0ms);
}
.pw-reveal.pw-in{ opacity: 1; transform: none; }

/* Cursor reactive radial halo (set --mx --my on container) */
.pw-halo{ position: relative; }
.pw-halo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),
    rgba(227,155,68,.18), transparent 60%);
  opacity: 0; transition: opacity .25s; z-index: 1;
}
.pw-halo:hover::after{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .pw-reveal{ opacity:1; transform:none; transition:none; }
}