/* The three looks a family can choose between (decision 73).
 *
 * Sticker quest is the default and lives in app.css's bare `:root`, so the
 * app is correct before this file or any JavaScript has run. The inline
 * script in index.html stamps `data-look` on <html> before first paint, so
 * all three are selected the same way and nobody sees one look swapped for
 * another a moment after loading.
 *
 * EVERY look redefines EVERY token, in both themes, and that is not
 * belt-and-braces — it is required. `:root[data-look="x"]` is more specific
 * than the `:root` inside app.css's dark-mode query, so a token a look only
 * sets in its light block would keep that light value on a dark phone and
 * paint, say, ink text on an ink ground. The blocks below are therefore
 * symmetric on purpose: same token list, twice, per look.
 *
 * Dark is not an inversion. A gallery is dark to begin with and its dark
 * theme goes darker still; a sketchbook is paper, and paper at night is
 * graphite rather than a photographic negative of itself.
 */

/* --- A. Sketchbook ------------------------------------------------------
 * The studio's own pencil-on-grey, straight off the app icon: #ECEDEF is the
 * measured background of the artwork Veni supplied. Quiet, adult-legible,
 * and the closest of the three to the paper the children actually work on.
 */
:root[data-look="sketchbook"] {
  --ink: #23262b;
  --muted: #5b6270;
  --line: #d3d7de;
  --bg: #ecedef;
  --accent: #b24a22;
  --error: #a3271c;

  --tint-work: #e8ebf2;
  --tint-made: #e6e6ef;
  --tint-who:  #efe9e2;
  --tint-news: #e4ebf2;
  --tint-good: #e2ecE6;
  --tint-calm: #e6e8eb;
  --ico-work: #46536b;
  --ico-made: #585579;
  --ico-who:  #8a6240;
  --ico-news: #3f5c77;
  --ico-good: #3c6b50;
  --ico-calm: #5b6270;

  --paper-sunk: #e3e5e9;
  --radius: .7rem;
  --radius-sm: .5rem;

  --font-display: "Patrick Hand", "Bradley Hand", "Segoe Print", cursive;
  --font-body: Nunito, "Avenir Next", system-ui, -apple-system, sans-serif;
}

/* --- B. Gallery wall ----------------------------------------------------
 * The child's drawing is the only saturated thing on screen. Light mode is a
 * plaster wall rather than a white page, so the look survives a reader who
 * has never changed a system setting; dark mode is the ink room it was
 * drawn as.
 */
:root[data-look="gallery"] {
  --ink: #221f1a;
  --muted: #6b6459;
  --line: #ddd6c9;
  --bg: #f3efe7;
  --accent: #8a6a12;
  --error: #9d2f22;

  --tint-work: #ece3cd;
  --tint-made: #e4e2da;
  --tint-who:  #eae1d4;
  --tint-news: #dee3e4;
  --tint-good: #dde5da;
  --tint-calm: #e8e5de;
  --ico-work: #8a6a12;
  --ico-made: #4f4a5e;
  --ico-who:  #7a5230;
  --ico-news: #3c5560;
  --ico-good: #3a5c45;
  --ico-calm: #595348;

  --paper-sunk: #eae5da;
  --radius: .25rem;        /* frames have corners, not curves */
  --radius-sm: .25rem;

  --font-display: Fraunces, Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root[data-look="sketchbook"] {
    --ink: #e7e8ea;
    --muted: #a0a6b0;
    --line: #353a42;
    --bg: #1b1d21;
    --accent: #e8905f;
    --error: #ef8b7d;

    --tint-work: #262b33;
    --tint-made: #2a2832;
    --tint-who:  #322a24;
    --tint-news: #232c34;
    --tint-good: #23302a;
    --tint-calm: #26282c;
    --ico-work: #9fb0cc;
    --ico-made: #aaa5c8;
    --ico-who:  #d3a071;
    --ico-news: #8fb0c9;
    --ico-good: #7fb795;
    --ico-calm: #a0a6b0;

    --paper-sunk: #23262b;
  }

  :root[data-look="gallery"] {
    --ink: #f2efe9;
    --muted: #a8a295;
    --line: #2a3341;
    --bg: #141a24;
    --accent: #e8c977;
    --error: #ff9c92;

    --tint-work: #2e2a1c;
    --tint-made: #232534;
    --tint-who:  #2d2519;
    --tint-news: #1b2733;
    --tint-good: #1a2c23;
    --tint-calm: #1d2531;
    --ico-work: #e8c977;
    --ico-made: #b1aecd;
    --ico-who:  #d0a471;
    --ico-news: #8fb3c9;
    --ico-good: #78b895;
    --ico-calm: #aab2bd;

    --paper-sunk: #1d2531;
  }
}

/* --- the picker ---------------------------------------------------------
 * Each option is drawn in the look it offers, because a row of radio buttons
 * labelled "Sketchbook / Gallery wall / Sticker quest" asks a parent to
 * imagine three things they have never seen.
 */
.looks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .75rem;
  margin: .5rem 0 1.5rem;
  padding: 0;
  border: 0;
}
.looks legend { padding: 0; }

.look {
  position: relative;
  display: block;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: .75rem;
  cursor: pointer;
  /* Each swatch paints itself, so these are literals rather than tokens —
     the whole point is to show a look you are NOT currently in. */
  overflow: hidden;
}
.look:has(input:checked) { border-color: var(--accent); }
.look:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The radio itself stays in the page for keyboard and screen readers; the
   swatch is the visible control. Never display:none — that takes it out of
   the tab order and out of the accessibility tree. */
.look input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  opacity: 0;
}

.look .look-sample {
  display: block;
  border-radius: calc(var(--radius) - .35rem);
  padding: .6rem .7rem;
  margin-bottom: .5rem;
}
.look .look-sample b { display: block; font-size: 1.05rem; line-height: 1.2; }
.look .look-sample i { display: block; font-size: .8rem; font-style: normal; margin-top: .1rem; }
.look .look-dots { display: flex; gap: .25rem; margin-top: .45rem; }
.look .look-dots span { width: .7rem; height: .7rem; border-radius: 999px; }

.look .look-name { font-weight: 700; font-size: .95rem; }
.look .look-says { display: block; color: var(--muted); font-size: .8rem; margin-top: .1rem; }

/* The three swatches, each in its own palette and typeface. */
.look[data-for="sketchbook"] .look-sample {
  background: #ecedef; color: #23262b;
  font-family: "Patrick Hand", cursive;
}
.look[data-for="sketchbook"] .look-sample i { font-family: Nunito, sans-serif; color: #5b6270; }
.look[data-for="sketchbook"] .look-dots span:nth-child(1) { background: #46536b; }
.look[data-for="sketchbook"] .look-dots span:nth-child(2) { background: #b24a22; }
.look[data-for="sketchbook"] .look-dots span:nth-child(3) { background: #ffffff; }

.look[data-for="gallery"] .look-sample {
  background: #141a24; color: #f2efe9;
  font-family: Fraunces, Georgia, serif;
}
.look[data-for="gallery"] .look-sample i { font-family: "Work Sans", sans-serif; color: #a8a295; }
.look[data-for="gallery"] .look-dots span:nth-child(1) { background: #e8c977; }
.look[data-for="gallery"] .look-dots span:nth-child(2) { background: #f7f5f0; }
.look[data-for="gallery"] .look-dots span:nth-child(3) { background: #3c5560; }

.look[data-for="quest"] .look-sample {
  background: #fff4f8; color: #b02a62;
  font-family: "Baloo 2", cursive;
}
.look[data-for="quest"] .look-sample i { font-family: Quicksand, sans-serif; color: #6b7280; }
.look[data-for="quest"] .look-dots span:nth-child(1) { background: #c9306a; }
.look[data-for="quest"] .look-dots span:nth-child(2) { background: #d8f3e6; }
.look[data-for="quest"] .look-dots span:nth-child(3) { background: #d6e9ff; }