/* ============================================================================
   juribooks-brand-v2.css — the JuriBooks brand face: "Emerald & Brass".

   A distinctive identity for a Nigerian legal-practice accounting product:
   deep emerald authority, brass/gold prestige, warm ivory "paper", and a
   geometric-grotesk display voice. It rebrands the WHOLE app by redefining the
   shared design tokens (so rail, buttons, headings, accents, states all follow),
   then adds a display wordmark, a branded sign-in surface, and themed browser
   chrome. Presentation only — no engine, calculation or markup logic changes.

   Loaded LAST so it wins the cascade over the inline defaults and the skins.
   ========================================================================== */

/* ---- typography voice ---- */
:root{ --fdisplay:'Space Grotesk','Sora',var(--fsans, system-ui, sans-serif); }

/* ============================ PALETTE ============================ */
/* LIGHT — emerald on warm ivory, brass as the single prestige accent.
   Set on :root AND body[data-ui=*] so it beats the "clean"/"classic" layers. */
:root,
body[data-ui="clean"],
body[data-ui="classic"]{
  --paper:#F3EEE3;            /* app canvas — warm ivory */
  --surface:#FCFAF4;          /* cards */
  --surface-2:#EFE9DB;        /* sunken / header fills */
  --line:#E5DFCD;             /* warm hairline */
  --line-2:#DED7C2;
  --line-strong:#CBC2A7;
  --ink:#18261F;              /* deep warm green-black */
  --ink-soft:#33443B;
  --mute:#6E6A5A;
  --mute-2:#8C8877;
  --navy:#0B4D3A;             /* PRIMARY — emerald (rail, buttons, active, headings) */
  --navy-700:#063526;
  --navy-300:#4C8A74;
  --fill-navy:#0B4D3A;
  --accent:#C79A3E;           /* brass — prestige accent only */
  --on-navy:#FFFFFF;
  --balanced:#1E7A52;         /* success — a brighter green, distinct from brand */
  --credit:#B23A2E;           /* debit/negative red */
  --flag:#B07E24;             /* warning — brass-amber */
  --ring:0 0 0 2px var(--surface),0 0 0 4px rgba(11,77,58,.42);
  --shadow:0 1px 2px rgba(24,38,31,.05),0 10px 26px -12px rgba(24,38,31,.18);
}

/* DARK — emerald-charcoal surfaces, brighter emerald accent, warm brass. */
:root[data-theme="dark"],
[data-theme="dark"] body[data-ui="clean"],
[data-theme="dark"] body[data-ui="classic"]{
  --paper:#0C1512;
  --surface:#14201B;
  --surface-2:#1C2A24;
  --line:#2A3A32;
  --line-2:#334439;
  --line-strong:#3C4F44;
  --ink:#E9F1EC;
  --ink-soft:#C4D2CA;
  --mute:#9DB0A6;
  --mute-2:#7C8E84;
  --navy:#3FA981;            /* accent/heading emerald on dark */
  --navy-700:#2E7D5E;
  --navy-300:#6BC4A2;
  --fill-navy:#2E9B72;
  --accent:#DDB158;
  --on-navy:#0C1512;         /* dark ink reads on the brighter emerald button */
  --balanced:#47C08A;
  --credit:#E0776B;
  --flag:#D8B15C;
  --ring:0 0 0 3px rgba(63,169,129,.30);
  --shadow:0 2px 6px rgba(0,0,0,.5),0 14px 30px -14px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0C1512; --surface:#14201B; --surface-2:#1C2A24; --line:#2A3A32; --line-2:#334439; --line-strong:#3C4F44;
    --ink:#E9F1EC; --ink-soft:#C4D2CA; --mute:#9DB0A6; --mute-2:#7C8E84;
    --navy:#3FA981; --navy-700:#2E7D5E; --navy-300:#6BC4A2; --fill-navy:#2E9B72; --accent:#DDB158; --on-navy:#0C1512;
    --balanced:#47C08A; --credit:#E0776B; --flag:#D8B15C; --ring:0 0 0 3px rgba(63,169,129,.30);
  }
}

/* ---- bridge the premium-ui palette ----
   juribooks-premium-ui.css routes the whole app through its own --jb-* tokens
   (the old navy/orange identity), including `body{background:var(--jb-canvas)}`
   and the active-nav accent. Remap those bridge tokens onto the brand tokens so
   the canvas, focus rings, trust green and legacy chrome all follow Emerald &
   Brass. Using var() keeps them theme-aware in one place (they resolve to the
   dark brand values automatically). Selector includes :root so it beats
   premium-ui's own :root / [data-theme="dark"] blocks by source order. */
:root,
body[data-ui="clean"],
body[data-ui="classic"]{
  --jb-canvas:var(--paper);
  --jb-navy:var(--navy);
  --jb-navy-deep:var(--navy-700);
  --jb-navy-line:var(--line-strong);
  --jb-orange:var(--accent);
  --jb-orange-strong:var(--accent);
  --jb-orange-soft:var(--surface-2);
  --jb-green:var(--balanced);
  --jb-paleblue:var(--surface-2);
  --jb-accent:var(--accent);
  --jb-accent-ink:var(--on-navy);
  --jb-focus:var(--accent);
  --jb-trust:var(--balanced);
}

/* legibility: dark primary button uses dark ink on the brighter emerald */
[data-theme="dark"] .btn.primary, [data-theme="dark"] button.primary{ color:var(--on-navy) !important; }

/* ============================ DISPLAY VOICE ============================ */
/* App-chrome headings only. Report/statement titles (.stmt-title) are
   deliberately EXCLUDED — they follow the user-selectable report typography
   scope, so forcing the display font here would break that contract. */
.topbar h1, .exec-title, .drill-title,
#view-batch .sw-title .t, .exec-entity{
  font-family:var(--fdisplay) !important; letter-spacing:-.02em;
}
.exec-title{ font-weight:700 !important; }

/* ============================ WORDMARK ============================ */
/* The real, visible wordmark is `.jb-brandmark-txt` (a sibling of the hidden
   `.brand`), styled by juribooks-premium-ui.css. On the emerald rail the "clean"
   layer paints the name with --jb-navy (emerald) → emerald-on-emerald and the
   strapline orange. Force ivory name + brass strapline in BOTH themes (the rail
   is emerald in light and dark alike). !important + a heavier selector beats the
   premium layer's `[data-theme="dark"] body[data-ui="clean"]` rule. */
body[data-ui] .rail .jb-brandmark-txt b,
[data-theme="dark"] body[data-ui] .rail .jb-brandmark-txt b{
  color:#F7F3E9 !important;
  font-family:var(--fserif, Georgia, 'Times New Roman', serif) !important; /* serif wordmark = legal heritage against the grotesk UI */
}
body[data-ui] .rail .jb-brandmark-txt span,
[data-theme="dark"] body[data-ui] .rail .jb-brandmark-txt span{
  color:var(--accent) !important; /* brass strapline */
}
/* a brass keyline anchors the mark — the one signature detail */
.rail .jb-brandmark{ position:relative; }
.rail .jb-brandmark::after{
  content:""; position:absolute; left:0; bottom:-1px; height:2px; width:38px;
  background:linear-gradient(90deg,var(--accent),transparent); border-radius:2px;
}

/* ============================ SIGNATURE ACCENTS ============================ */
/* a hairline brass rule under statement titles gives the "letterhead" feel */
.view .stmt-sub{ border-bottom-color:var(--accent) !important; }
.view .eyebrow::after{ background:linear-gradient(90deg,var(--line),transparent) !important; }
/* brass on the topbar underline / active nav marker inherits via tokens */

/* ============================ BROWSER CHROME ============================ */
::selection{ background:rgba(11,77,58,.20); color:var(--ink); }
[data-theme="dark"] ::selection{ background:rgba(63,169,129,.32); color:#fff; }
input, textarea, select, [contenteditable]{ caret-color:var(--navy); }
* { scrollbar-color: color-mix(in oklch, var(--navy) 45%, transparent) transparent; }
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background:color-mix(in oklch, var(--navy) 42%, transparent); border-radius:8px; border:3px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:color-mix(in oklch, var(--navy) 62%, transparent); background-clip:padding-box; }
:focus-visible{ outline-color:var(--navy); }

/* ============================ SIGN-IN SURFACE ============================ */
#authOverlay{ background:radial-gradient(120% 120% at 20% 0%, #0E5A43 0%, #08301F 55%, #061B12 100%) !important; }
#authOverlay .card, #authOverlay .auth-card, #authOverlay [class*="panel"]{
  background:var(--surface) !important; border:1px solid var(--line) !important;
  border-radius:18px !important; box-shadow:0 30px 80px -30px rgba(0,0,0,.55) !important;
}
#authOverlay h1, #authOverlay h2, #authOverlay .auth-title{
  font-family:var(--fdisplay) !important; letter-spacing:-.02em; color:var(--ink) !important;
}
#authOverlay .btn.primary, #authOverlay button[type="submit"]{
  background:var(--navy) !important; border-color:var(--navy) !important; color:#fff !important;
}
#authOverlay input{ border:1px solid var(--line) !important; border-radius:10px !important; }
#authOverlay input:focus{ border-color:var(--navy) !important; box-shadow:0 0 0 3px rgba(11,77,58,.18) !important; }
/* a thin brass rule as the sign-in signature */
#authOverlay .card::before, #authOverlay .auth-card::before{
  content:""; display:block; height:3px; width:44px; margin:0 0 16px;
  background:linear-gradient(90deg,var(--accent),transparent); border-radius:2px;
}

/* ============================ MOTION (one authored moment) ============================ */
@keyframes jbRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference){
  /* App-shell motion is calmed by juribooks-sections-v2.css: per-card entrance
     storms are replaced with a single container reveal on view switch (a
     daily-use tool should not replay 24 card animations every settings visit).
     Keep the authored moments here: the executive dashboard and the journal
     window, which are entered deliberately and less often. */
  .exec-kpi, .exec-panel, .jrnwin{ animation:jbRise .32s cubic-bezier(.16,1,.3,1) both; }
}