/* ============================================
   NCC Invest Global - Base Styles
   Reset, Variables, Typography
   ============================================ */

/* CSS Reset & Normalize */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: clamp(15px, 0.9375rem + 0.25vw, 16px);  /* Fluid base font size */
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* Safety net - only after fixing root causes */
  width: 100%;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);  /* Off-white background */
  overflow-x: hidden; /* Safety net - only after fixing root causes */
  width: 100%;
  position: relative;
}

/* ============================================
   CSS Variables - Design System
   ============================================ */

:root {
  /* ============================================
     NAVY + COPPER Color System
     Luxury Corporate Investment Theme
     ============================================ */
  
  /* Brand Colors - Navy (Primary) */
  --navy-900: #1e3a5f;  /* Deep navy - primary brand */
  --navy-700: #2d4a6b;  /* Medium navy - hover states */
  --navy-500: #3d5a7b;  /* Light navy - subtle accents */
  
  /* Brand Colors - Copper (Accent) - Bright Metallic & Radiant */

  --copper-500: #f0b866; /* Lighter radiant copper - hover states */
  --copper-300: #f8c877; /* Lightest luminous copper - subtle highlights */
  --copper-glow: rgba(232, 168, 85, 0.5); /* Bright copper glow effect */
  --copper-luminous: rgba(232, 168, 85, 0.7); /* Luminous copper for gradients */
  --copper-shine: rgba(248, 200, 119, 0.3); /* Shimmer effect */
  
  /* Premium Project Card Colors - Deep Navy & Metallic Copper */
  --navy-deep: #0E1A2E;        /* Deep navy blue background */
  --navy-medium: #1C2F4A;      /* Medium navy blue (lighter gradient) */
  --copper-highlight: #F1AF87; /* Copper highlights */
  --copper-shadow: #6D3323;    /* Copper shadow/dark variant */
  --copper-glow-subtle: rgba(184, 105, 75, 0.4); /* Subtle copper glow */
  --copper-glow-soft: rgba(184, 105, 75, 0.2);  /* Soft copper glow */
  --copper-glow-animated: rgba(184, 105, 75, 0.5); /* Animated glow intensity */
  --text-light: rgba(255, 255, 255, 0.9);        /* Soft light gray/off-white */
  --text-muted-light: rgba(255, 255, 255, 0.7); /* Muted light text */
  
  /* Glassmorphism for project cards */
  --glass-navy: rgba(14, 26, 46, 0.7);          /* Navy glass background */
  --glass-navy-light: rgba(28, 47, 74, 0.5);    /* Lighter navy glass */
  --glass-blur-card: blur(20px) saturate(180%);   /* Card blur effect */
  --glass-blur-card-light: blur(10px) saturate(150%); /* Light blur */
  
  /* Shared page header and card background */
  --page-header-bg: linear-gradient(135deg, rgba(30, 58, 95, 0.6) 0%, rgba(45, 74, 107, 0.5) 50%, rgba(30, 58, 95, 0.6) 100%);
  
  /* Project Card Background - Elegant Light Blue */
  /* Primary card background: #E8F4F8 - MUST remain static at all times */
  /* --project-card-bg: #dbf6ff; */
  
  /* Surface Colors */
  --surface-0: #ffffff;      /* Pure white */
  --surface-50: #fafbfc;     /* Off-white - primary background */
  --surface-100: #f5f6f7;    /* Light gray - secondary background */
  --surface-glass: rgba(139, 187, 241, 0.6);  /* Translucent deep blue glass */
  --surface-glass-light: rgba(30, 58, 95, 0.4);  /* Lighter translucent blue */
  
  /* Text Colors */
  --text-900: #1e3a5f;       /* Navy - primary text */
  --text-700: #4a5568;        /* Dark gray - secondary text */
  --text-500: #718096;        /* Medium gray - tertiary text */
  
  /* Border Colors */
  --border-200: #e2e8f0;      /* Light border */
  --border-300: #cbd5e0;      /* Medium border */
  
  /* ============================================
     Semantic Color Tokens
     ============================================ */
  
  /* Backgrounds */
  --bg: var(--surface-50);                    /* Primary background */
  --surface: var(--surface-0);                /* Card/surface background */
  --surface-alt: var(--surface-100);          /* Alternate surface */
  
  /* Text */
  --text: var(--text-900);                    /* Primary text */
  --muted: var(--text-700);                   /* Muted/secondary text */
  
  /* Borders */
  --border: var(--border-200);                /* Default border */
  
  /* Brand Colors */
  --primary: var(--navy-900);                /* Primary brand color (navy) */
  --primary-dark: var(--navy-700);            /* Primary dark variant */
  --primary-light: var(--navy-500);           /* Primary light variant */
  --accent: var(--copper-600);                /* Accent color (copper) */
  --accent-dark: var(--copper-500);           /* Accent dark variant */
  --accent-light: var(--copper-300);          /* Accent light variant */
  
  /* CTA & Interactive */
  --cta-bg: var(--navy-900);                  /* CTA background */
  --cta-text: var(--surface-0);               /* CTA text */
  --link: var(--navy-900);                    /* Link color */
  --link-hover: var(--copper-600);            /* Link hover (copper accent) */
  --focus-ring: var(--copper-600);            /* Focus ring (copper for visibility) */
  
  /* Legacy Support (mapped to new tokens) */
  --color-primary: var(--primary);
  --color-primary-dark: var(--primary-dark);
  --color-primary-light: var(--primary-light);
  --color-accent: var(--accent);
  --color-accent-dark: var(--accent-dark);
  --color-accent-light: var(--accent-light);
  
  --color-bg-primary: var(--bg);
  --color-bg-secondary: var(--surface-alt);
  --color-bg-tertiary: var(--navy-900);
  --color-bg-overlay: rgba(30, 58, 95, 0.85); /* Navy overlay */
  
  --color-text-primary: var(--text);
  --color-text-secondary: var(--muted);
  --color-text-tertiary: var(--text-500);
  --color-text-inverse: var(--surface-0);
  
  --color-border: var(--border);
  --color-border-dark: var(--border-300);
  
  /* Status Colors (refined) */
  --color-success: #10b981;
  --color-error: #dc2626;  /* Refined red */
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
  
  /* Typography - Fluid with clamp() */
  --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  
  --font-size-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);    /* 11px - 12px */
  --font-size-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);  /* 13px - 14px */
  --font-size-base: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);      /* 15px - 16px */
  --font-size-lg: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);         /* 16px - 18px */
  --font-size-xl: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);     /* 18px - 20px */
  --font-size-2xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);      /* 20px - 24px */
  --font-size-3xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);   /* 24px - 30px */
  --font-size-4xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);   /* 30px - 36px */
  --font-size-5xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);        /* 36px - 48px */
  --font-size-6xl: clamp(2.75rem, 2.2rem + 2.75vw, 3.75rem);    /* 44px - 60px */
  
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;
  
  /* Spacing - Responsive with clamp() */
  --spacing-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.25rem);      /* 4px */
  --spacing-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.5rem);        /* 8px */
  --spacing-md: clamp(0.875rem, 0.75rem + 0.625vw, 1rem);    /* 14px - 16px */
  --spacing-lg: clamp(1.25rem, 1rem + 1.25vw, 1.5rem);       /* 20px - 24px */
  --spacing-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);       /* 24px - 32px */
  --spacing-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);          /* 32px - 48px */
  --spacing-3xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);          /* 40px - 64px */
  --spacing-4xl: clamp(3rem, 2.5rem + 2.5vw, 6rem);          /* 48px - 96px */
  --spacing-5xl: clamp(4rem, 3rem + 5vw, 8rem);              /* 64px - 128px */
  
  /* Layout */
  --container-max-width: 1280px;
  --container-padding: clamp(1rem, 0.75rem + 1.25vw, 2rem);  /* Responsive padding */
  --section-padding-y: clamp(3rem, 2rem + 5vw, 6rem);       /* Responsive section padding */
  
  /* Header Design Tokens - Luxury Real Estate Glassmorphism */
  --header-bg: #1e3a5fbf;  /* Deep navy with glass effect */
  --header-bg-scrolled: rgba(30, 58, 95, 0.9);  /* More opaque on scroll */
  --header-border: transparent;
  --header-text: rgba(255, 255, 255, 0.95);  /* White text on navy */
  --header-text-hover: var(--copper-500);   /* Bright radiant copper on hover */
  --header-accent: var(--copper-600);       /* Copper for active indicator */
  --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  --header-shadow-scrolled: 0 8px 30px rgba(0, 0, 0, 0.3);
  --header-copper-line: linear-gradient(90deg, transparent 0%, var(--copper-luminous) 20%, var(--copper-600) 50%, var(--copper-luminous) 80%, transparent 100%);
  --header-copper-line-glow: 0 0 15px var(--copper-glow), 0 0 30px rgba(232, 168, 85, 0.4);
  --header-radius: 0;
  --header-height: clamp(70px, 5vw + 60px, 80px);
  --header-padding-x: clamp(1.5rem, 1rem + 2vw, 3rem);
  
  /* Logo size caps - prevents header from growing */
  --logo-cap-desktop: calc(var(--header-height) - 10px);
  --logo-cap-mobile: calc(var(--header-height) - 8px);
  
  /* Glassmorphism Tokens */
  --glass-bg: rgba(30, 58, 95, 0.4);
  --glass-bg-light: rgba(30, 58, 95, 0.25);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: blur(20px) saturate(180%);
  --glass-blur-light: blur(10px) saturate(150%);
  
  /* Border Radius */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-full: 20px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(30, 58, 95, 0.05);  /* Navy-tinted soft shadow */
  --shadow-md: 0 4px 6px -1px rgba(30, 58, 95, 0.1), 0 2px 4px -1px rgba(30, 58, 95, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(30, 58, 95, 0.1), 0 4px 6px -2px rgba(30, 58, 95, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(30, 58, 95, 0.1), 0 10px 10px -5px rgba(30, 58, 95, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(30, 58, 95, 0.25);
  --shadow-soft: 0 2px 8px rgba(30, 58, 95, 0.08);  /* Soft shadow for cards */
  --shadow-copper: 0 4px 20px var(--copper-glow), 0 0 30px rgba(232, 168, 85, 0.3);  /* Copper glow shadow */
  --shadow-copper-intense: 0 6px 30px var(--copper-glow), 0 0 40px rgba(232, 168, 85, 0.4);  /* Intense copper glow */
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease-in-out;
  --transition-slow: 500ms ease-in-out;
  
  /* Z-index Layers */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-modal-backdrop: 1030;
  --z-modal: 1040;
  --z-toast: 1050;
  --z-back-to-top: 1060;
}

/* ============================================
   Typography
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  margin-bottom: clamp(0.875rem, 0.75rem + 0.625vw, 1rem);
}

h1 {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
}

h2 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
}

h3 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
}

h4 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}

h5 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

h6 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

p {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-secondary);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

a {
  color: #fff3f3;
  text-decoration: none;
  transition: color var(--transition-fast);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

a:hover,
a:focus {
  color: var(--link-hover);  /* Copper on hover */
}

a:focus-visible {
  outline: 2px solid var(--focus-ring);  /* Copper focus ring */
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Lists */
ul, ol {
  list-style: none;
}

/* Images - Fully Responsive */
img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent images from causing overflow */
img[src],
img[style*="background"],
video[src] {
  max-width: 100%;
  height: auto;
}

/* SVG should scale properly */
svg {
  max-width: 100%;
  height: auto;
}

/* Form Elements */
input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  align-items: center;
  margin: auto;
}

button:focus-visible {
  outline: 2px solid var(--focus-ring);  /* Copper focus ring */
  outline-offset: 2px;
}

/* Accessibility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--primary);
  color: var(--color-text-inverse);
  padding: var(--spacing-sm) var(--spacing-md);
  z-index: var(--z-toast);
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* Selection */
::selection {
  background-color: var(--accent-light);  /* Light copper selection */
  color: var(--text);
}



/* ============================================
   *****************************************************************************************************************
   ============================================ */