/* ============================================
   ABOT KAYA — Design Tokens (Bold Redesign)
   ============================================ */

:root {
  /* ---- Color Palette ---- */

  /* Purple — Brand Primary (from logo) */
  --purple-300: #C4B5FD;
  --purple-400: #A78BFA;
  --purple-500: #7C3AED;
  --purple-600: #6D28D9;
  --purple-700: #5B21B6;
  --purple-800: #4A148C;
  --purple-900: #3B0764;

  /* Blue — Brand Secondary (from logo) */
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E3A8A;

  /* Gold — Warmth & Aspiration */
  --gold-300: #F5D76E;
  --gold-400: #E8B930;
  --gold-500: #D4A017;
  --gold-600: #B8860B;
  --gold-700: #946B08;

  /* Navy — Deep Backgrounds (Kept for reference, but overridden below) */
  --navy-950: #060A18;
  --navy-900: #0A1228;
  --navy-800: #101D3A;
  --navy-700: #1B2D54;
  --navy-600: #253D6B;

  /* Teal — Success & Mobility (from logo) */
  --teal-300: #5EEAD4;
  --teal-400: #2DD4BF;
  --teal-500: #14B8A6;
  --teal-600: #0D9488;

  /* Coral/Orange — Attention */
  --coral-400: #FB923C;
  --coral-500: #F97316;
  --coral-600: #EA580C;

  /* Green — Positive */
  --green-400: #4ADE80;
  --green-500: #22C55E;
  --green-600: #16A34A;

  /* Red — Alerts */
  --red-400: #F87171;
  --red-500: #EF4444;

  /* Neutrals */
  --pure-white: #FFFFFF;
  --gray-50: #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;
  
  /* We redefine 'white' to be dark so utility classes like .text-white instantly adapt to the light theme */
  /* ---- Typography ---- */
  --font-heading: 'Archivo Black', sans-serif;
  --font-subheading: 'TT Interphases', 'Inter', sans-serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- Semantic Colors (Brand Kit) ---- */
  --color-primary: #0161cf;
  --color-primary-hover: #014ca5;
  --color-primary-dark: #013b82;
  --color-secondary: #51029c;
  --color-secondary-alt1: #9850cd;
  --color-secondary-alt2: #7ecdff;
  --color-secondary-hover: #3a0170;
  
  /* Backgrounds: Neutrals */
  --color-bg-dark: #ffffff; 
  --color-bg-darker: #f2f6fb;
  --color-bg-card: rgba(255, 255, 255, 0.95);
  --color-bg-card-hover: #ffffff;
  --color-bg-light: #f2f6fb;
  --color-bg-light-alt: #e6edf7;
  
  /* Text */
  --color-text-light: #07368f;
  --color-text-muted: #3a5c9f;
  --color-text-body: #07368f;
  --color-text-dark: #ffffff;
  --color-text-dark-muted: #f2f6fb;
  
  --color-accent: #F6A80F;
  --color-accent-hover: #d99109;
  --color-warning: var(--coral-500);
  --color-success: var(--green-600);
  --color-danger: var(--red-500);
  --color-gold: var(--color-accent);
  --color-gold-hover: var(--color-accent-hover);

  /* ---- Gradients (Brand Kit) ---- */
  --gradient-brand: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  --gradient-brand-reverse: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-hero: radial-gradient(ellipse at 20% 50%, rgba(1, 97, 207, 0.08) 0%, rgba(1, 97, 207, 0.05) 40%, rgba(242, 246, 251, 0.95) 80%);
  --gradient-hero-alt: radial-gradient(ellipse at 80% 20%, rgba(1, 97, 207, 0.08) 0%, transparent 50%);
  --gradient-purple-blue: var(--gradient-brand);
  --gradient-purple-teal: var(--gradient-brand);
  --gradient-gold-warm: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
  --gradient-card-border: linear-gradient(135deg, rgba(1, 97, 207, 0.2), rgba(1, 97, 207, 0.1));
  --gradient-section-divider: linear-gradient(90deg, transparent, rgba(1, 97, 207, 0.15), transparent);


  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.15em;

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

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;

  /* ---- Border Radius (Sharper, more serious) ---- */
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.5rem;
  --radius-2xl: 0.75rem;
  --radius-full: 9999px;

  /* ---- Shadows (Soft & Airy) ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 12px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 8px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 30px -5px rgba(15, 23, 42, 0.1), 0 10px 15px -6px rgba(15, 23, 42, 0.05);
  --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
  --shadow-glow: 0 10px 25px rgba(1, 97, 207, 0.2);
  --shadow-glow-lg: 0 15px 35px rgba(1, 97, 207, 0.25);
  --shadow-glow-purple: var(--shadow-glow);
  --shadow-glow-blue: var(--shadow-glow);
  --shadow-glow-teal: var(--shadow-lg);
  --shadow-glow-gold: var(--shadow-lg);

  /* ---- Glass (Mature Theme) ---- */
  --glass-bg: rgba(255, 255, 255, 0.98);
  --glass-bg-light: rgba(255, 255, 255, 0.85);
  --glass-bg-purple: rgba(1, 97, 207, 0.03);
  --glass-border: rgba(15, 23, 42, 0.05);
  --glass-border-light: rgba(15, 23, 42, 0.05);
  --glass-border-purple: rgba(15, 23, 42, 0.1);

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Z-Index ---- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ============================================
   Keyframe Animations
   ============================================ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(81, 2, 156, 0.3); }
  50%      { box-shadow: 0 0 40px rgba(81, 2, 156, 0.5), 0 0 60px rgba(1, 97, 207, 0.2); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-8px) rotate(1deg); }
  66%      { transform: translateY(4px) rotate(-1deg); }
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes border-glow {
  0%, 100% { border-color: rgba(81, 2, 156, 0.3); }
  50%      { border-color: rgba(81, 2, 156, 0.6); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes expand-line {
  from { width: 0; }
  to   { width: 60px; }
}

@keyframes particle-drift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { transform: translate(var(--drift-x, 100px), var(--drift-y, -200px)) scale(0.3); opacity: 0; }
}