/* Super Corban design tokens. Task SC-04, spec Part II section 5.1.
 *
 * The single place any colour, size or font is decided. Nothing anywhere
 * else in the comic system hardcodes a value; if you find yourself typing
 * a hex code outside this file, add a token instead.
 *
 * Why that matters here: every story Corban generates renders through the
 * same components, so a value that only exists in one stylesheet becomes a
 * story that looks different from its neighbours. */

/* The faces themselves live in fonts.css, which every page links
 * alongside this one. Kept apart because the older pages want the
 * lettering without the comic system's tokens. */

:root {
  /* --- the universe palette ------------------------------------------ */
  --sc-blue:        #1565c0;
  --sc-blue-dark:   #0d3a70;
  --sc-red:         #d32f2f;
  --sc-yellow:      #f9a825;
  --sc-orange:      #ef6c00;
  --sc-teal:        #00838f;
  --sc-purple:      #6a1b9a;
  --sc-green:       #2e7d32;
  --sc-ink:         #0b0b0e;
  --sc-paper:       #fdf6e3;
  --sc-caption:     #fff3d6;

  /* The Dark Unicorn Legion gets its own locked palette. Never pink,
   * never rainbows, never sparkles: they are war-beasts, not ponies. */
  --legion-obsidian: #141418;
  --legion-void:     #4a148c;
  --legion-glow:     #6a1b9a;
  --legion-spark:    #b388ff;

  /* --- structure ------------------------------------------------------ */
  --panel-border:   3px solid var(--sc-ink);
  --gutter:         clamp(6px, 1.6vw, 12px);
  --radius-balloon: 18px;
  --page-max:       820px;

  /* --- type -----------------------------------------------------------
   * The faces are declared above and committed to the repo, so these are
   * the real thing, not a hopeful first choice. The fallbacks after each
   * one still matter: they are what a child reads during the swap, and on
   * the rare device that refuses a webfont. */
  --font-display: 'Bangers', 'Comic Sans MS', Impact, system-ui, sans-serif;
  --font-balloon: 'Comic Neue', 'Comic Sans MS', system-ui, sans-serif;
  --font-ui:      'Nunito', system-ui, -apple-system, sans-serif;

  /* 17px is the floor for a seven-year-old reading on a phone. Do not
   * lower it to fit more words on a page; fewer words is the right fix. */
  --text-page:  clamp(17px, 2.6vw, 22px);
  --text-small: clamp(14px, 2vw, 16px);
  --line-page:  1.6;

  /* --- read-along ----------------------------------------------------- */
  --highlight:      #ffe14d;
  --highlight-glow: 0 0 0 4px rgba(255, 225, 77, .55);

  /* Every tappable thing is at least this big. A seven-year-old's finger
   * on a moving car seat is the design target. */
  --tap-target-min: 48px;
}

/* The reader is a paper comic and stays light in both themes: a comic page
 * that inverts to dark is not a comic page any more. The chrome around it
 * follows the viewer's preference. */
:root {
  --ui-bg:     #eef1f6;
  --ui-fg:     #14181f;
  --ui-muted:  #5c6470;
  --ui-line:   #cdd4de;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-bg:    #12161d;
    --ui-fg:    #e8ecf3;
    --ui-muted: #98a2b3;
    --ui-line:  #2a323f;
  }
}

:root[data-theme="dark"] {
  --ui-bg:    #12161d;
  --ui-fg:    #e8ecf3;
  --ui-muted: #98a2b3;
  --ui-line:  #2a323f;
}