/* ============================================================
   MY MERCHO SUITE 2.0 — Design Tokens
   "Onboarded once. Trading everywhere."
   The operations brand. Light by default — this is the only
   product in the family a non-engineer uses every day, and it
   should feel like a well-lit workplace, not a control room.
   A dark override follows at the bottom.
   ============================================================ */

:root {
  /* --- Surface & ink -------------------------------------- */
  --bg:           #F7F6F2;   /* warm paper                      */
  --bg-raise:     #FFFFFF;   /* raised surface                  */
  --panel:        #FFFFFF;   /* card / table surface            */
  --panel-2:      #F1EFE8;   /* hover, zebra, inset             */
  --panel-3:      #E7E4DA;   /* wells, tracks                   */
  --line:         rgba(22, 32, 44, 0.11);
  --line-strong:  rgba(22, 32, 44, 0.22);
  --ink:          #16202C;   /* deep ink — primary text         */
  --ink-dim:      #4E5C70;   /* secondary                       */
  --ink-faint:    #7E8B9C;   /* captions, labels                */
  --on-brand:     #FFFFFF;   /* text on a brand-filled surface  */

  /* --- Brand ----------------------------------------------- */
  --teal:         #0F6B61;   /* deep teal — the signature       */
  --teal-ink:     #0B524A;   /* darker, for text on light       */
  --teal-soft:    rgba(15, 107, 97, 0.10);
  --clay:         #B0603A;   /* warm clay — the counterweight   */
  --clay-soft:    rgba(176, 96, 58, 0.12);

  /* --- States ---------------------------------------------- */
  --ok:           #1E7A4C;   /* approved, verified, effective   */
  --ok-soft:      rgba(30, 122, 76, 0.12);
  --pend:         #A8791C;   /* staged, pending, under review   */
  --pend-soft:    rgba(168, 121, 28, 0.13);
  --stop:         #A93B37;   /* rejected, suspended, breached   */
  --stop-soft:    rgba(169, 59, 55, 0.11);

  /* --- Typography ------------------------------------------ */
  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, sans-serif;
  --font-mono:    "DM Mono", "SFMono-Regular", Consolas, monospace;

  /* --- Rhythm ---------------------------------------------- */
  --w-max:  1160px;
  --w-wide: 1360px;
  --pad-x:  clamp(20px, 5vw, 60px);
  --sec-y:  clamp(72px, 9vw, 132px);
  --r:      10px;
  --r-sm:   6px;
  --r-lg:   16px;

  /* --- Motion ---------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.32, 1);
  --ease-io:  cubic-bezier(0.62, 0, 0.35, 1);
  --dur-1: 200ms;
  --dur-2: 460ms;
  --dur-3: 900ms;

  /* --- Elevation — real light, not a grey blur ------------- */
  --sh-1: 0 1px 2px rgba(22, 32, 44, 0.06), 0 1px 1px rgba(22, 32, 44, 0.04);
  --sh-2: 0 4px 10px rgba(22, 32, 44, 0.07), 0 1px 3px rgba(22, 32, 44, 0.05);
  --sh-3: 0 18px 40px rgba(22, 32, 44, 0.12), 0 4px 10px rgba(22, 32, 44, 0.06);
  --sh-brand: 0 10px 28px rgba(15, 107, 97, 0.22);

/* ------------------------------------------------------------
   PLATFORM BRIDGE
   Maps this brand onto the eight variables the shared platform
   chrome reads (consent bar, form reply, exit panel, film
   lightbox). Same behaviour on all five sites, same markup —
   but the shape, the typeface and the colour are this site's.
   ------------------------------------------------------------ */
  --tp-bg:        var(--panel);
  --tp-ink:       var(--ink);
  --tp-dim:       var(--ink-dim);
  --tp-line:      var(--line-strong);
  --tp-accent:    var(--teal);
  --tp-on-accent: #FFFFFF;
  --tp-radius:    var(--r);
  --tp-font:      var(--font-display);
  --tp-shadow:    0 18px 44px rgba(22, 32, 44, .16);

}

/* ============================================================
   Dark override — same brand, after dark. Honest contrast,
   not an inverted light theme.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #12151A;
    --bg-raise:    #191D24;
    --panel:       #1B2028;
    --panel-2:     #222833;
    --panel-3:     #2B323E;
    --line:        rgba(226, 232, 240, 0.10);
    --line-strong: rgba(226, 232, 240, 0.22);
    --ink:         #ECEFF3;
    --ink-dim:     #A6B1C0;
    --ink-faint:   #74808F;
    --on-brand:    #08110F;

    --teal:        #3FBFAF;
    --teal-ink:    #6FD8CA;
    --teal-soft:   rgba(63, 191, 175, 0.14);
    --clay:        #E08A5C;
    --clay-soft:   rgba(224, 138, 92, 0.14);

    --ok:          #4ECB8B;
    --ok-soft:     rgba(78, 203, 139, 0.14);
    --pend:        #E0B44A;
    --pend-soft:   rgba(224, 180, 74, 0.14);
    --stop:        #EE7A72;
    --stop-soft:   rgba(238, 122, 114, 0.14);

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-2: 0 6px 16px rgba(0, 0, 0, 0.45);
    --sh-3: 0 22px 48px rgba(0, 0, 0, 0.55);
    --sh-brand: 0 10px 28px rgba(63, 191, 175, 0.20);
  }
}

:root[data-theme="dark"] {
  --bg:          #12151A;
  --bg-raise:    #191D24;
  --panel:       #1B2028;
  --panel-2:     #222833;
  --panel-3:     #2B323E;
  --line:        rgba(226, 232, 240, 0.10);
  --line-strong: rgba(226, 232, 240, 0.22);
  --ink:         #ECEFF3;
  --ink-dim:     #A6B1C0;
  --ink-faint:   #74808F;
  --on-brand:    #08110F;
  --teal:        #3FBFAF;
  --teal-ink:    #6FD8CA;
  --teal-soft:   rgba(63, 191, 175, 0.14);
  --clay:        #E08A5C;
  --clay-soft:   rgba(224, 138, 92, 0.14);
  --ok:          #4ECB8B;
  --ok-soft:     rgba(78, 203, 139, 0.14);
  --pend:        #E0B44A;
  --pend-soft:   rgba(224, 180, 74, 0.14);
  --stop:        #EE7A72;
  --stop-soft:   rgba(238, 122, 114, 0.14);
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 6px 16px rgba(0, 0, 0, 0.45);
  --sh-3: 0 22px 48px rgba(0, 0, 0, 0.55);
  --sh-brand: 0 10px 28px rgba(63, 191, 175, 0.20);
}