/* ds-fresh.css · the corporate site's look in the platform (owner, 2026-10-05:
   "align the platform with the corporate site: the colours, logos and the
   call to action buttons"). The source is DS_Corporate_Site-'s fresh.css and
   the UX guide's "Corporate site buttons" (02b).

   - Paper: the light theme is the site's paper, white cards, paper borders
     and ink text. It is the default now; dark is still one click away.
   - The primary action: an ink button with a slow conic ring (ink, white,
     violet) and one violet blob drifting across it. ds-fresh.js gives it to
     the elements each page names in <meta name="ds-cta" content="…">, and
     wraps their label in .cta-fill. Repeated actions (a button on every
     card) get the quiet ink button instead (<meta name="ds-ink">).
   - The wordmark: "DeStore" set in Plus Jakarta Sans, like the site's nav. */

html:root[data-theme="light"]{
  --bg:#F4F3F1; --d0:#F4F3F1;
  --d1:#ffffff; --d2:#ffffff; --d3:#f7f6f4; --d4:#efeeeb; --surface:#ffffff;
  --bdr:#e4e2de; --border:#e4e2de; --border2:#d9d6d1;
  --line:rgba(22,22,26,.09); --line2:rgba(22,22,26,.14);
  --text:#16161a; --txt:#16161a; --ink:#16161a;
  --text2:#5e5e6a; --dim:#5e5e6a;
  --text3:#8a8a96; --muted:#8a8a96;
  --violet:#B354F1;
}
html:root[data-theme="light"],
html:root[data-theme="light"] body{background:#F4F3F1}

/* The wordmark */
.ds-word{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:900;letter-spacing:-.02em;line-height:1;color:var(--text,#16161a);white-space:nowrap}

/* The primary action: conic ring + violet blob on ink */
.ds-cta{
  position:relative; z-index:0; isolation:isolate; overflow:hidden !important;
  display:inline-flex; align-items:stretch; justify-content:center;
  padding:3px !important; border:none !important; border-radius:12px !important;
  background:transparent !important; box-shadow:none !important; filter:none !important;
  animation:none !important; text-decoration:none !important; color:#fff !important;
}
.ds-cta::before{
  content:""; position:absolute; z-index:0; left:50%; top:50%; width:240%; aspect-ratio:1;
  background:conic-gradient(from 0deg,#16161a 0deg,#16161a 210deg,#fff 268deg,#B354F1 312deg,#16161a 360deg);
  transform:translate(-50%,-50%);
  animation:ds-cta-spin 6.5s linear infinite;
  pointer-events:none;
}
.ds-cta > .cta-fill{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:38px; padding:8px 18px; border-radius:9px;
  color:#fff; pointer-events:none; text-align:center; overflow-wrap:anywhere;
  background-image:
    radial-gradient(120px 56px at 0% 50%, color-mix(in srgb,#B354F1 80%,transparent), transparent 70%),
    linear-gradient(#16161a,#16161a);
  background-repeat:no-repeat; background-size:240% 100%,100% 100%;
  animation:ds-cta-blob 7s ease-in-out infinite alternate;
}
.ds-cta > .cta-fill svg{flex:none}
.ds-cta[hidden]{display:none !important}
.ds-cta:disabled,.ds-cta[aria-disabled="true"]{opacity:.45 !important;cursor:not-allowed}
.ds-cta:disabled::before,.ds-cta:disabled > .cta-fill{animation:none}
.ds-cta:focus-visible{outline:2px solid #B354F1 !important;outline-offset:3px}
@keyframes ds-cta-spin{to{transform:translate(-50%,-50%) rotate(1turn)}}
@keyframes ds-cta-blob{to{background-position:100% 50%,0 0}}

/* The quiet ink button, for an action repeated down a list */
.ds-ink{
  background:#16161a !important; color:#fff !important; border:1px solid #16161a !important;
  border-radius:12px !important; box-shadow:none !important; filter:none !important;
}
.ds-ink:hover{background:#2a2a30 !important}
.ds-ink:focus-visible{outline:2px solid #B354F1 !important;outline-offset:3px}
html:not([data-theme="light"]) .ds-ink{background:#fff !important;color:#16161a !important;border-color:#fff !important}

/* Reduce motion: the ring still turns (owner, 2026-10-06: "the buttons are
   not moving" on a Mac with Reduce motion on), slower, and the blob rests.
   It is a slow turn inside a 3px border: nothing slides, zooms or flashes. */
@media (prefers-reduced-motion: reduce){
  .ds-cta::before{animation-duration:12s}
  .ds-cta > .cta-fill{animation:none}
}