/* =============================================================================
   tokens.css — the single source of truth for the Leafle palette, geometry and
   type. Imported by every surface (the shelf app via @import in shelf.css; the
   gift and portrait pages via <link>). Canonical values are the shelf app's; no
   surface should declare its own palette, radius or font stack.
   Lifted verbatim from shelf.css :root, plus the few low-level roles the gift and
   portrait pages also need (--faint, --hair, --chip, --blank).
   ============================================================================= */
:root {
  /* --- Surfaces & ink --- */
  --bg:           #f6f4ee;     /* page */
  --surface:      #ffffff;     /* cards, bubbles, modals */
  --header-bg:    #fbfaf6;     /* light header */
  --ink:          #1a1714;     /* primary text */
  --muted:        #6b6356;     /* secondary text */
  --faint:        #a59c8d;     /* low-emphasis text (portrait) */
  --border:       #e6e0d3;     /* borders, dividers */
  --hair:         #ece7da;     /* finer hairline divider (in-app portrait) */
  --chip:         #f1ebdd;     /* chip / tag fill (gift) */
  --blank:        #efe8d8;     /* placeholder / empty fill (gift, portrait) */

  /* --- Accent --- */
  --accent:       oklch(0.515 0.082 233);  /* blue (oklch — see the semantic note below) */
  --accent-ink:   #ffffff;

  /* --- Chat bubble --- */
  --user-bubble:  #1f1b15;
  --user-text:    #f6f4ee;

  /* --- Semantic / availability --- */
  /* Authored in oklch on a shared rhythm: each colour keeps its hue + chroma across
     light/dark, so dark mode is a lightness shift, not a per-colour re-pick. (Values are
     within a hair of the previous hex, so the change is essentially imperceptible.) */
  --avail:        oklch(0.56 0.11 158);    /* on the shelf — green */
  --loan:         oklch(0.62 0.1 64);      /* on loan — amber */
  --gone:         oklch(0.696 0.022 81);   /* unavailable (recedes: darker in dark mode) */
  --owned:        oklch(0.552 0.08 82);    /* owned, not read — a shelf photo / Tsundoku */
  --danger:       oklch(0.456 0.11 33);    /* destructive actions, errors */
  --danger-ink:   #ffffff;                 /* ink on a --danger fill (swipe-to-revoke) */

  /* --- Geometry & type --- */
  --radius:       16px;  /* legacy alias — prefer --r-card */
  /* Radius scale */
  --r-cover:      4px;   /* cover art, book thumbnails, spines */
  --r-control:    8px;   /* inputs, selects, buttons */
  --r-chip:       12px;  /* chips, tags-with-text, dropdown menus */
  --r-card:       16px;  /* cards, modals, sheets, bubbles, panels */
  --r-pill:       999px; /* fully-round pills, status dots, tags */
  --gap:          12px;
  --pad:          18px;
  --font-body:    "Newsreader", Georgia, serif;
  --font-display: "Newsreader", Georgia, serif;
  --font-ui:      "Space Grotesk", system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light dark;
}

/* System dark mode: the same warm-paper feel, darkened. Everything else is
   variable-driven, so the palette swap is the whole theme. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #17150f;
    --surface:      #211e17;
    --header-bg:    #1c1913;
    --ink:          #ece7db;
    --muted:        #a59c8b;
    --faint:        #6f675a;
    --border:       #3a352a;
    --hair:         #2e2920;
    --chip:         #2e2920;
    --blank:        #2e2920;
    --accent:       oklch(0.665 0.082 233);
    --accent-ink:   #0e1c24;
    --user-bubble:  #e8e2d4;
    --user-text:    #1f1b15;
    --avail:        oklch(0.7 0.11 158);
    --loan:         oklch(0.74 0.1 64);
    --gone:         oklch(0.517 0.022 81);
    --owned:        oklch(0.73 0.08 82);
    --danger:       oklch(0.71 0.10 34);
    --danger-ink:   #2a1109;
  }
}