/* ============================================================================
   Junifye — shared UI design system (ONE source of truth)
   A "fine press" surface: deep ink ground, warm gold accent, serif display.
   Every page links this first, then adds only page-specific rules. Do not fork
   the palette here into a template — change tokens HERE and the whole site
   follows. Served immutable at /_ui.css?v=<hash>.
   ========================================================================= */

/* ── Self-hosted core faces (the same woff2 served from /_fonts). Templates may
      re-declare these for the exotic scripts; the browser dedupes by URL. ── */
@font-face{font-family:"Crimson Pro";font-style:normal;font-weight:400;font-display:swap;src:url(/_fonts/CrimsonPro-Regular.woff2) format("woff2")}
@font-face{font-family:"Crimson Pro";font-style:italic;font-weight:400;font-display:swap;src:url(/_fonts/CrimsonPro-Italic.woff2) format("woff2")}
@font-face{font-family:"Crimson Pro";font-style:normal;font-weight:600;font-display:swap;src:url(/_fonts/CrimsonPro-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Crimson Pro";font-style:normal;font-weight:700;font-display:swap;src:url(/_fonts/CrimsonPro-Bold.woff2) format("woff2")}
@font-face{font-family:"Crimson Pro";font-style:italic;font-weight:700;font-display:swap;src:url(/_fonts/CrimsonPro-BoldItalic.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/_fonts/CormorantGaramond-Medium.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(/_fonts/CormorantGaramond-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:700;font-display:swap;src:url(/_fonts/CormorantGaramond-Bold.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url(/_fonts/CormorantGaramond-SemiBoldItalic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/_fonts/Inter-Regular.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(/_fonts/Inter-Medium.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/_fonts/Inter-SemiBold.woff2) format("woff2")}

:root{
  /* ── Ground & surfaces ── */
  --bg:#101216; --bg-2:#15181e; --panel:#1b1f27; --panel-2:#222732;
  --glass:rgba(23,27,35,.72);
  --line:#2b313c; --line-2:#363d4a; --edge:var(--gold);

  /* ── Ink ── */
  --text:#f1ece3; --muted:#9aa2b1; --faint:#6b7384;
  --link:#9ec1ff;

  /* ── Warm gold accent — the one brand colour. --accent is an alias of --gold
        so older rules that reach for --accent all land on gold. ── */
  --gold:#cfa978; --gold-2:#e7c9a0; --gold-3:#f3e3c4; --gold-deep:#a07d4e;
  --accent:#cfa978; --accent-2:#e7c9a0; --accent-3:#f3e3c4;
  --accent-soft:rgba(207,169,120,.16); --accent-line:rgba(207,169,120,.5);
  --deep:#a07d4e;

  /* ── Secondary identity: Darash (Bible source) reads in a calm scholarly
        blue, kept distinct from the gold so provenance is legible. ── */
  --darash:#8fb7e0; --junifye:var(--gold);

  /* ── Semantic status ── */
  --ok:#9be3b4; --warn:#f0c674; --danger:#f2a9a9; --bad:var(--danger);

  /* ── Book-status chips ── */
  --pub:#9be3b4;  --pub-bg:#16341f;
  --perm:#f0d9a6; --perm-bg:rgba(207,169,120,.16);
  --froz:#9cc2ec; --froz-bg:rgba(110,140,210,.14);
  --unl:#c9b48f;  --unl-bg:rgba(207,169,120,.14);

  /* ── Elevation ── */
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.7);
  --book-shadow:0 1px 1px rgba(0,0,0,.55), 0 16px 30px -14px rgba(0,0,0,.8);
  --book-shadow-hi:0 2px 4px rgba(0,0,0,.5), 0 34px 60px -18px rgba(0,0,0,.92);

  /* ── THE NEWSLETTER BOX (nor/anews) ──────────────────────────────────────
     anews ships theme-NEUTRAL: every colour in it routes through an --anews-*
     custom property with an inherit/currentColor fallback, so the box takes
     the host page's palette. These are that palette, written in terms of the
     tokens above so a change up there carries down here.

     JUNIFYE HAS ONE THEME. This file declares no light palette and no
     prefers-color-scheme block — every page is served data-theme="dark" on the
     deep ink ground — so there is one set of values here and no second copy to
     drift from it.

     THE ONE PAIR THE LIBRARY CANNOT GET RIGHT ALONE is the submit button: it
     defaults to #fff on --anews-accent, and our accent is the PALE warm gold
     #cfa978, where white is unreadable. So the label is the ink ground
     (--bg #101216) on gold, which measures 8.93:1 by the WCAG 2.x formula —
     far past AA for normal text. --anews-check-fg is the same pair on the same
     fill (the tick inside a checked pill sits on the accent) and defaults to
     #fff too, so it takes the same correction or the tick disappears.
     internal/web/news_test.go re-derives both ratios, so a future palette
     change cannot quietly drop one below 4.5. */
  --anews-fg:var(--text);
  --anews-heading-fg:var(--text);
  --anews-accent:var(--gold);
  --anews-border:var(--line);
  --anews-input-bg:var(--panel);
  --anews-submit-bg:var(--gold);
  --anews-submit-fg:var(--bg);
  --anews-check-fg:var(--bg);
  /* The accent wash this site already uses for a selected/active surface. */
  --anews-pill-checked-bg:var(--accent-soft);
  --anews-pill-hover-bg:rgba(207,169,120,.08);
  --anews-radius:var(--r-sm);
  --anews-max:820px;

  /* ── Radius & spacing scale ── */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px;
  --sp-1:.35rem; --sp-2:.6rem; --sp-3:1rem; --sp-4:1.5rem; --sp-5:2.25rem; --sp-6:3.5rem;

  /* ── Type ── */
  --scripts:"Noto Serif","Ezra SIL","Amiri","Vazirmatn","GFS Didot","Noto Serif Devanagari","Noto Serif Bengali","Noto Serif Tamil","Noto Serif Telugu","Noto Serif Kannada","Noto Serif Malayalam","Noto Serif Gujarati","Noto Sans Gurmukhi","Noto Serif Thai","Noto Serif Ethiopic","Noto Serif SC","Noto Serif TC","Noto Serif JP","Noto Serif KR";
  --ui:"Inter",var(--scripts),system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --serif:"Crimson Pro",var(--scripts),Georgia,"Times New Roman",serif;
  --display:"Cormorant Garamond",var(--scripts),Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,"DejaVu Sans Mono",Consolas,monospace;

  --focus:0 0 0 2px var(--bg), 0 0 0 4px var(--gold);
}

/* ── Base ── */
*{box-sizing:border-box}
html{font-size:18px;scroll-behavior:smooth}
body{
  margin:0; color:var(--text); font-family:var(--serif); overflow-x:hidden;
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(207,169,120,.11), transparent 60%),
    radial-gradient(900px 480px at 95% 0%, rgba(110,140,210,.07), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:rgba(207,169,120,.3); color:#fff}
.wrap{max-width:1260px; margin:0 auto; padding:0 1.25rem 5rem}

/* Per-language refinements for the most common non-Latin scripts (match the
   reader/PDF): the fallback chain prevents tofu, these pick the nicest face. */
:lang(he){font-family:"Ezra SIL",var(--serif)}
:lang(ar),:lang(ur){font-family:"Amiri",var(--serif)}
:lang(fa){font-family:"Vazirmatn","Amiri",var(--serif)}
:lang(el){font-family:"GFS Didot",var(--serif)}

/* Visible keyboard focus everywhere — never removed, only restyled. */
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:var(--r-sm)}

/* ============================================================================
   Primitives — the shared vocabulary. Templates use these directly or extend
   them; a page should rarely need to restyle a button or card from scratch.
   ========================================================================= */

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--ui); font-size:.9rem; font-weight:600; line-height:1;
  padding:.62em 1.1em; border-radius:var(--r-sm); border:1px solid var(--line-2);
  background:var(--panel-2); color:var(--text); cursor:pointer;
  text-decoration:none; white-space:nowrap; transition:border-color .15s, background .15s, transform .05s, color .15s;
}
.btn:hover{border-color:var(--gold); background:#272d38; text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; transform:none}
.btn-primary{
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  border-color:var(--gold-deep); color:#241a0c; font-weight:700;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 8px 20px -10px rgba(207,169,120,.6);
}
.btn-primary:hover{background:linear-gradient(180deg,var(--gold-3),var(--gold-2)); border-color:var(--gold); color:#241a0c}
.btn-ghost{background:transparent; border-color:var(--line)}
.btn-ghost:hover{background:var(--accent-soft); border-color:var(--gold)}
.btn-danger:hover{border-color:var(--danger); background:rgba(242,169,169,.12); color:var(--danger)}
.btn-sm{font-size:0.9375rem; padding:.45em .8em}

/* ── Card / panel ── */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--sp-4); box-shadow:var(--shadow);
}
.card-hd{font-family:var(--display); font-weight:600; font-size:1.5rem; letter-spacing:.2px; margin:0 0 .2em}

/* ── Chip / pill ── */
.chip{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--ui); font-size:0.8125rem; font-weight:600; letter-spacing:.03em;
  padding:.28em .7em; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--panel-2); color:var(--muted);
  text-transform:uppercase; white-space:nowrap;
}
.chip-gold{color:var(--perm); background:var(--perm-bg); border-color:rgba(207,169,120,.4)}
.chip-ok{color:var(--pub); background:var(--pub-bg); border-color:rgba(155,227,180,.35)}
.chip-froz{color:var(--froz); background:var(--froz-bg); border-color:rgba(110,140,210,.4)}
.chip-unl{color:var(--unl); background:var(--unl-bg); border-color:rgba(207,169,120,.35)}

/* ── Fields ── */
.field{display:block; margin:0 0 var(--sp-3)}
.field > label,.label{display:block; font-family:var(--ui); font-size:.78rem; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0 0 .4em}
.input,input[type=text],input[type=email],input[type=search],input[type=url],input[type=number],select,textarea{
  width:100%; font-family:var(--ui); font-size:.95rem; color:var(--text);
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:.6em .8em; transition:border-color .15s, box-shadow .15s;
}
.input:focus,input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--accent-soft)}
.input::placeholder,input::placeholder,textarea::placeholder{color:var(--faint)}
.hint{font-family:var(--ui); font-size:0.9375rem; color:var(--faint); margin:.35em 0 0}

/* ── Flash / notice — one visual language for every transient message ── */
.flash,.notice{
  font-family:var(--ui); font-size:.9rem; line-height:1.5;
  padding:.75em 1em; border-radius:var(--r-sm);
  border:1px solid var(--line-2); border-left:3px solid var(--gold);
  background:var(--accent-soft); color:var(--text); margin:0 0 var(--sp-3);
}
.flash-ok,.notice-ok{border-left-color:var(--ok); background:rgba(155,227,180,.1)}
.flash-warn,.notice-warn{border-left-color:var(--warn); background:rgba(240,198,116,.1)}
.flash-danger,.flash-error,.notice-danger{border-left-color:var(--danger); background:rgba(242,169,169,.1)}

/* ── Empty state — a calm, centred literary placeholder ── */
.empty{
  text-align:center; padding:var(--sp-6) var(--sp-4); color:var(--muted);
  border:1px dashed var(--line-2); border-radius:var(--r-lg); background:rgba(0,0,0,.14);
}
.empty h2,.empty .empty-hd{font-family:var(--display); font-weight:600; color:var(--text); font-size:1.5rem; margin:0 0 .3em}
.empty p{margin:.3em auto; max-width:44ch}

/* ── Section label — the small gold eyebrow used above headings ── */
.eyebrow{font-family:var(--ui); font-size:0.8125rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin:0 0 .5em}

/* Reduced motion honoured globally. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}