/* storybookkidz — the brand, in one file.
 *
 * Two rooms, and they are deliberately not the same room.
 *
 *   THE LIBRARY is night. Deep plum, a few stars, covers glowing on it like
 *   books on a shelf with the lamp on. It is a place you choose something in,
 *   at the end of the day, usually with a grown-up holding the tablet.
 *
 *   THE BOOK is paper. Warm cream, black-brown ink, wide margins, one picture
 *   and a few big sentences. Nothing from the library follows you in — no
 *   header, no navigation, no chrome. A child reading should be looking at a
 *   book, and every pixel that is not the book is competing with it.
 *
 * The switch between them is the strongest thing in the design, so it is worth
 * protecting: do not put paper panels in the library, and do not put the night
 * behind a page.
 */

:root {
  /* Night — the library */
  --night:    #1b1733;
  --night-2:  #241e40;
  --night-3:  #322a56;
  --night-ink:#efe9ff;
  --night-soft:#a99ec9;

  /* The surface the book is put down on.
   *
   * It exists because a shadow needs somewhere to fall. The reader used to
   * paint the whole screen the colour of the page, which meant the book had no
   * edges — it was not an object, it was the background. A quiet warm tone a
   * few steps down from the paper is enough: dark enough that the book lifts
   * off it, light enough that nothing about it asks to be looked at. */
  --surface:   #e6dccb;
  --surface-2: #dbd0bc;

  /* Paper — the book, by daylight */
  --page:     #fffaf1;
  --page-2:   #f6ecd9;
  --ink:      #2e2317;
  --ink-soft: #7b6a58;
  --rule:     #e3d5bd;
  --plate-shadow: rgba(70,50,20,.13);

  /* Accents. Gold is the brand and is used for one thing at a time: the thing
     you are meant to press. Berry, mint and sky are for telling books apart —
     age bands, tags, the painted covers — and never for a control. */
  --gold:     #f6b93b;
  --gold-ink: #3a2a06;
  --berry:    #ef5f79;
  --mint:     #4fc1a6;
  --sky:      #74aef0;

  --display: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
             Nunito, Quicksand, "Trebuchet MS", system-ui, sans-serif;
  --story:   Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* Paper by lamplight.
 *
 * This is a bedtime product read in a dark room, and every site in the field is
 * a white page at full brightness — which is the one thing all of them get
 * wrong. Not a grey "dark mode" borrowed from a code editor: a page is still a
 * page, so this is the same warm paper turned right down, with the ink gone to
 * candlelight rather than to white. The illustration is dimmed a little too;
 * a fully lit picture on a dark page glares like a phone in a cinema. */
body.night {
  /* Deeper than the page, so the book still lifts by lamplight. */
  --surface:   #16120e;
  --surface-2: #0f0c09;
  --page:     #221c17;
  --page-2:   #2b241d;
  --ink:      #e8ddc9;
  --ink-soft: #a2917a;
  --rule:     #3d332a;
  --plate-shadow: rgba(0,0,0,.4);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }
body {
  font: 16px/1.6 var(--display);
  color: var(--night-ink);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
}

/* ---------------- daylight ----------------
 *
 * The shelf is a light room now, and the reason is the audience rather than
 * taste: a dark interface is a grown-up's preference, and a five-year-old
 * looking for a story wants the lights on. The book itself still has a lamp,
 * because that is read at the end of the day and a dark room is the point
 * there — but choosing a book is a daytime act.
 *
 * Its own tokens rather than a redefinition of the night ones, so that nothing
 * here can reach into the reader. The reader is finished and is not to move.
 */
body.day {
  --shell:      #fff8ee;
  --shell-2:    #ffefd9;
  --shell-ink:  #33261a;
  --shell-soft: #7f6c56;
  --shell-line: rgba(51,38,26,.12);
  --shell-card: #fffdf8;

  background: var(--shell);
  color: var(--shell-ink);
}

/* A warm sky over a cream room. Two still washes: nothing moves, nothing
   competes with a cover. */
body.day::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(90% 55% at 12% -10%, rgba(255,214,150,.55), transparent 60%),
    radial-gradient(80% 50% at 92% -4%, rgba(180,220,240,.45), transparent 62%),
    linear-gradient(180deg, var(--shell-2) 0%, var(--shell) 34%);
}

body.day .mark .word { color: #052e54; }        /* 13.06 on cream */
body.day .mark .word .c1 { color: #986006; }    /* 4.96 */
body.day .mark .word .c2 { color: #b4461a; }    /* 5.20 */
body.day .mark .word .c3 { color: #c0432f; }    /* 4.87 */
body.day .mark .word .c4 { color: #24742e; }    /* 5.51 */
body.day .mark .word .c5 { color: #16707d; }    /* 5.46 */
body.day .mark .word .c6 { color: #6455a0; }    /* 5.95 */
/* The accent, on cream, as text.
 *
 * The brand gold is #f6b93b and against this paper it comes out at 1.67 to 1 —
 * a colour rather than a word. It stays exactly as it is on a button, where it
 * is a surface with dark ink on it, and text that happens to be amber uses this
 * instead: 4.96 to 1, which is legible to somebody who does not see yellow
 * well, on a site whose whole purpose is reading. */
body.day .mark .word i { color: #986006; }
body.day .ghost { border-color: var(--shell-line); color: var(--shell-soft); }
body.day .ghost:hover { border-color: var(--shell-soft); color: var(--shell-ink); background: rgba(51,38,26,.04); }

/* The night sky. Three still gradients rather than drawn stars: a starfield of
   elements is a hundred nodes that scroll, and at this size nobody can tell the
   difference between stars and a suggestion of them. */
.sky {
  background:
    radial-gradient(80% 55% at 82% -6%, rgba(246,185,59,.16), transparent 62%),
    radial-gradient(70% 50% at 10% 4%, rgba(116,174,240,.14), transparent 60%),
    linear-gradient(180deg, var(--night-2) 0%, var(--night) 46%, #16122b 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

button, input, select, textarea { font: inherit; color: inherit; }
/* Nothing that gets pressed is text to be selected. A double tap on a button
   that highlights the label is how a control starts looking broken to somebody
   small who presses everything twice. The words of a story stay selectable. */
button, .chip, .go, .ghost, .mark, .band, .plate b, .plate span { user-select: none; -webkit-user-select: none; }
button { border: 0; background: none; cursor: pointer; }
a { color: inherit; }

/* ---------------- the wordmark ---------------- */

.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark svg { width: 34px; height: 34px; flex: none; margin: -2px 0; }
.mark .word {
  font: 700 21px/1 var(--display); letter-spacing: -.02em;
  color: var(--night-ink);
}
/* The wordmark, letter by letter.
 *
 * The brand board colours the name across six hues, and the hues are the thing
 * people recognise, so they stay. What could not stay is their lightness: on
 * cream the board's yellow measures 1.9 against the background and its orange
 * 2.7, which at 21px is a name with a hole in the middle of it — the "boo" of
 * storybook all but vanishes on a bright screen, and vanishes completely on a
 * dim one outdoors. These are the same hues walked down until every letter
 * clears 4.5, which is the line at which a word is readable rather than
 * decorative. Side by side with the board nobody would call them different
 * colours; on the page they are the difference between a wordmark and a smudge.
 *
 * The dark set is for the studio, which is the one room with a night floor. */
.mark .word i { font-style: normal; }
.mark .word .c1 { color: #f4a827; }   /* 8.61 on night */
.mark .word .c2 { color: #f0854f; }   /* 6.72 */
.mark .word .c3 { color: #f07451; }   /* 6.02 */
.mark .word .c4 { color: #4bbd5e; }   /* 7.18 */
.mark .word .c5 { color: #3fb6c6; }   /* 7.16 */
.mark .word .c6 { color: #a99adf; }   /* 6.88 */

/* ---------------- buttons ---------------- */

/* One primary shape in the whole product. A child learns it once — a fat gold
   pill or circle is the thing that goes forward — and it then means the same
   on the shelf, in the book, and at the end of it. */
.go, a.go { text-decoration: none; }
.go {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px;
  background: var(--gold); color: var(--gold-ink);
  font: 700 17px var(--display);
  box-shadow: 0 6px 0 #d59a24, 0 12px 24px rgba(0,0,0,.24);
  transition: transform .12s, box-shadow .12s;
}
.go:hover { transform: translateY(-1px); box-shadow: 0 7px 0 #d59a24, 0 16px 28px rgba(0,0,0,.28); }
/* Pressed moves down onto its own shadow. Children press and hold; a button
   that does nothing under a finger reads as broken before it reads as slow. */
.go:active { transform: translateY(4px); box-shadow: 0 2px 0 #d59a24, 0 6px 12px rgba(0,0,0,.2); }

.ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  border: 1px solid rgba(239,233,255,.28); color: var(--night-soft);
  font: 600 15px var(--display);
  transition: border-color .16s, color .16s, background .16s;
}
.ghost:hover { border-color: rgba(239,233,255,.6); color: var(--night-ink); background: rgba(255,255,255,.05); }

/* ---------------- waiting ----------------
 *
 * A shape where the thing will be, rather than a spinner on an empty screen. It
 * earns its place here: the pictures are eight hundred kilobytes of painted
 * illustration, so on a phone on a slow evening there is a real second where a
 * child is looking at something, and it should be the shape of a book.
 *
 * A moving gradient rather than a pulse — a pulse reads as something broken, a
 * sweep reads as something coming. */
.skeleton { position: relative; overflow: hidden; background: rgba(255,255,255,.05); }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09) 55%, transparent);
  animation: sweep 1.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes sweep { to { transform: translateX(100%); } }

/* On paper the sweep has to be darker than the page, not lighter. */
.paper .skeleton { background: rgba(46,35,23,.07); }
.paper .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(46,35,23,.06) 55%, transparent);
}
.skeleton.line { height: .72em; border-radius: 4px; margin: .42em 0; }
.skeleton.line.short { width: 62%; }
.skeleton.line.mid { width: 84%; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }

  /* Except inside the book.
   *
   * The page-turn library animates with transitions and waits for them to end.
   * Clamped to nothing it starts a turn, never sees it finish, and sits in
   * "flipping" for ever — the book freezes on page one and nothing works. A
   * blunt `*` rule reached inside somebody else's component and broke it, which
   * is what blunt rules do. Found by testing in a browser that had the
   * preference switched on, which is the only way it would ever have been. */
  #book, #book * {
    animation-duration: revert !important;
    transition-duration: revert !important;
  }

  /* And the sweep keeps going: a skeleton frozen mid-shimmer is a grey box that
     never resolves, which is worse than no skeleton. Slowed, not stopped. */
  .skeleton::after { animation-duration: 3s !important; }
}