/* ============================================================================
   AMAADOR FINANCE — DESIGN 2.0 BRIDGE  ·  "matte-black re-skin"
   ---------------------------------------------------------------------------
   This file is the re-skin for AMAADOR FINANCE. It re-points the site's OWN
   design tokens (defined in assets/css/style.css :root AND in the homepage
   index.html inline <style> :root) to the shared Design 2.0 matte palette,
   with this site's signature accent = violet #9b6cff.

   WHY A BRIDGE: finance is NOT token-compatible with design2.css. Its accent
   tokens are --brand / --accent (not --acc), its surface token is --card
   (not --window), and the homepage is fully self-styled with a separate token
   vocabulary (--txt/--mut/--dim/--nav/--scene/--pat*). design2.css alone only
   catches the handful of shared names (--bg,--ink,--line,--muted); everything
   finance-specific is remapped below.

   LOAD ORDER (enforced by _inject_design2.js): site stylesheet → design2.css
   → THIS FILE. Same-specificity :root rules, so this wins. Nothing is renamed;
   only existing tokens are re-pointed. Fully reversible (delete the <link>).

   The injector forces data-theme="dark"; finance has no real light mode
   (style.css ships no light block), so the matte-black DARK state is the site.
   ============================================================================ */

/* ---- matte palette shorthands (kept local so this file is self-contained) --- */
:root{
  --d2-bg:#0a0a0b; --d2-bg2:#0f0f12; --d2-bg3:#141417;
  --d2-window:rgba(255,255,255,.032); --d2-surface:rgba(255,255,255,.045); --d2-surface2:rgba(255,255,255,.065);
  --d2-glass:rgba(20,20,24,.55); --d2-glass-strong:rgba(24,24,29,.72);
  --d2-ink:#f5f4f0; --d2-ink2:#d3d1c8; --d2-txt:#cbc9c0; --d2-muted:#8f8d84; --d2-faint:#605e57;
  --d2-line:rgba(245,244,240,.09); --d2-line2:rgba(245,244,240,.15); --d2-line3:rgba(245,244,240,.24);
  --d2-hair:rgba(245,244,240,.07);
  --d2-acc:#9b6cff; --d2-acc2:#7a45f0; --d2-acc-rgb:155,108,255;
  --d2-on-acc:#0a0a0b;
  --d2-good:#43c489; --d2-bad:#e87070;
  --d2-font-display:'Fraunces','Georgia',serif;
  --d2-font-head:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --d2-font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

/* ============================================================================
   1) INNER PAGES  ·  remap assets/css/style.css :root tokens
   (tools/, guides/, about, contact, legal, privacy, terms, disclaimer, halal,
    guides.html, tools.html, home-finance-classic.html, 404, legal.html …)
   ============================================================================ */
:root{
  /* surfaces — matte black, never navy */
  --bg-deep:var(--d2-bg);
  --bg:var(--d2-bg);
  --surface:var(--d2-bg2);
  --surface-2:var(--d2-bg3);
  --card:var(--d2-window);
  --card-2:var(--d2-surface);
  --glass:var(--d2-glass);
  --glass-strong:var(--d2-glass-strong);

  /* text */
  --ink:var(--d2-ink);
  --ink-2:var(--d2-ink2);
  --muted:var(--d2-muted);

  /* hairlines / borders */
  --line:var(--d2-line);
  --line-2:var(--d2-line2);
  --hair:var(--d2-hair);

  /* accent family — collapse trust-blue + violet + green + gold to the
     single signature violet so the whole surface reads as one matte system */
  --brand:var(--d2-acc);
  --brand-600:var(--d2-acc);
  --brand-700:var(--d2-acc2);
  --brand-50:rgba(var(--d2-acc-rgb),.13);
  --accent:var(--d2-acc);
  --blue:var(--d2-acc);
  --green:var(--d2-good);
  --green-50:rgba(67,196,137,.14);
  --gold:var(--d2-acc);
  --danger:var(--d2-bad);

  /* gradients — accent-driven, no rainbow */
  --grad:linear-gradient(135deg,var(--d2-acc),var(--d2-acc2));
  --grad-violet:linear-gradient(135deg,var(--d2-acc),var(--d2-acc2));
  --grad-green:linear-gradient(135deg,var(--d2-good),#1fb37f);

  /* glows — soft fog, tuned to accent (no neon) */
  --glow-blue:rgba(var(--d2-acc-rgb),.42);
  --glow-violet:rgba(var(--d2-acc-rgb),.42);
  --glow-green:rgba(67,196,137,.34);

  /* shadows — deepen to true-black matte */
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 22px 48px -26px rgba(0,0,0,.9);
  --shadow-lg:0 50px 110px -36px rgba(0,0,0,.92);

  /* type — Fraunces display + Inter body (keep radii/spacing untouched) */
  --font:var(--d2-font-body);
  --serif:var(--d2-font-display);

  /* ---- homepage inline <style> tokens (index.html shares :root) ----
     --txt/--mut/--dim/--nav/--line*/--font-display drive the cinematic stage.
     Kept in this single :root block so all custom-property remaps cascade as
     one unit (last stylesheet wins) rather than depending on a 2nd :root. */
  --txt:var(--d2-ink);
  --mut:var(--d2-muted);
  --dim:var(--d2-faint);
  --nav:var(--d2-ink2);
  --line2:var(--d2-line2);
  --line3:var(--d2-line3);
  --font-display:var(--d2-font-display);
}

/* headings on inner pages hardcode color:#fff — nudge to warm matte ink */
h1,h2,h3,h4{ color:var(--d2-ink); }

/* base canvas: kill the navy radial wash, use flat matte + let design2 fog show */
body{
  background:var(--d2-bg) !important;
  background-image:radial-gradient(1100px 600px at 84% -14%, rgba(var(--d2-acc-rgb),.08), transparent 60%) !important;
}

/* re-tint the aurora blobs (chrome.js injects .fx-aurora>.b1/.b2/.b3) to accent */
.fx-aurora .b1{ background:radial-gradient(circle,rgba(var(--d2-acc-rgb),.9),transparent 68%) !important; opacity:.30 !important; }
.fx-aurora .b2{ background:radial-gradient(circle,rgba(var(--d2-acc-rgb),.7),transparent 70%) !important; opacity:.24 !important; }
.fx-aurora .b3{ background:radial-gradient(circle,rgba(67,196,137,.6),transparent 72%) !important; opacity:.16 !important; }

/* ============================================================================
   2) HOMEPAGE  ·  cinematic-stage element overrides (index.html)
   The homepage :root tokens (--txt/--mut/--dim/--nav/--line*/--font-display)
   are remapped in the single :root block above. Below: the per-scene accent
   and element-level fixes for the self-styled hero stage.
   ============================================================================ */

/* homepage default scene accent + neutralise the multi-hue per-scene tints so
   the stage stays within the matte-violet system (the JS still swaps --scene
   per scene; we anchor it to accent-adjacent values instead of rainbow). */
.aw-stage{ --scene:var(--d2-acc) !important; }
.aw-bg{ background:radial-gradient(1200px 840px at 50% 30%, color-mix(in srgb, var(--d2-acc) 18%, #0d0d10), var(--d2-bg) 72%) !important; }

/* homepage hero titles / brand text use #fff or --scene — keep them warm-white */
.aw-scene-title{ color:var(--d2-ink) !important; }

/* homepage footer chrome (.eco-foot / .mini) borders → matte hairline */
.eco-foot{ border-top-color:var(--d2-line) !important; }

/* ============================================================================
   3) POLISH PASS 2026-07-01 — UNIFIED PLATINUM ACCENT PENETRATION   (?v=2)
   ----------------------------------------------------------------------------
   Per-site Design 2.0 polish pass (user instruction). design2.css moved the
   whole suite to ONE platinum accent (--acc:#c9ceda / --acc2:#9aa0bb dark,
   slate in light mode); this bridge still carried the old per-site violet
   (#9b6cff) AND the homepage/JS layers still ship raw aurora hexes.
   Importers: every page loads (site CSS →) design2.css?v=3 → THIS file ?v=2
   via <link> tags in all 91 HTML heads. Affected selectors are listed per
   block below. No data schemas involved. Additive + reversible (delete this
   section or the <link>).

   Raw hexes hunted down here (grep census of index.html inline <style>,
   assets/css/style.css, assets/js/{config,chrome,donate,services}.js,
   tools/financial-calculator-tvm.html):
     cyan/blue  #38bdf8 #22d3ee #2dd4bf #5b8cff #5d8aff #3b6dff #2f6bf0
                #3b82f6 #2563eb #6a97ff #7fb0ff #3f6ff0 #21349e #6f9bff
     violet     #8b8cf9 #a78bfa #8b5cf6 #8a7dff #7c5cff #5b6bff #9b8cff #9b6cff
     amber      #f5b544 (scene 7)  ·  greens/reds KEPT (success/danger semantics)
   ============================================================================ */

/* --- 3a. token re-point: collapse the bridge's stale violet onto the design2
       unified platinum. Everything already remapped above (--brand/--accent/
       --blue/--gold/--grad*/--glow-*/body wash/.fx-aurora/.aw-stage) flips
       with this one block — later :root wins at equal specificity. --- */
:root{
  --d2-acc:var(--acc,#c9ceda);
  --d2-acc2:var(--acc2,#9aa0bb);
  --d2-acc-rgb:var(--acc-rgb,201,206,218);
  --d2-on-acc:var(--on-navy,#0a0a0b);
}

/* --- 3b. HOMEPAGE cinematic stage: the 7 scenes carry inline
       style="--scene:#38bdf8|#10b981|#a78bfa|#2dd4bf|#22d3ee|#f5b544" and JS
       re-sets --scene on #awStage per rotation. !important out-ranks inline,
       so every --scene consumer (kicker dot, pills, "Enter Insurance" CTA,
       rail, dots, progress bar, scene-no, arrows) goes platinum at once. --- */
.aw-stage, .aw-stage .aw-scene, .aw-stage .aw-scene[style]{ --scene:var(--acc) !important; }
.aw-bg{ background:radial-gradient(1200px 840px at 50% 30%, rgba(var(--acc-rgb),.10), var(--bg) 72%) !important; }
.aw-bg::after{ opacity:.05 !important; }           /* pattern/grid overlay → faint platinum */
.aw-aurora{ opacity:.32 !important; }              /* conic wash → soft fog, not neon */
.aw-scene-cta{
  background:linear-gradient(135deg,var(--acc),var(--acc2)) !important;
  color:var(--on-navy) !important;
  box-shadow:0 16px 44px -12px rgba(var(--acc-rgb),.4) !important; }
.aw-scene-cta:hover{ color:var(--on-navy) !important; box-shadow:0 26px 64px -12px rgba(var(--acc-rgb),.5) !important; }
/* mega-menu "All … →" links: homepage inline #6a97ff + style.css var(--brand) */
.mega a.all{ color:var(--acc) !important; }
/* AMAADOR Corporation footer chip rows (index inline .eco-foot + chrome.js .footer-eco, hover #7fb0ff) */
.eco-foot .eco-links a:hover, .footer-eco .eco-links a:hover{
  color:var(--ink) !important;
  border-color:rgba(var(--acc-rgb),.5) !important;
  background:rgba(var(--acc-rgb),.10) !important; }

/* --- 3c. LOGOS. The inline hexagon chart-mark (index.html + 404.html
       <svg class="logo">) strokes a #7fb0ff→#3f6ff0→#21349e gradient via
       url(#lg|#g) — CSS stroke/fill beats presentation attributes. The
       corporation wordmark (assets/brand/logo.svg, violet "AY" hexagon) is an
       <img>, so its internals are unreachable — neutralise it with a filter. */
.brand svg.logo path{ stroke:var(--acc) !important; }
.brand svg.logo circle{ fill:var(--acc) !important; }
.amaador-brand-logo img, .brand img.logo{
  filter:grayscale(1) brightness(1.22) !important; opacity:.94; }

/* --- 3d. INNER PAGES — raw hexes in style.css that the token remap in §1
       can't reach (they are literals, not var() consumers). --- */
::selection{ background:rgba(var(--acc-rgb),.28) !important; color:var(--ink) !important; }
code{ color:var(--d2-ink2); }
a.card:hover{ border-color:rgba(var(--acc-rgb),.5) !important; }               /* was rgba(111,155,255,.55) */
.card .ic{ border-color:rgba(var(--acc-rgb),.22) !important;
  box-shadow:inset 0 0 18px rgba(var(--acc-rgb),.10) !important; }
.pill.hot{ background:rgba(var(--acc-rgb),.12) !important; color:var(--acc) !important;
  border-color:rgba(var(--acc-rgb),.3) !important; }                           /* amber → platinum */
table.data tbody tr:hover{ background:rgba(var(--acc-rgb),.07) !important; }
table.data thead th{ background:rgba(10,10,12,.6) !important; }                /* navy #080c18 → matte */
.faq-item.open{ border-color:rgba(var(--acc-rgb),.3) !important; }
input[type=number],input[type=text],input[type=date],textarea,select{
  background:rgba(10,10,12,.55) !important; }
select option{ background:var(--d2-bg2) !important; }
.seg, .stat{ background:rgba(10,10,12,.5) !important; }
/* --grad is platinum now → dark ink on the gradient, never white-on-platinum */
.seg button.active{ color:var(--on-navy) !important; }
.btn-primary, .btn-primary:hover,
.btn-gold, .btn-gold:hover{ color:var(--on-navy) !important; }
.article .meta .av{ color:var(--on-navy) !important; }
.result{ background:linear-gradient(160deg,rgba(var(--acc-rgb),.13),rgba(var(--acc-rgb),.04) 60%,var(--card)) !important;
  border-color:rgba(var(--acc-rgb),.28) !important; }                          /* blue/violet wash → platinum */
.result::before{ background:radial-gradient(circle,rgba(var(--acc-rgb),.10),transparent 65%) !important; }
.band{ background:linear-gradient(135deg,rgba(var(--acc-rgb),.18),rgba(var(--acc-rgb),.05)),var(--d2-bg3) !important;
  border:1px solid var(--line2); }                                             /* was #2f6bf0→#5b6bff */
.band::after{ background:radial-gradient(60% 120% at 12% 18%,rgba(var(--acc-rgb),.18),transparent 55%) !important; }

/* tools/financial-calculator-tvm.html page-local blues (#3b82f6 / rgba(59,130,246,…)) */
.seg button.on{ background:linear-gradient(180deg,rgba(var(--acc-rgb),.22),rgba(var(--acc-rgb),.08)) !important;
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.4) !important; }
.radio-row input{ accent-color:var(--acc) !important; }
.radio-row label:has(input:checked){ border-color:rgba(var(--acc-rgb),.55) !important;
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.16),rgba(var(--acc-rgb),.04)) !important; }
.cf-table thead th{ background:rgba(10,10,12,.5) !important; }
.cf-table input{ background:rgba(10,10,12,.4) !important; }
.cf-table input:focus{ border-color:rgba(var(--acc-rgb),.6) !important; }
.btn-ghost:hover{ border-color:rgba(var(--acc-rgb),.5) !important; }
.dcf-bar .bar.pos{ background:linear-gradient(180deg,var(--acc),rgba(var(--acc-rgb),.45)) !important; }
/* (.dcf-bar .bar.neg red + .solve-tag/.field.solved green KEPT — semantics) */

/* --- 3e. FLOATING FAB STACK (services.js injects <style id="amfab-css"> at
       runtime with inline --c: #22d3ee cyan / #5b8cff blue / #8a7dff violet
       per button — stylesheet !important out-ranks the inline custom prop). */
.amfab, .amfp{ --c:var(--acc) !important; }
.amfab{ background:var(--glass) !important; color:var(--ink) !important; }
.amfab.near, .amfab:hover, .amfab[aria-expanded=true]{
  background:var(--glass-strong) !important;
  box-shadow:0 18px 46px -10px rgba(var(--acc-rgb),.35) !important; }
.amfab-lbl{ color:var(--ink) !important; }
.amfp{ background:var(--d2-bg3) !important; border-color:var(--line2) !important; color:var(--ink) !important; }
.amfp-h h4, .amfp-net .nm{ color:var(--ink) !important; }
.amfp-x{ background:var(--d2-surface) !important; border-color:var(--line2) !important; color:var(--d2-ink2) !important; }
.amfp-search{ background:rgba(10,10,12,.6) !important; border-color:var(--line) !important; }
.amfp-item{ color:var(--d2-ink2) !important; }
.amfp-item:hover{ background:var(--d2-surface) !important; color:var(--ink) !important; }
.amfp-net .ic{ background:rgba(var(--acc-rgb),.12) !important; border-color:rgba(var(--acc-rgb),.28) !important; }
.amfp-net:hover{ background:var(--d2-surface) !important; }
/* (.amfp-net .here teal "you are here" badge KEPT — status semantic) */

/* --- 3f. DONATE modal (donate.js injects <style id="fiod-css">: navy panels
       #0f1730/#16203c/#0a1226, violet FAB gradient, blue card button/tabs). */
.fiod-fab{ background:linear-gradient(135deg,var(--acc),var(--acc2)) !important; color:var(--on-navy) !important;
  box-shadow:0 16px 34px -12px rgba(var(--acc-rgb),.45) !important; }
.fiod-modal{ background:var(--d2-bg3) !important; color:var(--ink) !important; border-color:var(--line2) !important; }
.fiod-x{ background:var(--d2-surface) !important; color:var(--d2-ink2) !important; border-color:var(--line2) !important; }
.fiod-title, .fiod-v{ color:var(--ink) !important; }
.fiod-sub, .fiod-k, .fiod-note, .fiod-or{ color:var(--muted) !important; }
.fiod-card-btn{ background:linear-gradient(135deg,var(--acc),var(--acc2)) !important; color:var(--on-navy) !important;
  box-shadow:0 14px 32px -12px rgba(var(--acc-rgb),.4), inset 0 1px 0 rgba(255,255,255,.25) !important; }
.fiod-tabs{ background:rgba(10,10,12,.6) !important; border-color:var(--line) !important; }
.fiod-tab{ color:var(--muted) !important; }
.fiod-tab.active{ background:var(--acc) !important; color:var(--on-navy) !important; }
.fiod-copy{ background:rgba(10,10,12,.6) !important; color:var(--acc) !important; border-color:var(--line2) !important; }
.fiod-copy:hover{ border-color:var(--acc) !important; color:var(--ink) !important; }
/* (.fiod-copy.ok green KEPT — success semantic) */

/* --- 3g. LIVE VISITOR COUNTER (config.js AMAADOR-COUNTER block injects
       <style id="amc-style"> with grad #6f9bff→#9b8cff) → matte glass pill,
       number gradient ink→acc2 per Design 2.0 counter convention. --- */
.amc-float{ background:var(--glass) !important; border:1px solid var(--line2) !important;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06) !important; }
.amc-float::before{ background:conic-gradient(from 0deg, rgba(var(--acc-rgb),.4),
  transparent 28%, transparent 72%, rgba(var(--acc-rgb),.4)) !important; opacity:.35 !important; }
.amc-float:hover{ box-shadow:var(--shadow), 0 4px 18px rgba(var(--acc-rgb),.22) !important; }
.amc-num{ background:linear-gradient(135deg,var(--ink),var(--acc2)) !important;
  -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; }
.amc-ic-glow{ background:radial-gradient(circle, rgba(var(--acc-rgb),.35), transparent 70%) !important; }
.amc-label{ color:var(--muted) !important; }
/* (.amc-dot live-green pulse KEPT — status semantic) */
/* ======================== END POLISH PASS 2026-07-01 ======================== */