/* tokens-motion.css — DESIGN-LANGUAGE recipe layer (non-color)
   ============================================================
   Cascade: tokens.css (:root brand + [data-theme] category colour+font,
   GENERATED by build.py from brand.tokens.json) -> tokens-motion.css (THIS
   file: motion timing, depth, shadow, glass, mesh STRUCTURE) -> site.css
   (token-driven layout).

   2026-06-07 rewrite: the old whole-site Stripe-LIGHT colour repaint that
   lived here (and re-declared --accent/--bg-*/--ink-*/--hairline*/--tint-*)
   was REMOVED. Those vars are now owned exclusively by tokens.css so a
   [data-theme="<category>"] block can actually win the cascade. This file
   keeps ONLY the non-colour design-language recipes + a few accent-DERIVED
   surfaces (which follow whatever --accent the active theme resolves to).
   Bhovix premium look = warm neutrals + bold display type + accent-tinted
   depth (NOT a Stripe clone). DO NOT re-declare colour tokens here. */
:root {
  /* === MOTION TIMING ================================================= */
  --dur-fast: 140ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
  --dur-hero: 900ms;
  --dur-mesh: 28s;

  --ease-out-expo:     cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring-soft:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-emphasized:   cubic-bezier(0.2, 0, 0, 1);

  /* === DEPTH Z-STACK ================================================= */
  --depth-1: 1;
  --depth-2: 10;
  --depth-3: 20;
  --depth-4: 50;
  --depth-5: 100;

  /* === DEPTH SHADOWS (warm-neutral layered, NOT glassy) =============== */
  --shadow-ambient: 0 50px 100px -20px rgba(40, 33, 20, 0.12);
  --shadow-key:     0 30px 60px -30px rgba(20, 16, 8, 0.18);
  --shadow-rim:     0 1px 2px rgba(20, 16, 8, 0.05);
  --shadow-stack:   var(--shadow-ambient), var(--shadow-key), var(--shadow-rim);

  /* Accent-tinted hover lift — follows the active theme accent so each
     category's depth glows in its own colour. color-mix gives an alpha
     tint of --accent without an extra token (Chromium/modern-browser). */
  --shadow-glow: 0 18px 40px -16px color-mix(in srgb, var(--accent) 38%, transparent);

  /* Legacy per-hue glow names (kept so existing card-glass-* rules resolve).
     Re-pointed to the single accent-driven glow above. */
  --shadow-glow-cyan:   var(--shadow-glow);
  --shadow-glow-violet: var(--shadow-glow);
  --shadow-glow-amber:  var(--shadow-glow);
  --shadow-glow-mint:   var(--shadow-glow);
  --shadow-glow-rose:   var(--shadow-glow);
  --shadow-glow-sky:    var(--shadow-glow);

  /* === "GLASS" SURFACES → plain light cards (no blur) ================ */
  --glass-bg:            #ffffff;
  --glass-bg-soft:       var(--bg-deep);
  --glass-border:        var(--hairline);
  --glass-border-strong: var(--hairline-strong);
  --blur-soft:           none;
  --blur-strong:         none;

  /* === MESH / SURFACE BLENDS (structure only; colour via --accent) ==== */
  --mesh-angle: 100deg;
  --mesh-card: #ffffff;
  --mesh-divider:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 55%, transparent) 50%, transparent 100%);
  --mesh-cta:
    linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);

  /* === LEGACY PASTEL ACCENT MAP =====================================
     Kept as static utility hues for any page that still uses the
     .pill-pastel-* / .card-glass-<hue> helpers. Category pages drive
     colour through --accent (via [data-theme]) instead and do NOT need
     these. 300 = label/border tone, 100 = soft bg fill. */
  --pastel-cyan-100:   #DEF5FA;  --pastel-cyan-300:   #0E7490;  --pastel-cyan-500:   #155E75;
  --pastel-violet-100: #EDE7FE;  --pastel-violet-300: #6D28D9;  --pastel-violet-500: #5B21B6;
  --pastel-amber-100:  #FBF3DD;  --pastel-amber-300:  #B45309;  --pastel-amber-500:  #92400E;
  --pastel-mint-100:   #E7F6EF;  --pastel-mint-300:   #047857;  --pastel-mint-500:   #065F46;
  --pastel-rose-100:   #FBE0EF;  --pastel-rose-300:   #BE185D;  --pastel-rose-500:   #9D174D;
  --pastel-sky-100:    #DEEAFD;  --pastel-sky-300:    #1D4ED8;  --pastel-sky-500:    #1E40AF;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-hero: 0ms;
    --dur-mesh: 0s;
  }
}