/* MasnoonHub Express — canonical design tokens + global accessibility.
 * Single source of truth for colour, type, radii, shadows, and the six
 * per-category accent maps. Loaded site-wide, ahead of every other stylesheet,
 * so any page (homepage today, account/PDP/legal later) reuses one token set.
 * Keep this thin and stable: change a value here and it changes everywhere.
 */

:root{
  /* brand + surface — matches the homepage design board (home.css :root):
     orange brand #e0530f + dark navy #141d33 + cool neutrals. */
  --navy:#141d33; --navy-deep:#0e1525; --navy-soft:#29314c; --navy-line:#2c3553;
  --brand:#e0530f; --brand-bright:#f26417; --brand-soft:#fdeadf; --brand-ink:#5c2509;
  --red:#df262e; --red-soft:#fdecec; --trust:#2f6fb0; --trust-soft:#e9f1f9; --star:#f2a31d;
  --ink:#18181d; --ink-2:#56565f; --ink-3:#8d909b; --line:#ececef; --line-2:#f4f4f6;
  --surface:#ffffff; --surface-2:#f7f3ec; --app-bg:#eceef1; --paper:#f2efe9;
  /* v7 design blues (cards use --blue-deep for Add-to-cart, --verify for the vendor seal) */
  --blue:#427bb0; --blue-deep:#235e95; --blue-glow:#bad1ed; --verify:var(--blue);
  --gold:#d7a23e; --gold-soft:#f6ead2; --green:#1d8a5c; --green-soft:#dcf0e7; --green-ink:#0c3a27;
  /* charity (sadaqah) moment — gold/amber, used on cart + checkout + receipt */
  --charity:#9b6b1f; --charity-soft:#f7eccb; --charity-ink:#4a3406;
  --bkash:#e2136e; --nagad:#f37920;
  --ft-fg:#e7eaf3; --ft-mut:#9aa3bd; --ft-mut-2:#7c87a6; --ft-line:#27314e;

  /* default accent = attar gold; .cat-* below remap it per category */
  --accent:#c47d18; --accent-soft:#f6ead2; --accent-ink:#4a3406;

  /* type */
  --font-display:"Spectral","Noto Serif Bengali",Georgia,serif;
  --font-body:"Hanken Grotesk","Noto Sans Bengali",system-ui,sans-serif;
  --font-bn:"Noto Sans Bengali",var(--font-body);
  /* type scale (v7 design) */
  --fs-xs:11px; --fs-sm:12.5px; --fs-base:14px; --fs-md:15px; --fs-lg:17px;
  --fs-xl:20px; --fs-2xl:26px; --fs-3xl:34px; --fs-display:46px;

  /* radii */
  --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:18px; --r-pill:999px; --r-card:14px;

  /* shadows */
  --shadow-sm:0 1px 2px rgba(20,29,51,.06);
  --shadow-card:0 1px 2px rgba(20,29,51,.05),0 10px 24px -16px rgba(20,29,51,.25);
  --shadow-pop:0 12px 38px -12px rgba(20,29,51,.4);
}

/* Per-category accent maps. Drop .cat-attar / .cat-hijab / ... on any element
 * and its --accent / --accent-soft / --accent-ink resolve for that subtree.
 * attar=gold, hijab=rose, tasbih=emerald, mats=teal, books=indigo, dates=olive. */
.cat-attar{ --accent:#c47d18; --accent-soft:#f6ead2; --accent-ink:#4a3406; }
.cat-hijab{ --accent:#c04e72; --accent-soft:#f8e2ea; --accent-ink:#5b1730; }
.cat-tasbih{ --accent:#1d8a5c; --accent-soft:#dcf0e7; --accent-ink:#0c3a27; }
.cat-mats{ --accent:#0e8080; --accent-soft:#d8efef; --accent-ink:#063a3a; }
.cat-books{ --accent:#3a4a86; --accent-soft:#e6e8f4; --accent-ink:#1b2347; }
.cat-dates{ --accent:#7e7a1e; --accent-soft:#eeedcf; --accent-ink:#34330a; }

/* ===== Global accessibility ===== */

/* Skip link: hidden until focused, then pinned top-left. */
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; z-index:9999; }
.skip-link:focus{ position:fixed; top:12px; left:12px; width:auto; height:auto; padding:12px 20px;
  background:var(--navy); color:#fff; font-family:var(--font-body); font-weight:700; font-size:14px;
  border-radius:var(--r-sm); box-shadow:var(--shadow-pop); text-decoration:none; }

/* One focus-visible ring for the whole site: a soft brand halo, no jump. */
:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--brand-soft); }
input:focus-visible, select:focus-visible, textarea:focus-visible{ box-shadow:0 0 0 3px var(--brand-soft); }

/* Skeleton shimmer for loading placeholders. */
@keyframes shimmer{ to{ background-position:200% center; } }
.skel{ background:linear-gradient(90deg,var(--line-2) 33%,#e8e8ec 50%,var(--line-2) 67%);
  background-size:200% 100%; animation:shimmer 1.4s ease-in-out infinite; border-radius:var(--r-sm); }
.skel--circle{ border-radius:50%; }

@media (prefers-reduced-motion: reduce){ .skel{ animation:none; } }

/* ===== Cross-document page transitions (View Transitions API) =====
 * Opt every same-origin navigation into a soft crossfade so the EN <-> Bangla
 * toggle's cookie+reload swaps the page without a white flash, and ordinary
 * internal clicks feel continuous. Chrome/Edge honour @view-transition; Safari,
 * Firefox, and reduced-motion users fall through to an instant swap (the rule
 * is simply a no-op there), so nothing breaks anywhere. */
@view-transition { navigation: auto; }

/* A quick 150ms dissolve (UA default is ~250ms): it should read as "the page
 * changed", not "the page moved". The root snapshot already cross-fades by
 * default, so we only retune its timing. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: 150ms;
  animation-timing-function: ease;
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root){ animation: none !important; }
}