/* ============================================
   SKSF Design Tokens
   Brand colors, typography, spacing, shadows
   ============================================ */

:root {
  /* ---- Brand Colors ---- */
  --color-primary: #0A3D62;
  --color-primary-light: #0E4D7A;
  --color-primary-dark: #072D48;
  --color-primary-50: #E8F0F7;
  --color-primary-100: #C5DBE9;
  --color-primary-200: #9EC3D9;
  --color-primary-700: #083352;

  --color-secondary: #2ECC71;
  --color-secondary-light: #54D98C;
  --color-secondary-dark: #25A85D;
  --color-secondary-50: #EAFBF0;

  --color-accent: #F39C12;
  --color-accent-light: #F5B041;
  --color-accent-dark: #D4860E;
  --color-accent-50: #FEF5E7;

  /* ---- Saffron: Indian Identity & Warmth ---- */
  --color-saffron: #FF9933;
  --color-saffron-light: #FFAD5C;
  --color-saffron-dark: #E07B1A;
  --color-saffron-50: #FFF3E6;

  /* ---- Trust Indicators ---- */
  --color-trust-green: #16A34A;
  --color-trust-blue: #1D4ED8;
  --color-trust-gold: #B45309;

  /* ---- Semantic Colors ---- */
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-error: #DC2626;
  --color-info: #2563EB;

  /* ---- Neutral Colors ---- */
  --color-bg: #FFFFFF;
  --color-bg-soft: #F8FAFC;
  --color-bg-muted: #F1F5F9;
  --color-bg-dark: #0F172A;
  --color-text: #1E293B;
  --color-text-light: #475569;
  --color-text-muted: #94A3B8;
  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;

  /* ---- Gradients ---- */
  --gradient-primary: linear-gradient(135deg, #0A3D62 0%, #0E6BA8 100%);
  --gradient-hero: linear-gradient(160deg, rgba(7, 45, 72, 0.88) 0%, rgba(10, 61, 98, 0.76) 50%, rgba(14, 107, 168, 0.55) 100%);
  --gradient-cta: linear-gradient(135deg, #0A3D62 0%, #2ECC71 100%);
  --gradient-accent: linear-gradient(135deg, #F39C12 0%, #E74C3C 100%);
  --gradient-saffron: linear-gradient(135deg, #FF9933 0%, #F39C12 100%);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(10,61,98,0.03) 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
  --gradient-dark-glass: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.4) 100%);
  --gradient-mission: linear-gradient(135deg, #072D48 0%, #0A3D62 60%, #0E6BA8 100%);

  /* ---- Typography ---- */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.5rem, 6vw, 5rem);
  --fs-h1: clamp(2rem, 5vw, 4rem);
  --fs-h2: clamp(1.75rem, 4vw, 3rem);
  --fs-h3: clamp(1.5rem, 3vw, 2rem);
  --fs-h4: clamp(1.25rem, 2.5vw, 1.5rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.75rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.15;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-wider: 0.05em;
  --ls-widest: 0.1em;

  /* ---- Spacing ---- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ---- Border Radius ---- */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-3xl: 2rem;      /* 32px */
  --radius-full: 9999px;

  /* ---- Shadows (Premium Soft & Deep) ---- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 40px rgba(10, 61, 98, 0.06);
  --shadow-xl: 0 30px 60px rgba(10, 61, 98, 0.08);
  --shadow-2xl: 0 40px 80px rgba(10, 61, 98, 0.12);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-glow-primary: 0 10px 30px rgba(10, 61, 98, 0.2);
  --shadow-glow-secondary: 0 10px 30px rgba(46, 204, 113, 0.2);
  --shadow-glow-accent: 0 10px 30px rgba(243, 156, 18, 0.2);
  --shadow-glow-saffron: 0 10px 30px rgba(255, 153, 51, 0.25);
  
  /* ---- Glass Effects ---- */
  --glass-border: 1px solid rgba(255, 255, 255, 0.2);
  --glass-blur: blur(12px);

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 800ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ---- Z-Index ---- */
  --z-background: -1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-fab: 500;
  --z-toast: 600;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-wide: 1440px;
  --container-narrow: 800px;
  --header-height: 90px;
  --header-height-scrolled: 70px;
}