/* ==========================================================================
   theme.css — one palette for the whole product.

   The signed-out pages (homepage, series pages, the sign-in dialog) were built
   on a warm cream/navy/amber palette with Baloo as the display face. The
   signed-in app was still on its original cool blue-grey, so signing in felt
   like walking into a different building.

   This file is loaded AFTER app.css and only redefines app.css's own tokens —
   no layout, no components. Everything downstream (cards, chips, buttons,
   tables) picks up the new palette by inheritance, which is exactly why the
   app was built on tokens.

   Light only, as ever: dark ink on light plates is a house rule (MASTER M6.3).
   ========================================================================== */

:root {
  /* Surfaces: cream page, white cards, a warm tint for recessed panels. */
  --bg:        #fffdf7;
  --surface:   #ffffff;
  --surface-2: #fff8ea;

  /* Ink: navy rather than near-black slate — softer against cream. */
  --ink:   #14304f;
  --ink-2: #46617c;
  --ink-3: #8199b0;
  --line:  #e8e2d5;

  /* One accent, amber, doing the work blue used to do. `--brand` is what the
     app's primary buttons, active tabs and links resolve to, so remapping it
     is what re-themes the shell. */
  --brand:      #d97e06;
  --brand-dark: #b96703;
  --brand-soft: #fff4dd;
  --accent:     #f0a01e;
  --accent-soft:#fff4dd;

  /* Status colours keep their meanings — green is still done, red is still
     wrong — but warmed slightly so they sit on cream without vibrating. */
  --good: #2f8a5f;
  --warn: #c2762a;
  --bad:  #c0392b;

  --shadow-1: 0 1px 2px rgba(20, 48, 79, .05), 0 1px 3px rgba(20, 48, 79, .04);
  --shadow-2: 0 4px 12px rgba(20, 48, 79, .06), 0 2px 4px rgba(20, 48, 79, .04);
  --shadow-3: 0 14px 36px rgba(20, 48, 79, .12);

  /* Display face matches the homepage; Literata still carries body text, which
     is what it was commissioned for. */
  --font-display: "Baloo 2", "Fraunces", var(--font);
  --font-ui: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The topbar and tab bar are the two pieces a reader sees on every screen, so
   they are what makes the two halves read as one product. */
.topbar { background: rgba(255, 253, 247, .93); border-bottom-color: var(--line); }
.tabbar { background: rgba(255, 253, 247, .96); border-bottom-color: var(--line); }
.logo-text { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }

/* The app's search field sat on a cool grey; on cream it needs the warm one. */
.search input { background: var(--surface-2); border-color: var(--line); }