/* Unboxed design tokens: the "Sunlit attic" palette and type.
   Change a colour here and it changes everywhere.

   Dark mode follows the system setting and nothing else. There is no toggle,
   no stored preference and no script. The dark block below redefines the same
   tokens, so a component needs no dark rule of its own.

   The names keep their roles, and they read oddly in dark mode: "--paper" is
   the page background and is dark gray, "--white" is the card surface and is
   a lighter gray, "--ink" is the main text and is cream, "--line" is the border.

   The second selector list is the printed things: the scraps, the picture
   book, the book pages, the slides, the quote cards and the drawn photos. Each one imitates a page, a slide or a photo and
   holds a drawing with its own light background. They keep the light palette
   in dark mode, so each reads as a picture. To make
   a new printed thing, add its class to that list and nowhere else. */
:root,
.scrap, .box-card, .spread, .print-page, .slide, .quote-card, .book-spread, .photo {
  --paper: #FBF6EC;
  --ink: #1F2A44;
  --marigold: #F2A93B;
  --marigold-hover: #E89A22;
  --marigold-tint: #FBEFD9;
  --sage: #8FA98F;
  --sage-dark: #4E6B50;
  --sage-tint: #EEF2EC;
  --ink-soft: #3A4A6E;
  --muted: #5C6680;
  --line: #E8DFCC;
  --warn: #B9761B;
  --warn-text: #8A560F;
  --white: #FFFFFF;

  /* Text and icons on marigold. The same in both modes, because the brand
     rule is ink on marigold and "--ink" turns light in dark mode. */
  --on-marigold: #1F2A44;

  /* An ink panel: a band, a banner or a bubble that is larger than a pill.
     In light mode it is ink with paper text. In dark mode a cream band is too
     bright, so it is a raised gray with light text. Pills, chips and tooltips
     do not use these. They use "--ink" with "--paper" and invert. */
  --panel: #1F2A44;
  --on-panel: #FBF6EC;
  --on-panel-soft: #E8DFCC;
  --panel-edge: #3A4A6E;

  --error-text: #A23B2A;
  --live: #C2412D;
  --switch-off: #E8DFCC;
  --scrim: rgba(31, 42, 68, 0.55);
}

:root {
  color-scheme: light dark;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 16px;
  --radius-sm: 10px;
  --pill: 999px;
  --maxw: 1120px;
  --gutter: 24px;
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  /* A cool dark gray, not navy. No surface, border or neutral text has a blue
     cast. The app in the unboxed repo uses the same values. */
  :root {
    --paper: #17191C;
    --ink: #F4F1EA;
    --marigold-hover: #F6B85A;
    --marigold-tint: #3A2F1A;
    --sage-dark: #A9C4A9;
    --sage-tint: #1F2923;
    --ink-soft: #D3D5D9;
    --muted: #A1A6AE;
    --line: #33373D;
    --warn: #D9973A;
    --warn-text: #F0C27A;
    --white: #202327;

    --panel: #2A2E33;
    --on-panel: #F4F1EA;
    --on-panel-soft: #D3D5D9;
    --panel-edge: #3D4249;

    --error-text: #F0907C;
    --live: #E0553F;
    --switch-off: #4A4F57;
    --scrim: rgba(0, 0, 0, 0.6);
  }
}

@media (max-width: 600px) {
  :root { --gutter: 16px; }
}