/* tokens.css — palette, type, z-layers, reset, and the two utilities everything else leans on.
 * Extracted verbatim from prototype/okayso-the-floor.html. Phase 3 will break the perfection.
 */
:root{
  --night:#1C1216;
  --lamp:#F4DFC0;
  --carpet:#6E5560;
  --carpet-lit:#A98492;
  --paper:#F6F0DF;
  --paper-dark:#E8DFC7;
  --rule:#9DB6CC;
  --margin:#D98A96;
  --pen:#243B8F;          /* blue bic */
  --pen-soft:#3E54A8;
  --sharpie:#211D22;
  --pencil:#6E6A61;
  --pink:#D2568F;
  --stamp:#B03A3A;
  --tape:rgba(250,246,228,.5);
  --shadow:rgba(10,4,8,.55);

  /* Reserved bands for overlay chrome. Nothing that is part of the notebook may be laid out
   * inside these; the toast lives in the top band while the reader is open, and the "put it
   * down" button owns the bottom one. tools/overlap-audit.mjs asserts both stay empty. */
  --chrome-top:76px;
  --chrome-bottom:92px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:'Nunito',sans-serif;color:var(--pen);
  background:var(--night);
  overflow-x:hidden;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
button:focus-visible,[tabindex]:focus-visible{outline:2px dashed var(--lamp);outline-offset:4px;}
button:active{transform:translateY(1px);}
[hidden]{display:none !important;}
::selection{background:#3E2A44;color:var(--lamp);}
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:#241A1F;}
::-webkit-scrollbar-thumb{background:#54404A;border-radius:5px;}

/* paper-grain filter defined once in SVG below, referenced via url(#grain) */
.grained{position:relative;}
.grained::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.16'/></svg>");
  mix-blend-mode:multiply;opacity:.5;
}

/* toast — global chrome */
/* The toast lives at the foot of the floor, but the reader's "put it down" button is also at
 * the foot of the reader — and when the reader is scrolled to the end they printed on top of
 * each other. While the notebook is open the toast moves to the head of the page instead. */
#toast{
  /* on the floor the toast sits ABOVE the footer, not on it — the bottom band belongs to type
   * there, and to the reader's exit button once the notebook is open */
  position:fixed;left:50%;bottom:var(--chrome-bottom);transform:translateX(-50%) rotate(-1deg);z-index:90;
  max-width:min(78vw,420px);text-align:center;
  font-family:'Reenie Beanie',cursive;font-size:1.4rem;color:#F5E4D2;background:#4A2A3A;
  padding:9px 24px;border-radius:34px;box-shadow:0 8px 18px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .4s, transform .4s;
}
#toast.show{opacity:1;transform:translateX(-50%) rotate(-1deg) translateY(-6px);}
body:has(#reader.on) #toast{bottom:auto;top:18px;}
body:has(#reader.on) #toast.show{transform:translateX(-50%) rotate(-1deg) translateY(6px);}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important;}
  html{scroll-behavior:auto !important;}
}