/**
 * CSS Custom Properties (Variables)
 * Centralized design tokens for consistent theming
 */

:root {
  /* Primary Colors */
  --color-primary-gold: #FAD24D;
  --color-primary-gold-dark: #d4a017;
  --color-primary-gold-darker: #b8860b;

  /* Text Colors */
  --color-text-dark: #212529;
  --color-text-muted: #495057;
  --color-text-light: #6c757d;

  /* Background Colors */
  --color-bg-white: #ffffff;
  --color-bg-light: #f8f9fa;
  --color-bg-lighter: #f5f5f5;
  --color-bg-overlay: rgba(0, 0, 0, 0.85);

  /* Border Colors */
  --color-border-light: #e0e0e0;
  --color-border-lighter: #e9ecef;
  --color-border-lightest: #f0f0f0;
  --color-border-dark: #dee2e6;

  /* Gradients */
  --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-pink: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-blue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --gradient-green: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --gradient-yellow: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --gradient-dark: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
  --gradient-line: linear-gradient(to bottom, #e0e0e0 0%, #e0e0e0 100%);

  /* Shadows */
  --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(250, 210, 77, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 28px rgba(0, 0, 0, 0.15);
  --shadow-primary: 0 4px 15px rgba(13, 110, 253, 0.3);
  --shadow-primary-hover: 0 6px 20px rgba(13, 110, 253, 0.4);

  /* Transitions */
  --transition-fast: all 0.2s ease;
  --transition-base: all 0.3s ease;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;

  /* Border Radius */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 50px;
  --radius-circle: 50%;

  /* Font Sizes */
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.85rem;
  --font-size-md: 0.9rem;
  --font-size-lg: 0.95rem;
  --font-size-xl: 1rem;
  --font-size-2xl: 1.1rem;
  --font-size-3xl: 1.2rem;
  --font-size-4xl: 1.25rem;
  --font-size-5xl: 1.4rem;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.4;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.7;

  /* Z-index layers */
  --z-index-base: 1;
  --z-index-overlay: 2;
  --z-index-modal: 1000;

  /* Icon Sizes */
  --icon-size-sm: 40px;
  --icon-size-md: 48px;
  --icon-size-lg: 60px;

  /* Card/Component Sizes */
  --card-padding: 24px;
  --card-padding-sm: 16px;
  --portfolio-image-height: 220px;
  --portfolio-image-height-sm: 180px;

  /* Timeline Specific */
  --timeline-line-left: 30px;
  --timeline-line-left-mobile: 20px;
  --timeline-line-width: 2px;
  --timeline-item-padding-left: 80px;
  --timeline-item-padding-left-mobile: 60px;
  --timeline-item-padding-bottom: 40px;
  --timeline-icon-border-width: 3px;
  --timeline-icon-border-width-mobile: 2px;
  --timeline-icon-font-size: 24px;
  --timeline-icon-font-size-mobile: 16px;
  --timeline-img-size-mobile: 32px;
  --timeline-letter-spacing: 0.5px;
  --timeline-date-padding-mobile: 4px;
  --timeline-hover-translate: -4px;
  --timeline-border-width: 2px;
  --timeline-project-border-width: 2px;
  --timeline-project-padding-bottom: 4px;

  /* Modal Specific */
  --modal-overlay-opacity: 0.6;
  --modal-z-index: 10000;
  --modal-animation-fade: 0.3s;
  --modal-animation-slide: 0.4s;
  --modal-max-width: 900px;
  --modal-max-height: 90vh;
  --modal-max-height-mobile: 95vh;
  --modal-close-btn-size: 36px;
  --modal-close-btn-font-size: 24px;
  --modal-close-rotate: 90deg;
  --modal-calendly-height: 700px;
  --modal-calendly-height-mobile: 600px;
  --modal-calendly-height-xs: 500px;
  --modal-resume-height: 600px;
  --modal-resume-height-mobile: 500px;
  --modal-resume-height-xs: 400px;
  --modal-loading-font-size: 1.2rem;
  --modal-loading-icon-size: 2rem;
  --modal-spin-duration: 1s;
  --modal-btn-min-width: 150px;
  --modal-btn-min-width-mobile: 130px;
  --modal-padding-mobile: 10px;
  --modal-slide-translate: 30px;

  /* Portfolio Specific */
  --portfolio-hover-translate: -8px;
  --portfolio-image-scale: 1.1;
  --portfolio-link-size: 50px;
  --portfolio-link-size-mobile: 45px;
  --portfolio-link-font-size: 1.2rem;
  --portfolio-link-font-size-mobile: 1rem;
  --portfolio-link-translate-initial: 20px;
  --portfolio-link-hover-scale: 1.15;
  --portfolio-link-hover-rotate: 5deg;
  --portfolio-title-min-height: 2.8rem;
  --portfolio-badge-padding-y: 4px;
  --portfolio-badge-padding-y-mobile: 3px;
  --portfolio-badge-padding-x-mobile: 10px;
  --portfolio-badge-shadow-opacity: 0.4;
  --portfolio-stat-icon-size: 1.1rem;
  --portfolio-animation-duration: 0.6s;
  --portfolio-animation-delay-1: 0.1s;
  --portfolio-animation-delay-2: 0.2s;
  --portfolio-animation-delay-3: 0.3s;
  --portfolio-animation-delay-4: 0.4s;
  --portfolio-animation-delay-5: 0.5s;
  --portfolio-animation-delay-6: 0.6s;
  --portfolio-fadeup-translate: 30px;
  --portfolio-btn-padding-y: 14px;
  --portfolio-btn-hover-translate: -3px;
  --portfolio-badge-hover-translate: -2px;

  /* Main/General Layout */
  --scroll-margin-top: 2rem;
  --site-title-font-size: 1.5rem;
  --site-title-line-height: 3rem;
  --social-nav-padding: 0.5rem;
  --social-nav-font-size: 1.1rem;
  --social-nav-line-height: 2.5rem;
  --wave-bg-height: 220px;
  --wave-bg-min-width: 600px;
  --wave-animation-duration: 2000ms;
  --avatar-border-radius: 30px;
  --grid-item-width: 25%;
  --grid-item-padding: 6px;
  --grid-item-padding-bottom: 12px;
  --figcaption-padding: 12px;
  --figcaption-font-size: 16px;
  --figcaption-margin-bottom: 3px;
  --figcaption-p-font-size: 14px;
  --scroll-top-padding-y: 3px;
  --scroll-top-padding-x: 11px;
  --container-narrow-max-width: 1024px;
  --text-small-font-size: 0.875rem;
  --text-uppercase-letter-spacing: 0.05em;
  --hover-effect-duration: 0.18s;
  --hover-effect-translate: -2px;
  --marker-width: 125px;
  --marker-height: 30px;
  --marker-bottom: -25px;
  --marker-bottom-alt: -30px;
  --marker-right: -30px;
  --marker-margin-left: -60px;
}

/* ========================================
   DARK THEME OVERRIDES
   ======================================== */
:root[data-theme="dark"] {
  /* Background Colors */
  --color-bg-primary: #0d1117;           /* Main page background */
  --color-bg-secondary: #161b22;         /* Elevated surfaces (cards, modals) */
  --color-bg-tertiary: #21262d;          /* Further elevated (hover states) */
  --color-bg-light: #161b22;             /* Replaces light gray sections */
  --color-bg-white: #0d1117;             /* Replaces white backgrounds */
  --color-bg-lighter: #1c2128;           /* Subtle variation */
  --color-bg-overlay: rgba(1, 4, 9, 0.85); /* Dark modal overlay */

  /* Text Colors */
  --color-text-primary: #c9d1d9;         /* Main body text */
  --color-text-secondary: #8b949e;       /* Secondary/muted text */
  --color-text-tertiary: #6e7681;        /* Disabled/placeholder text */
  --color-text-heading: #f0f6fc;         /* H1-H6 headings */
  --color-text-dark: #c9d1d9;            /* Replaces dark text */
  --color-text-muted: #8b949e;           /* Replaces muted text */
  --color-text-light: #6e7681;           /* Replaces light text */

  /* Brand Colors - Gold accent adjusted for dark mode */
  --color-primary-gold: #f0c24a;         /* Slightly desaturated gold */
  --color-primary-gold-dark: #d4a93a;    /* Darker gold */
  --color-primary-gold-darker: #b8921f;  /* Even darker gold */

  /* Border Colors */
  --color-border-primary: #30363d;       /* Primary borders */
  --color-border-secondary: #21262d;     /* Subtle borders */
  --color-border-muted: #3d444d;         /* Hover/active borders */
  --color-border-light: #30363d;         /* Replaces light borders */
  --color-border-lighter: #21262d;       /* Replaces lighter borders */
  --color-border-lightest: #1c2128;      /* Replaces lightest borders */
  --color-border-dark: #3d444d;          /* Replaces dark borders */

  /* Shadows - subtle glows for dark mode */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.7);
  --shadow-primary: 0 4px 15px rgba(240, 194, 74, 0.2);
  --shadow-primary-hover: 0 6px 20px rgba(240, 194, 74, 0.3);

  /* Gradients - adapted for dark backgrounds */
  --gradient-purple: linear-gradient(135deg, #6e5494 0%, #4a3072 100%);
  --gradient-pink: linear-gradient(135deg, #d946a6 0%, #9f2d7a 100%);
  --gradient-blue: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  --gradient-green: linear-gradient(135deg, #10b981 0%, #047857 100%);
  --gradient-yellow: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --gradient-dark: linear-gradient(135deg, #475569 0%, #1e293b 100%);
  --gradient-line: linear-gradient(to bottom, #30363d 0%, #30363d 100%);

  /* Link Colors - Using brand gold for consistency */
  --color-link: #f0c24a;                 /* Primary link color (brand gold) */
  --color-link-hover: #f0d470;           /* Link hover state (lighter gold) */

  /* Button Colors - Using brand gold for consistency */
  --color-btn-primary-bg: #d4a93a;       /* Primary button background (darker gold) */
  --color-btn-primary-hover: #f0c24a;    /* Primary button hover (brand gold) */
  --color-btn-secondary-bg: #21262d;     /* Secondary button background */
  --color-btn-secondary-hover: #30363d;  /* Secondary button hover */

  /* Focus Indicators */
  --color-focus-ring: #58a6ff;           /* Keyboard focus outline */

  /* Timeline Specific */
  --timeline-line-color: #30363d;        /* Vertical timeline line */
  --timeline-node-bg: #0d1117;           /* Timeline circle background */
  --timeline-node-border: #f0c24a;       /* Gold border */

  /* Modal Specific */
  --modal-backdrop-bg: rgba(1, 4, 9, 0.85);
  --modal-content-bg: #161b22;

  /* Image Backgrounds - for transparent images */
  --image-backdrop-bg: #21262d;          /* Background for transparent images */
  --image-backdrop-border: #30363d;      /* Border for image containers */
}

/* ========================================
   THEME TRANSITIONS
   ======================================== */
* {
  transition: background-color 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* Media Query Breakpoints */
@media (max-width: 768px) {
  :root {
    --card-padding: var(--card-padding-sm);
    --portfolio-image-height: var(--portfolio-image-height-sm);
  }
}

/* Print Styles */
@media print {
  :root {
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
  }
}