/* ============================================================
   Digital Vishal — Design Tokens v2
   Single source of truth. Import before any component CSS.
   ============================================================ */

:root {

  /* ── Colour palette ─────────────────────────────────── */
  --dv-navy-900:    #0A1633;   /* top-bar, footer bg           */
  --dv-navy-800:    #111E42;   /* footer hover bg              */
  --dv-blue-700:    #1735A0;   /* primary button hover         */
  --dv-blue-600:    #1F46C4;   /* primary buttons, links       */
  --dv-blue-500:    #3560D4;   /* button active state          */
  --dv-cyan-500:    #14B8E6;   /* accent gradient end          */
  --dv-surface-100: #F3F6FD;   /* alternate sections           */
  --dv-surface-200: #E6ECFA;   /* borders, card outlines       */
  --dv-white:       #FFFFFF;
  --dv-text-900:    #101828;   /* ALL headings                 */
  --dv-text-700:    #1D2939;   /* sub-headings                 */
  --dv-text-600:    #475467;   /* body text                    */
  --dv-text-500:    #667085;   /* captions, placeholders       */
  --dv-text-400:    #98A2B3;   /* disabled, subtle             */
  --dv-amber-400:   #F5B301;   /* review stars                 */
  --dv-green-600:   #067647;   /* success text                 */
  --dv-green-100:   #ECFDF3;   /* success bg                   */
  --dv-error:       #B42318;   /* error text                   */
  --dv-error-100:   #FEF3F2;   /* error bg                     */

  /* ── Gradient ───────────────────────────────────────── */
  --dv-gradient:          linear-gradient(90deg, #1F46C4 0%, #14B8E6 100%);
  --dv-gradient-dark:     linear-gradient(135deg, #0A1633 0%, #1F46C4 100%);
  --dv-gradient-text:     linear-gradient(90deg, #1F46C4, #14B8E6);

  /* ── Typography ─────────────────────────────────────── */
  --dv-font-heading: 'Manrope', 'Inter', system-ui, sans-serif;
  --dv-font-body:    'Inter', system-ui, sans-serif;

  /* sizes */
  --dv-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --dv-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --dv-h3: 1.25rem;
  --dv-body: 1rem;
  --dv-sm:  0.875rem;
  --dv-xs:  0.75rem;

  /* line-heights */
  --dv-lh-tight:  1.1;
  --dv-lh-snug:   1.2;
  --dv-lh-normal: 1.65;

  /* ── Spacing (8px grid) ─────────────────────────────── */
  --dv-space-1:  8px;
  --dv-space-2:  16px;
  --dv-space-3:  24px;
  --dv-space-4:  32px;
  --dv-space-5:  40px;
  --dv-space-6:  48px;
  --dv-space-8:  64px;
  --dv-space-10: 80px;
  --dv-section-desktop: 80px;
  --dv-section-mobile:  56px;

  /* ── Layout ─────────────────────────────────────────── */
  --dv-container:        1200px;
  --dv-side-pad:         24px;
  --dv-side-pad-mobile:  16px;

  /* ── Shape ──────────────────────────────────────────── */
  --dv-radius-card:   20px;
  --dv-radius-input:  12px;
  --dv-radius-pill:   999px;
  --dv-radius-modal:  24px;

  /* ── Elevation ──────────────────────────────────────── */
  --dv-shadow-card:   0 8px 24px rgba(16, 24, 40, 0.06);
  --dv-shadow-modal:  0 24px 48px rgba(10, 22, 51, 0.18);
  --dv-shadow-header: 0 4px 16px rgba(16, 24, 40, 0.08);
  --dv-shadow-blue:   0 8px 24px rgba(31, 70, 196, 0.22);

  /* ── Component heights ──────────────────────────────── */
  --dv-topbar-h:  40px;
  --dv-header-h:  72px;
  --dv-btn-h:     44px;
  --dv-input-h:   48px;

  /* ── Transition ─────────────────────────────────────── */
  --dv-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --dv-duration:  200ms;
}

/* ── Utility: gradient text ── */
.dv-gradient-text {
  background: var(--dv-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* fallback */
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}