/* ============================================================
   DEF Express — Elevation, Borders & Motion Tokens
   ============================================================ */

:root {
  /* Shadows — cool-tinted, soft. Brand is clean, not heavy. */
  --shadow-xs: 0 1px 2px rgba(7, 47, 77, 0.06);
  --shadow-sm: 0 1px 3px rgba(7, 47, 77, 0.08), 0 1px 2px rgba(7, 47, 77, 0.04);
  --shadow-md: 0 4px 12px rgba(7, 47, 77, 0.10), 0 2px 4px rgba(7, 47, 77, 0.05);
  --shadow-lg: 0 12px 28px rgba(7, 47, 77, 0.12), 0 4px 8px rgba(7, 47, 77, 0.06);
  --shadow-xl: 0 24px 56px rgba(7, 47, 77, 0.16);
  /* Brand-tinted glow for primary CTAs on hover */
  --shadow-brand: 0 8px 20px rgba(12, 114, 184, 0.30);
  --shadow-accent: 0 8px 20px rgba(0, 190, 94, 0.28);

  /* Border widths */
  --border-hairline: 1px;
  --border-thick: 2px;

  /* Motion — quick, confident, no bounce. "Express." */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1);  /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur-base: 200ms;  /* @kind other */
  --dur-slow: 360ms;  /* @kind other */

  /* Signature gradients (use sparingly — hero, brand panels) */
  --gradient-brand: linear-gradient(120deg, var(--blue-600) 0%, var(--blue-500) 55%, var(--green-500) 130%);
  --gradient-wave: linear-gradient(120deg, var(--blue-500), var(--green-500));
  --gradient-ink: linear-gradient(160deg, var(--grey-900), var(--blue-900));
}