/* ============================================================
   SNAPLYWEB — Effects: radii, shadows, blur, gradients, motion
   Rounded 12–20px. Glass when appropriate. Subtle shadows.
   Premium gradients. Smooth micro-interactions.
   ============================================================ */
:root {
  /* ---- Corner radii (brand: 12–20px) ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;   /* default control */
  --radius-lg:   18px;   /* cards */
  --radius-xl:   24px;   /* large panels */
  --radius-2xl:  32px;
  --radius-pill: 999px;  /* pills / floating CTAs */
  --radius-full: 50%;

  /* ---- Shadows (used sparingly — depth, not drama) ---- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  /* Yellow glow — the signature interaction accent */
  --glow-yellow:    0 0 0 1px rgba(255,243,1,0.35), 0 8px 30px rgba(255,243,1,0.18);
  --glow-yellow-sm: 0 6px 18px rgba(255,243,1,0.22);
  --glow-orange:    0 8px 28px rgba(255,122,0,0.28);

  /* ---- Glassmorphism ---- */
  --blur-sm: 8px;  /* @kind other */
  --blur-md: 16px; /* @kind other */
  --blur-lg: 28px; /* @kind other */
  --glass-fill:   rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);

  /* ---- Premium gradients ---- */
  --grad-yellow:    linear-gradient(135deg, #FFF301 0%, #FFD000 100%); /* @kind color */
  --grad-spark:     linear-gradient(120deg, #FFF301 0%, #FF7A00 100%); /* @kind color */
  --grad-ink:       linear-gradient(180deg, #141414 0%, #000000 100%); /* @kind color */
  --grad-hero-glow: radial-gradient(60% 80% at 70% 0%, rgba(255,243,1,0.16) 0%, rgba(255,122,0,0.06) 35%, transparent 70%); /* @kind color */
  --grad-text-fade: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.55) 100%); /* @kind color */

  /* ---- Motion (smooth, premium micro-interactions) ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    240ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
  --transition-base: all var(--dur-base) var(--ease-out); /* @kind other */

  /* ---- Z-index scale ---- */
  --z-base:    1;    /* @kind other */
  --z-sticky:  100;  /* @kind other */
  --z-nav:     200;  /* @kind other */
  --z-overlay: 800;  /* @kind other */
  --z-modal:   900;  /* @kind other */
  --z-toast:   1000; /* @kind other */
  --z-float:   1100; /* @kind other */
}