/* ═══════════════════════════════════════════════════════════════════
   library_theme.css — one look for Reading Log, Quotes and Reviews
   (2026-11-03). Loaded LAST in <head>, after each page's own <style>,
   so these tokens win. Values follow library.css; where pages had
   drifted, the reasoning below decides.

   COLOUR — "gilded night library"
   • Neutrals are one cool ink hue (~240°): surfaces step up in
     lightness for depth instead of drawing lines everywhere.
   • One warm accent, gilt gold (~42°), the complement of the ink —
     a little gold reads as lamplight / a gilded spine, so it is kept
     for interaction, ratings and the few things that should glow.
   • Text has three tiers on the same hue, chosen by ROLE:
       --text   #e4e4f0  titles, quotes, numbers   13.5:1 on --card
       --text2  #c2c2d8  long reading prose         9.6:1 — softer than
                          near-white, which halates on dark for long reads
       --muted  #9090b4  metadata, labels          5.5:1 (WCAG AA)
   • Status colours are the library.css set; their light tints are
     only for text on their own tinted chips.
   • Ambient: the same faint gilt glow from the top-right on every
     page — a reading lamp over the desk.

   TYPE
   • English UI + reading: Inter. Titles/numerals: Playfair Display.
     Arabic everywhere: IBM Plex Sans Arabic (listed first in each
     stack; its unicode-range is Arabic-only, so Latin falls through).
   • One scale, px: 11 · 12 · 13 · 14 · 15 · 16 · 17 · 18 · 20 · 22 ·
     24 · 28 · 32 · 40 · 48 · 54.  Floor 11 (badges included).
     Reading text: English 16 / 1.75, Arabic 17 / 1.85.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  /* surfaces, darkest → lightest */
  --bg:#0c0c14; --surface:#13131f; --card:#1a1a2e; --card2:#1e1e32;
  --border:#252540; --border2:#2f2f52; --line:rgba(255,255,255,.06);
  --glass:rgba(26,26,46,.72);
  /* text tiers */
  --text:#e4e4f0; --text2:#c2c2d8; --muted:#9090b4;
  /* gilt accent */
  --gold:#c8961e;                 /* text-safe accent, 6.4:1 on --card */
  --gold2:#e3b54b;                /* highlight gold: large display text, hover */
  --gold-d:#a07816;               /* deep gold: gradient end, pressed */
  --gold-dim:rgba(200,150,30,.4); /* borders / rules */
  --gold-gl:rgba(200,150,30,.12); /* fills */
  --gold-glow:rgba(200,150,30,.18);
  --on-gold:#17120a;              /* text on gold buttons, 8.9:1 */
  /* status (+ aliases the pages use) */
  --success:#22c77a; --green:#22c77a;
  --danger:#e05252;  --rose:#e05252;
  --warn:#f0a830;    --amber:#f0a830;
  --info:#38bdf8;    --blue:#38bdf8;
  --purple:#a78bfa;  --violet:#a78bfa;
  /* tints — text on a chip of its own status colour */
  --success-t:#86efac; --danger-t:#f2a5a5; --warn-t:#f3cf94; --info-t:#bae6fd; --purple-t:#c4b5fd;
  /* shape */
  --radius:14px; --r:14px;
  /* type */
  --font:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;
  --font-display:'IBM Plex Sans Arabic','Playfair Display',Georgia,serif;
  --ar:'IBM Plex Sans Arabic';
}

/* the same lamp-light on every page (quotes' embed mode keeps its own transparent body) */
html{background:var(--bg)}
body:not(.ql-embed){
  background:radial-gradient(1200px 600px at 85% -10%, rgba(200,150,30,.08), transparent 60%), var(--bg);
  background-attachment:fixed;
  color:var(--text); font-family:var(--font);
}

/* page titles — Quotes and Reviews match (Reading Log keeps its hero headline) */
.page-header h1, .brand h1{
  font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:.2px; line-height:1.2; color:var(--text);
}

/* English quote text: Inter like every other reading surface (was Lora) */
.quote-card:not(.rtl) .quote-text{font-family:var(--font); font-size:16px; line-height:1.75; color:var(--text)}

/* form controls inherit the page type (browsers default buttons to Arial 13.33px) */
button, input, select, textarea{font-family:inherit}

/* Reviews "Load more" had no style of its own (browser default black text) */
.loadmore{display:block;margin:20px auto 8px;padding:10px 24px;border-radius:10px;border:1px solid var(--border2);
  background:var(--card);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s}
.loadmore:hover,.loadmore:focus-visible{border-color:var(--gold-dim);color:var(--gold)}