/* Effects — shadows, glows, gradients, blur, motion — UI UX Pro Max
   The brand's depth comes from soft dark shadows + subtle inner highlights,
   plus ambient blue/orange glows behind hero content. */

:root {
  /* ---- Elevation (dark UI) ---- */
  --shadow-xs: 0 1px 2px rgba(5, 7, 12, 0.45);
  --shadow-sm: 0 2px 6px rgba(5, 7, 12, 0.40);
  --shadow-md: 0 8px 24px rgba(5, 7, 12, 0.45);
  --shadow-lg: 0 18px 50px rgba(5, 7, 12, 0.55);
  --shadow-xl: 0 30px 80px rgba(5, 7, 12, 0.65);

  /* Inner top highlight that gives glass surfaces their lit edge */
  --inner-top: inset 0 1px 0 rgba(248, 250, 252, 0.06); /* @kind shadow */
  --inner-glass: inset 0 1px 0 rgba(248, 250, 252, 0.08), inset 0 -1px 0 rgba(5, 7, 12, 0.30); /* @kind shadow */

  /* ---- Focus ring ---- */
  --ring-focus: 0 0 0 3px rgba(81, 136, 242, 0.35);
  --ring-danger: 0 0 0 3px rgba(242, 88, 91, 0.30);

  /* ---- Brand glows (drop on buttons / accents) ---- */
  --glow-blue: 0 8px 28px rgba(81, 136, 242, 0.40);
  --glow-blue-soft: 0 6px 22px rgba(81, 136, 242, 0.28);
  --glow-orange: 0 8px 28px rgba(236, 123, 60, 0.35);

  /* ---- Gradients ---- */
  --grad-hero-text: linear-gradient(100deg, #5188f2 0%, #6f8ef0 38%, #d58fb0 64%, #ec7b3c 100%);
  --grad-blue-orange: linear-gradient(120deg, #5188f2 0%, #ec7b3c 100%); /* @kind color */
  --grad-primary-btn: linear-gradient(180deg, #5f93f4 0%, #4a82ef 100%); /* @kind color */
  --grad-surface: linear-gradient(180deg, rgba(248,250,252,0.05) 0%, rgba(248,250,252,0) 100%);

  /* Ambient page glow — paint behind hero/section content.
     Usage: background-image: var(--glow-ambient); on a dark element. */
  --glow-ambient:
    radial-gradient(60% 50% at 28% 42%, rgba(81, 136, 242, 0.22) 0%, transparent 70%),
    radial-gradient(55% 50% at 76% 58%, rgba(236, 123, 60, 0.16) 0%, transparent 72%); /* @kind color */

  /* ---- Blur (glassmorphism) ---- */
  --blur-sm: 8px; /* @kind other */
  --blur-md: 16px; /* @kind other */
  --blur-lg: 28px; /* @kind other */

  /* ---- Motion ---- */
  --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: 130ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
  --t-base: 200ms cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
}