/* ============================================================
   DISPATCH MOTION — TAN / WHITE THEME
   ------------------------------------------------------------
   Loaded LAST on every page. Restores the light Dispatch palette
   (tan page, white surfaces, navy ink, sand accent) while keeping
   the instrument-style changes from the dark pass: stable preview
   frames (NO cursor tilt — js/glass.js stays unloaded), flat cards
   with SHARP corners, and the brand-colour edge on the "Open Motion
   Library" CTA + Brand Engine window.

   Colours come from the pages' own light tokens; this file only
   pins the design tokens the shared component rules below use, and
   neutralises the old liquid-glass card/button layer.
   Namespacing: design tokens are --dml-*.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- surfaces: tan page, white cards, near-white controls ---- */
  --dml-bg:         #F6EFE6;   /* mesa-fade tan — page */
  --dml-surface:    #FFFFFF;   /* white — cards / panels */
  --dml-raised:     #FFFFFF;   /* controls */
  --dml-raised-2:   #F1EFE8;   /* hover step */

  /* ---- borders + shadow (depth without glass) ---- */
  --dml-border:      #e6e1d6;
  --dml-border-soft: #efebe1;
  --dml-shadow:      0 1px 2px rgba(9,22,35,.06);
  --dml-shadow-pop:  0 18px 44px rgba(9,22,35,.16);

  /* ---- ink hierarchy (navy) ---- */
  --dml-text:   #163158;
  --dml-text-2: #4a5f7d;
  --dml-text-3: #6c7d96;
  --dml-text-4: #9aa6b8;

  /* ---- accent: Dispatch sand ---- */
  --dml-accent:     #D2B081;
  --dml-accent-ink: #091623;
  --dml-focus:      #163158;
}

/* each page keeps its own body background (homepage/library = tan --page-bg,
   studio = near-white --rail), so this file does not force one. */

/* ============================================================
   GLASS LAYER NEUTRALISED -> flat cards, SHARP corners.
   No blur, no glow ring, no cursor tilt. Gallery + drawer cards.
   ============================================================ */
.grid .card, .dp-motion-card, .card {
  background: var(--dml-surface) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid var(--dml-border) !important;
  border-radius: 0 !important;                 /* sharp — no rounding */
  box-shadow: var(--dml-shadow) !important;
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
.grid .card::before, .dp-motion-card::before, .card::before { display: none !important; }
.grid .card:hover, .grid .card:focus-visible, .grid .card:focus-within,
.dp-motion-card:hover, .dp-motion-card:focus-visible,
.card:hover, .card:focus-within {
  transform: none !important;                  /* no tilt, no lift chase */
  border-color: #d8d0c0 !important;
  box-shadow: 0 4px 14px rgba(9,22,35,.10) !important;
}

/* preview frames stable + transparent (the motion poster fills them) */
.hc-piece { background: transparent !important; border: 0; box-shadow: none !important; }
.hero-composition .hc-piece:hover { transform: none !important; }

/* ============================================================
   BUTTONS — glass fill + rotating ring edges removed.
   ============================================================ */
.ml-find, .lib-btn, .load-more, .dp-panel-use, .lg-btn {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: none !important;
}
.ml-find::before, .lib-btn::before, .load-more::before,
.dp-panel-use::before, .lg-btn::before { display: none !important; }

/* primary actions: sand accent */
.ml-find, .dp-panel-use, .dp-use, .dp-drawer-back {
  background: var(--dml-accent) !important;
  color: var(--dml-accent-ink) !important;
  border: 1px solid transparent !important;
}
.ml-find:hover, .dp-panel-use:hover, .dp-use:hover, .dp-drawer-back:hover {
  filter: brightness(1.04); transform: none !important;
}

/* secondary actions: white with border */
.lib-btn, .load-more, .lg-btn {
  background: var(--dml-surface) !important;
  color: var(--dml-text) !important;
  border: 1px solid var(--dml-border) !important;
}
.lib-btn:hover, .load-more:hover, .lg-btn:hover {
  background: var(--dml-raised-2) !important;
  border-color: #d8d0c0 !important;
  color: var(--dml-text) !important;
  transform: none !important;
}

/* ============================================================
   BRAND EDGE — a thin conic ring in the ACTIVE brand's colours,
   on the "Open Motion Library" CTA and the Brand Engine window.
   ============================================================ */
@property --dml-edge { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes dml-edge-spin { to { --dml-edge: 360deg; } }

#lib-btn { position: relative; }
#lib-btn::before, .brand-drawer::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1.4px;
  background: conic-gradient(from var(--dml-edge),
    var(--brand-primary, var(--dml-accent)),
    var(--brand-accent, #6C7D96),
    var(--brand-secondary, var(--dml-accent)),
    var(--brand-primary, var(--dml-accent)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  display: block !important;
}
#lib-btn::before { opacity: .9; }
#lib-btn:hover::before { opacity: 1; animation: dml-edge-spin 6s linear infinite; }
.brand-drawer::before { animation: dml-edge-spin 12s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  #lib-btn:hover::before, .brand-drawer::before { animation: none; }
}

/* keep focus visible on light */
:focus-visible { outline-color: var(--dml-focus); }