/* ============================================================================================
   VDG B2B design-system tokens — V4 Phase 2 (development-plan-v4.md §7)
   The single vocabulary every VDG surface (gateway, clothing, portals, admin) composes from.
   site.css and admin.css keep their own :root fallbacks; the contract is: a surface may use a
   token from here, or its own legacy value that MATCHES one — never a third value.
   Public motion intensity 6/10, admin 2/10 (§7.1); both honour prefers-reduced-motion.
   ============================================================================================ */

:root {
  /* ---------- Colour · public (premium Indian B2B: warm neutrals, restrained navy/ink accent) */
  --ds-cream:        #F7F8FC;   /* cool gallery ground */
  --ds-paper:        #FFFEFF;   /* raised surfaces */
  --ds-bg-raised:    #F1F3F9;
  --ds-bg-sunk:      #E9ECF4;
  --ds-ink:          #0B1734;   /* primary midnight navy */
  --ds-ink-muted:    #536078;
  --ds-ink-faint:    #7F899C;
  --ds-line:         #E2E6EF;
  --ds-line-strong:  #CBD2E0;
  --ds-action:       #D6006F;   /* VDG magenta, derived from the supplied mark */
  --ds-action-deep:  #A60064;
  --ds-action-soft:  #FBE8F2;
  --ds-sale:         #D8321F;   /* sale/discount only */
  --ds-star:         #C99A2E;   /* ratings only */
  --ds-good:         #2E8B57;   --ds-good-soft: #E6F4EC;
  --ds-danger:       #B23B2E;   --ds-danger-soft: #F7E4E1;
  --ds-hold:         #8A6D1F;   --ds-hold-soft:  #F7F0DA;   /* escrow/hold/attention */
  --ds-placeholder:  #EDEBE4;

  /* ---------- Colour · admin (dense, calm, operational — same hues, quieter) */
  --adm-rail:            #161A22;
  --adm-rail-edge:       #242A36;
  --adm-rail-text:       rgba(233,237,244,.72);
  --adm-rail-active:     rgba(109,147,242,.16);
  --adm-action:          #6D93F2;   /* the same action hue, night-shifted */
  --adm-danger:          #B23B2E;   --adm-danger-soft: #F7E4E1;
  --adm-good:            #2E8B57;   --adm-good-soft:   #E6F4EC;
  --adm-hold:            #8A6D1F;   --adm-hold-soft:   #F7F0DA;
  --adm-shadow-sm:  0 1px 2px rgba(21,25,32,.05);
  --adm-shadow:     0 1px 2px rgba(21,25,32,.05), 0 10px 26px -18px rgba(21,25,32,.22);

  /* ---------- Type (Archivo carries both surfaces; admin adds its four-step compact scale) */
  --ds-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --ds-fs-display: clamp(2.2rem, 5.4vw, 4.6rem);   /* gateway hero */
  --ds-fs-title:   clamp(1.5rem, 3vw, 2.25rem);    /* section titles */
  --ds-fs-body:    1rem;
  --ds-fs-meta:    .85rem;
  --ds-fs-micro:   .72rem;
  --adm-fs-page:    1.45rem;
  --adm-fs-section: 1rem;
  --adm-fs-body:    .88rem;
  --adm-fs-meta:    .78rem;
  --adm-fs-micro:   .7rem;

  /* ---------- Space & shape (8px rhythm; public is sharp-edged editorial, admin 8px controls) */
  --ds-space-1: 4px;  --ds-space-2: 8px;  --ds-space-3: 16px;
  --ds-space-4: 24px; --ds-space-5: 40px; --ds-space-6: 64px;
  --ds-r-sm: 2px; --ds-r-md: 2px; --ds-r-lg: 2px;
  --adm-r-control: 8px;
  --ds-shadow-drawer: 0 2px 6px rgba(23,23,26,.05), 0 12px 30px rgba(23,23,26,.08);

  /* ---------- Motion: public 6/10 — one eased curve family, sub-400ms, commerce content never hidden behind animation */
  --ds-motion-quick:  160ms cubic-bezier(.16,.84,.32,1);
  --ds-motion-move:   280ms cubic-bezier(.16,.84,.32,1);
  --ds-motion-editorial: 380ms cubic-bezier(.16,.84,.32,1);
  --ds-ease: cubic-bezier(.16,.84,.32,1);
  --ds-ease-bounce: cubic-bezier(.34,1.56,.64,1);
  /* Motion: admin 2/10 — only state feedback, no travel */
  --adm-motion-quick: 90ms ease-out;

  /* ---------- Media frame contract (§7.2) */
  --ds-frame-hero:      2400 / 1200;  /* gateway & clothing hero, desktop */
  --ds-frame-hero-m:    1080 / 1350;  /* hero, mobile */
  --ds-frame-industry:  1600 / 1200;  /* industry poster */
  --ds-frame-banner:    2000 / 1200;  /* private-label / dropship banner */
  --ds-frame-category:  1200 / 1500;  /* category tile */
  --ds-frame-product:   1600 / 2000;  /* product image = 3:4 — matches .pdp-hero-img */

  /* ---------- Viewport proof contract (§11 DoD: 360 / 768 / 1440) */
  --ds-bp-sm: 360px;
  --ds-bp-md: 768px;
  --ds-bp-lg: 1440px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ds-cream:#1A1917; --ds-paper:#232220; --ds-bg-raised:#232220; --ds-bg-sunk:#2C2A27;
    --ds-ink:#F0EEEA; --ds-ink-muted:#B4AFA6; --ds-ink-faint:#837E75;
    --ds-line:#332F2B; --ds-line-strong:#45403A;
    --ds-action:#6D93F2; --ds-action-deep:#8FADF5; --ds-action-soft:#1D2740;
    --ds-sale:#E8563F; --ds-star:#D9B05C;
    --ds-good:#5FBE83; --ds-good-soft:#152A1D;
    --ds-danger:#E58879; --ds-danger-soft:#3B1E1A;
    --ds-hold:#D9B05C;   --ds-hold-soft:#2C2510;
    --ds-placeholder:#2C2A27;
    --ds-shadow-drawer: 0 2px 6px rgba(0,0,0,.25), 0 12px 30px rgba(0,0,0,.35);
  }
}

/* Reduced motion: both intensities collapse to zero travel. Commerce content stays readable. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-motion-quick: 0ms linear;
    --ds-motion-move: 0ms linear;
    --ds-motion-editorial: 0ms linear;
    --adm-motion-quick: 0ms linear;
  }
}