/* CSS Custom Properties - Design Tokens */
/* All design system variables for Move With Fong website */

:root {
  /* ===================================
     COLOR PALETTE
     Derived from logo gradient
     =================================== */

  /* Primary Colors */
  --color-navy: #1E4370;
  --color-deep-teal: #2B7A8E;
  --color-bright-teal: #3BA5A8;
  --color-turquoise: #4DD0D2;

  /* Supporting Colors */
  --color-white: #FFFFFF;
  --color-off-white: #F8F9FA;
  --color-light-grey: #E8ECEF;
  --color-medium-grey: #5A6C7D;
  --color-dark-grey: #2C3E50;

  /* Semantic Color Assignments */
  --color-primary: var(--color-navy);
  --color-primary-light: var(--color-deep-teal);
  --color-accent: var(--color-turquoise);
  --color-accent-bright: var(--color-bright-teal);

  --color-text-primary: var(--color-dark-grey);
  --color-text-secondary: var(--color-medium-grey);
  --color-text-inverse: var(--color-white);

  --color-background: var(--color-white);
  --color-background-alt: var(--color-off-white);

  --color-border: var(--color-light-grey);

  /* Status Colors */
  --color-success: #10B981;
  --color-error: #EF4444;
  --color-warning: #F59E0B;

  /* ===================================
     GRADIENTS
     =================================== */

  --gradient-primary: linear-gradient(135deg, var(--color-navy) 0%, var(--color-turquoise) 100%);
  --gradient-primary-vertical: linear-gradient(180deg, var(--color-navy) 0%, var(--color-turquoise) 100%);
  --gradient-subtle: linear-gradient(180deg, var(--color-off-white) 0%, var(--color-light-grey) 100%);
  --gradient-overlay: linear-gradient(135deg, rgba(30, 67, 112, 0.7) 0%, rgba(77, 208, 210, 0.7) 100%);

  /* ===================================
     TYPOGRAPHY
     =================================== */

  /* Font Families */
  --font-family-headings: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-body: 'Source Sans Pro', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font Sizes */
  --font-size-base: 1rem; /* 16px */
  --font-size-small: 0.875rem; /* 14px */
  --font-size-xs: 0.75rem; /* 12px */

  /* Headings - Desktop */
  --font-size-h1: 3rem; /* 48px */
  --font-size-h2: 2.5rem; /* 40px */
  --font-size-h3: 1.75rem; /* 28px */
  --font-size-h4: 1.25rem; /* 20px */
  --font-size-h5: 1.125rem; /* 18px */
  --font-size-h6: 1rem; /* 16px */

  /* Headings - Mobile (overridden in responsive.css) */
  --font-size-h1-mobile: 2rem; /* 32px */
  --font-size-h2-mobile: 1.75rem; /* 28px */
  --font-size-h3-mobile: 1.5rem; /* 24px */

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;

  /* ===================================
     SPACING SCALE
     =================================== */

  --space-xs: 0.25rem; /* 4px */
  --space-sm: 0.5rem; /* 8px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */
  --space-3xl: 4rem; /* 64px */
  --space-4xl: 6rem; /* 96px */

  /* Section Spacing */
  --section-padding-mobile: 2.5rem; /* 40px */
  --section-padding-desktop: 5rem; /* 80px */
  --section-gap: 3rem; /* 48px */

  /* Container */
  --container-max-width: 1200px;
  --container-padding: 1.5rem; /* 24px */

  /* ===================================
     LAYOUT
     =================================== */

  /* Breakpoints (for reference in JS if needed) */
  --breakpoint-mobile: 320px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-desktop-large: 1440px;

  /* Grid */
  --grid-gap: 2rem;
  --grid-gap-small: 1rem;

  /* ===================================
     BORDERS & RADIUS
     =================================== */

  --border-width: 1px;
  --border-width-thick: 2px;

  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 20px;
  --border-radius-full: 50%;

  /* ===================================
     SHADOWS
     =================================== */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-profile: 0 10px 40px rgba(30, 67, 112, 0.15);

  /* ===================================
     TRANSITIONS
     =================================== */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;

  --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  /* ===================================
     Z-INDEX SCALE
     =================================== */

  --z-index-base: 1;
  --z-index-dropdown: 10;
  --z-index-sticky: 20;
  --z-index-fixed: 30;
  --z-index-modal-backdrop: 40;
  --z-index-modal: 50;
  --z-index-popover: 60;
  --z-index-tooltip: 70;
  --z-index-skip-link: 100;

  /* ===================================
     SIZING
     =================================== */

  /* Navigation */
  --nav-height: 80px;
  --nav-height-mobile: 64px;

  /* Logo */
  --logo-width-desktop: 150px;
  --logo-width-mobile: 120px;

  /* Touch Targets */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;

  /* Form Elements */
  --input-height: 48px;
  --input-padding-x: 1rem;
  --input-padding-y: 0.75rem;

  /* Buttons */
  --button-padding-x: 2rem;
  --button-padding-y: 0.75rem;
  --button-border-radius: var(--border-radius-md);
}