/* ============================================================================
   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);

  /* ── 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:.8rem; 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:.72rem; 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:.8rem; 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:.72rem; 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}
}