/* Design Tokens - Color Palette */
:root {
  /* Ocean Blues */
  --color-primary: #0077BE;
  --color-primary-dark: #005A8D;
  --color-primary-light: #3399CC;
  --color-primary-tint: #E8F4FB;
  --color-primary-tint-strong: #D1E9F5;
  
  /* Warm Accents */
  --color-accent: #FF6B35;
  --color-accent-light: #F7B267;
  --color-accent-dark: #E55A2B;
  --color-accent-gradient: linear-gradient(180deg, #FF7A47 0%, #FF6B35 100%);
  --color-accent-gradient-hover: linear-gradient(180deg, #FF8757 0%, #F25E2A 100%);
  
  /* Neutrals */
  --color-white: #FFFFFF;
  --color-black: #333333;
  --color-gray-light: #F5F5F5;
  --color-gray-medium: #CCCCCC;
  --color-gray-dark: #666666;
  
  /* Surface variations for depth */
  --color-surface: #FAFAFA;
  --color-surface-cool: #F8F9FA;
  --color-surface-elevated: #FFFFFF;

  /* Modern off-white palette (replaces shiplap) */
  --color-bg-primary: #FAFCFE;
  --color-bg-section: #F4F7FA;
  --color-bg-soft: linear-gradient(180deg, #FAFCFE 0%, #F4F7FA 100%);

  /* Glass card surfaces */
  --color-glass: rgba(255, 255, 255, 0.78);
  --color-glass-strong: rgba(255, 255, 255, 0.88);
  --color-glass-border: rgba(255, 255, 255, 0.6);
  
  /* Semantic Colors */
  --color-success: #28A745;
  --color-error: #DC3545;
  --color-warning: #FFC107;
  
  /* Typography Scale */
  --font-size-xs: 0.875rem;    /* 14px */
  --font-size-sm: 1rem;         /* 16px */
  --font-size-md: 1.125rem;     /* 18px */
  --font-size-lg: 1.5rem;       /* 24px */
  --font-size-xl: 2rem;         /* 32px */
  --font-size-2xl: 3rem;        /* 48px */
  
  /* Font Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Spacing Scale */
  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-sm: 1rem;      /* 16px */
  --spacing-md: 1.5rem;    /* 24px */
  --spacing-lg: 2rem;      /* 32px */
  --spacing-xl: 3rem;      /* 48px */
  --spacing-2xl: 4rem;     /* 64px */
  --spacing-3xl: 6rem;     /* 96px */
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  
  /* Enhanced multi-layer shadow system — premium feel */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 6px 12px rgba(0, 0, 0, 0.06), 0 12px 24px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.04), 0 10px 20px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 6px 12px rgba(0, 0, 0, 0.05), 0 16px 32px rgba(0, 0, 0, 0.08), 0 32px 64px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.06), 0 20px 40px rgba(0, 119, 190, 0.08), 0 32px 64px rgba(0, 0, 0, 0.08);
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  
  /* Animation timing (Apple-inspired) */
  --anim-duration-fast: 150ms;
  --anim-duration-normal: 300ms;
  --anim-duration-slow: 600ms;
  --anim-duration-extra-slow: 900ms;
  
  /* Easing curves */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  
  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* Container */
  --container-max-width: 1200px;
  --container-padding: var(--spacing-md);

  /* Texture & Depth */
  --texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  --texture-dots: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
  --texture-dots-size: 20px 20px;
  --texture-lines: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(0,0,0,0.015) 10px,
    rgba(0,0,0,0.015) 11px
  );
  --depth-inset-top: inset 0 2px 4px rgba(0,0,0,0.02);
  --depth-lit-edge: inset 0 1px 0 rgba(255,255,255,0.8);
  --depth-soft-vignette: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.02) 100%);
}

/* Responsive Typography */
@media (max-width: 768px) {
  :root {
    --font-size-2xl: 2rem;    /* 32px on mobile */
    --font-size-xl: 1.5rem;   /* 24px on mobile */
  }
}