/* ============================================================
   TRIPSIL — Design Tokens
   All CSS custom properties used across every page.
   Import this file first in every page stylesheet.
   ============================================================ */

:root {
  /* --- Brand Colours --- */
  --primary:        #2563EB;
  --primary-dark:   #1D4ED8;
  --primary-light:  #DBEAFE;
  --primary-glow:   rgba(37, 99, 235, 0.22);
  --accent:         #0EA5E9;
  --accent-2:       #7C3AED;
  --coral:          #FF6B6B;
  --teal:           #14B8A6;
  --amber:          #F59E0B;

  /* --- Neutrals --- */
  --dark:           #0F172A;
  --dark-2:         #1E293B;
  --text:           #1E293B;
  --text-muted:     #64748B;
  --text-light:     #94A3B8;
  --bg:             #FFFFFF;
  --surface:        #F8FAFF;
  --surface-2:      #F1F5F9;
  --border:         #E2E8F0;
  --border-light:   #F1F5F9;

  /* --- Gradient Palette --- */
  --grad-hero:      linear-gradient(135deg, #2563EB 0%, #0EA5E9 50%, #14B8A6 100%);
  --grad-warm:      linear-gradient(135deg, #F59E0B 0%, #FF6B6B 50%, #EC4899 100%);
  --grad-cool:      linear-gradient(135deg, #7C3AED 0%, #2563EB 50%, #0EA5E9 100%);
  --grad-sunset:    linear-gradient(135deg, #FF6B6B 0%, #F59E0B 50%, #FDE68A 100%);
  --grad-ocean:     linear-gradient(135deg, #0EA5E9 0%, #2563EB 40%, #7C3AED 100%);
  --grad-tropical:  linear-gradient(135deg, #14B8A6 0%, #0EA5E9 50%, #2563EB 100%);
  --grad-aurora:    linear-gradient(135deg, #7C3AED 0%, #EC4899 30%, #FF6B6B 60%, #F59E0B 100%);

  /* --- Spacing Scale (8px base) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;

  /* --- Border Radius --- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-soft:    0 2px 16px rgba(37, 99, 235, 0.10);
  --shadow-card:    0 4px 24px rgba(15, 23, 42, 0.08);
  --shadow-float:   0 12px 48px rgba(37, 99, 235, 0.22);
  --shadow-vibrant: 0 12px 48px rgba(14, 165, 233, 0.30);

  /* --- Typography --- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;

  /* --- Motion --- */
  --transition:      0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.18s ease;
  --transition-slow: 0.5s ease;

  /* --- Z-Index Scale --- */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-nav:     1000;
  --z-cursor:  99999;
  --z-tip:     100001;
}