/* ============================================================
   ShopWithZ — Brand Design Tokens
   Derived from the ShopWithZ logo (purple bag + navy wordmark).
   EVERY token below is overridable at runtime by the Admin Panel
   (Appearance → Theme). See assets/js/core/theme.js
   ============================================================ */
:root{
  /* ---- Core brand palette (from logo) ---- */
  --brand-purple:#6C2BD9;      /* bag + Z + speed lines */
  --brand-purple-600:#5B21B6;
  --brand-purple-700:#4C1D95;
  --brand-purple-300:#A78BFA;
  --brand-purple-100:#EDE7FD;
  --brand-purple-050:#F6F3FE;
  --brand-navy:#111A35;        /* wordmark + handle */
  --brand-navy-800:#0D142B;
  --brand-navy-900:#080D1F;    /* dark-mode canvas */

  /* ---- Semantic / functional ---- */
  --c-primary:var(--brand-purple);
  --c-primary-hover:var(--brand-purple-600);
  --c-primary-ink:#FFFFFF;
  --c-accent:#E11D48;          /* sale / clearance red */
  --c-accent-soft:#FFE4EA;
  --c-deal:#0F9D58;            /* "save" green */
  --c-deal-soft:#E4F6EC;
  --c-warn:#B45309;
  --c-warn-soft:#FEF3C7;
  --c-info:#1D4ED8;
  --c-info-soft:#E0EAFF;

  /* ---- Surfaces & text ---- */
  --c-bg:#FFFFFF;
  --c-bg-alt:#F7F5FC;
  --c-bg-sunken:#F1EEF9;
  --c-surface:#FFFFFF;
  --c-border:#E4E0F0;
  --c-border-strong:#CFC8E6;
  --c-text:#111A35;
  --c-text-soft:#4B5474;
  --c-text-mute:#767E99;
  --c-text-invert:#FFFFFF;

  /* ---- Type ---- */
  --font-sans:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font-sans);
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.9375rem; --fs-md:1rem;
  --fs-lg:1.125rem; --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem; --fs-4xl:3rem;
  --lh-tight:1.15; --lh:1.55;

  /* ---- Shape & depth ---- */
  --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(17,26,53,.06),0 1px 3px rgba(17,26,53,.05);
  --sh-2:0 4px 12px rgba(17,26,53,.08);
  --sh-3:0 12px 32px rgba(17,26,53,.12);
  --sh-pop:0 24px 64px rgba(17,26,53,.22);

  /* ---- Layout ---- */
  --maxw:1360px;
  --gap:16px;
  --header-h:auto;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* ---- Marketplace layout (Walmart-style) tokens ---- */
  --hdr-bg:var(--brand-purple);      /* solid colour bar across the top */
  --hdr-fg:#FFFFFF;
  --hdr-h:76px;
  --nav-bg:#FFFFFF;
  --spark:#FFC220;                   /* price-drop / rollback flag */
  --spark-ink:#2A1F00;
  --tile-r:14px;
  --ftr-bg:#F2F3F7;
  --ftr-fg:#2E3550;

  /* ---- Motion ---- */
  --t-fast:.14s ease; --t:.22s cubic-bezier(.2,.7,.3,1);

  /* logo inline vars */
  --logo-handle:var(--brand-navy);
  --logo-bg:#FFFFFF;
  --logo-word:var(--brand-navy);
}

/* ---- Dark theme (storefront + admin share it) ---- */
[data-theme="dark"]{
  --c-bg:#080D1F;
  --c-bg-alt:#0E1530;
  --c-bg-sunken:#0B1226;
  --c-surface:#111A35;
  --c-border:#222C4F;
  --c-border-strong:#33406B;
  --c-text:#F2F4FB;
  --c-text-soft:#B9C0DA;
  --c-text-mute:#8891B4;
  --c-primary:#8B5CF6;
  --c-primary-hover:#A78BFA;
  --c-accent:#FB7185;
  --c-accent-soft:#3A1526;
  --c-deal:#34D399;
  --c-deal-soft:#0C2A22;
  --c-info-soft:#152449;
  --c-warn-soft:#37260A;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 4px 14px rgba(0,0,0,.5);
  --sh-3:0 14px 38px rgba(0,0,0,.6);
  --sh-pop:0 24px 64px rgba(0,0,0,.7);
  --logo-handle:#FFFFFF;
  --logo-bg:#080D1F;
  --logo-word:#FFFFFF;
  --hdr-bg:#0E1530;
  --nav-bg:#111A35;
  --ftr-bg:#0B1226;
  --ftr-fg:#B9C0DA;
  --spark:#FFD166;
  --spark-ink:#2A1F00;
}

/* ---- Density presets (admin-controllable) ---- */
[data-density="compact"]{ --gap:12px; --r:9px; --sp-5:18px; --sp-6:24px; --sp-7:36px; }
[data-density="roomy"]  { --gap:22px; --r:16px; --sp-5:30px; --sp-6:44px; --sp-7:64px; }

/* ---- Corner style presets ---- */
[data-corners="square"]{ --r-xs:0; --r-sm:2px; --r:3px; --r-lg:4px; --r-xl:6px; }
[data-corners="round"] { --r-xs:10px; --r-sm:14px; --r:18px; --r-lg:24px; --r-xl:32px; }