/* ============================================
   Doodlejay - Design Tokens
   Blue & gray primary palette
   ============================================ */

:root {
  /* Brand colors - Blue scale */
  --color-primary-50:  #EFF6FF;
  --color-primary-100: #DBEAFE;
  --color-primary-200: #BFDBFE;
  --color-primary-300: #93C5FD;
  --color-primary-400: #60A5FA;
  --color-primary-500: #3B82F6;
  --color-primary-600: #2563EB;
  --color-primary-700: #1D4ED8;
  --color-primary-800: #1E40AF;
  --color-primary-900: #1E3A8A;

  --color-primary:        #3B82F6;
  --color-primary-light:  #60A5FA;
  --color-primary-dark:   #1D4ED8;
  --color-primary-darker: #1E3A8A;

  /* Neutral - Gray scale */
  --color-gray-50:  #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;
  --color-gray-950: #020617;

  /* Semantic */
  --color-bg:        #FFFFFF;
  --color-bg-alt:    #F8FAFC;
  --color-bg-dark:   #0F172A;
  --color-bg-darker: #020617;
  --color-surface:   #FFFFFF;
  --color-surface-elevated: #FFFFFF;
  --color-text:          #1E293B;
  --color-text-muted:    #64748B;
  --color-text-light:    #94A3B8;
  --color-text-inverse:  #F8FAFC;
  --color-border:        #E2E8F0;
  --color-border-light:  #F1F5F9;

  /* Accent */
  --color-accent:        #06B6D4; /* cyan accent */
  --color-accent-light:  #67E8F9;
  --color-success:       #10B981;
  --color-warning:       #F59E0B;
  --color-danger:        #EF4444;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #1E40AF 0%, #3B82F6 50%, #60A5FA 100%);
  --gradient-blue:    linear-gradient(135deg, #1E3A8A 0%, #2563EB 100%);
  --gradient-cool:    linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #334155 100%);
  --gradient-mesh:    radial-gradient(at 40% 20%, #1E40AF 0px, transparent 50%),
                      radial-gradient(at 80% 0%, #3B82F6 0px, transparent 50%),
                      radial-gradient(at 0% 50%, #1E3A8A 0px, transparent 50%),
                      radial-gradient(at 80% 50%, #2563EB 0px, transparent 50%),
                      radial-gradient(at 0% 100%, #0F172A 0px, transparent 50%);
  --gradient-text:    linear-gradient(135deg, #60A5FA 0%, #93C5FD 50%, #DBEAFE 100%);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.16);
  --shadow-glow: 0 0 32px rgba(59, 130, 246, 0.4);
  --shadow-glow-lg: 0 0 64px rgba(59, 130, 246, 0.35);

  /* Spacing scale (8pt grid) */
  --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 */

  /* Layout */
  --container-max: 1280px;
  --container-padding: clamp(1rem, 4vw, 2rem);
  --nav-height: 72px;

  /* Type scale */
  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-base:1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;
  --fs-4xl: 2.25rem;
  --fs-5xl: 3rem;
  --fs-6xl: clamp(2.5rem, 5vw, 4rem);
  --fs-7xl: clamp(3rem, 7vw, 5.5rem);

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

  /* Transitions */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration: 320ms;
  --duration-slow: 600ms;

  /* Z-index */
  --z-base: 1;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 2000;
}