/* tokens-motion.css — STRIPE-LIGHT premium override layer
   ============================================================
   DO NOT MERGE INTO tokens.css — that file is regenerated by
   build.py from engine/channel_configs/ai_small_business.json
   on every build (it still emits the legacy DARK palette).
   This file is the safe override layer; it loads AFTER
   tokens.css and BEFORE site.css (see _src/_partials/head.html),
   so the values here WIN the cascade and SURVIVE every rebuild.

   2026-06-04: whole-site repaint to a clean LIGHT Stripe aesthetic.
   Source of truth = awesome-design-md Stripe DESIGN.md:
     primary indigo #635BFF/#533afd · ink navy #0d253d (never pure black)
     canvas #fff · canvas-soft #f6f9fc · hairline #e3e8ee
     pill buttons · tabular money · thin display type · gradient mesh accent.
   ============================================================ */
:root {
  /* === STRIPE BRAND PALETTE ========================================== */
  --stripe-indigo:        #635BFF;   /* signature CTA / link */
  --stripe-indigo-deep:   #4F46E5;   /* hover / mid gradient stop */
  --stripe-indigo-press:  #3F37C9;   /* pressed */
  --stripe-indigo-soft:   #7A73FF;   /* light accents */
  --stripe-indigo-subdued:#EDEBFF;   /* pale tag fill */
  --stripe-ink:           #0A2540;   /* deep navy body text (Stripe inkbase) */
  --stripe-ink-2:         #1A2B3C;
  --stripe-ink-mute:      #425466;   /* secondary text */
  --stripe-ink-soft:      #687385;   /* helper / captions */
  --stripe-ink-faint:     #8792A2;   /* faintest labels */
  --stripe-canvas:        #ffffff;
  --stripe-canvas-soft:   #F6F9FC;   /* cool off-white feature band */
  --stripe-canvas-cool:   #EFF3F8;
  --stripe-hairline:      #E3E8EE;
  --stripe-hairline-2:    #D5DBE3;
  --stripe-ruby:          #E0264D;   /* expensive / loss state */
  --stripe-amber:         #B45309;   /* caution (AA on white) */
  --stripe-amber-bg:      #FEF6E7;
  --stripe-green:         #0E9F6E;   /* cheaper / win state */
  --stripe-green-bg:      #E6F6EF;

  /* === REPOINT THE LEGACY DARK SEMANTIC NAMES TO LIGHT =============== */
  /* Surfaces flip: page bg becomes white, panels become canvas-soft.   */
  --bg-primary:   var(--stripe-canvas);
  --bg-secondary: var(--stripe-canvas);
  --bg-elevated:  var(--stripe-canvas);
  --bg-deep:      var(--stripe-canvas-soft);

  /* Ink hierarchy now reads dark-on-light. */
  --ink-bright:   var(--stripe-ink);
  --ink-muted:    var(--stripe-ink-mute);
  --ink-subtle:   var(--stripe-ink-soft);
  --ink-tertiary: var(--stripe-ink-faint);

  /* Borders become real hairlines (not white-on-dark alpha). */
  --hairline:        var(--stripe-hairline);
  --hairline-strong: var(--stripe-hairline-2);

  /* Accent system → indigo (sparingly, CTA/links only). */
  --accent:       var(--stripe-indigo);
  --accent-soft:  var(--stripe-indigo-soft);
  --accent-alt:   var(--stripe-amber);
  --error:        var(--stripe-ruby);
  --success:      var(--stripe-green);
  --text-on-dark: var(--stripe-ink);
  --text-on-paper:var(--stripe-ink);
  --text-on-accent: #ffffff;
  --muted:        var(--stripe-ink-mute);
  --paper:        var(--stripe-canvas);

  /* Semantic result tints, light versions. */
  --tint-good: var(--stripe-green-bg);
  --tint-warn: var(--stripe-amber-bg);
  --tint-bad:  #FDECEE;

  /* === PASTEL ACCENT MAP (kept names, repointed to Stripe hues) ======
     The home cards + pills key off --pastel-*-300. We keep the six
     "hue" hooks but tune them so colored accents read as a tasteful
     Stripe multi-color family on white (used as thin top-bars / labels,
     not loud fills). 300 = the label/border tone; 100 = soft bg. */
  --pastel-cyan-100:   #E0F2FE;  --pastel-cyan-300:   #0E8FD8;  --pastel-cyan-500:   #0E7490;
  --pastel-violet-100: #EDEBFF;  --pastel-violet-300: #635BFF;  --pastel-violet-500: #4F46E5;
  --pastel-amber-100:  #FEF6E7;  --pastel-amber-300:  #B45309;  --pastel-amber-500:  #92400E;
  --pastel-mint-100:   #E6F6EF;  --pastel-mint-300:   #0E9F6E;  --pastel-mint-500:   #047857;
  --pastel-rose-100:   #FDECEE;  --pastel-rose-300:   #E0264D;  --pastel-rose-500:   #BE123C;
  --pastel-sky-100:    #E6EEFB;  --pastel-sky-300:    #2563EB;  --pastel-sky-500:    #1D4ED8;

  /* === STRIPE GRADIENT (the signature angled multi-color wash) =======
     Used as a SUBTLE accent band on heroes + as an accent text clip.
     --mesh-angle is animated by motion-fx.js; keep it referenced so the
     hero mesh still "breathes" — but on light it stays soft & pastel. */
  --stripe-gradient:
    linear-gradient(var(--mesh-angle, 100deg),
      #FFD7B5 0%, #FFB7C5 18%, #C9A7FF 40%, #8B9BFF 62%, #6BD0FF 82%, #B8F5E0 100%);

  /* === DEPTH SHADOWS (Stripe = soft layered navy-tinted, NOT glass) === */
  --shadow-ambient: 0 50px 100px -20px rgba(50, 50, 93, 0.12);
  --shadow-key:     0 30px 60px -30px rgba(0, 0, 0, 0.18);
  --shadow-rim:     0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-stack:   var(--shadow-ambient), var(--shadow-key), var(--shadow-rim);

  /* Soft colored hover lifts (very subtle — Stripe stays restrained). */
  --shadow-glow-cyan:   0 18px 40px -16px rgba(14, 143, 216, 0.30);
  --shadow-glow-violet: 0 18px 40px -16px rgba(99, 91, 255, 0.32);
  --shadow-glow-amber:  0 18px 40px -16px rgba(180, 83, 9, 0.24);
  --shadow-glow-mint:   0 18px 40px -16px rgba(14, 159, 110, 0.28);
  --shadow-glow-rose:   0 18px 40px -16px rgba(224, 38, 77, 0.26);
  --shadow-glow-sky:    0 18px 40px -16px rgba(37, 99, 235, 0.30);

  /* === MESH / SURFACE BLENDS (re-skinned light) ====================== */
  --mesh-angle: 100deg;
  /* Hero: a clean near-white wash with the Stripe gradient kept as a soft
     top band via the .mesh-bg layer (see site.css). */
  --mesh-hero:
    linear-gradient(180deg, #F6F9FC 0%, #FFFFFF 60%, #FFFFFF 100%);
  /* Cards become flat white — the soft shadow does the lifting. */
  --mesh-card: #ffffff;
  --mesh-divider:
    linear-gradient(90deg, transparent 0%, rgba(99, 91, 255, 0.5) 50%, transparent 100%);
  --mesh-cta:
    linear-gradient(135deg, #635BFF 0%, #4F46E5 100%);

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

  /* === 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;
}

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