/* === BRAND COLOR VARIABLES === */
:root {
  --brand-primary: #ffd166;           /* Warm yellow (main brand color) */
  --brand-secondary: #ffb347;         /* Warm orange (secondary brand color) */
  --brand-gradient-start: #ffd166;    /* Gradient start for text (warm yellow) */
  --brand-gradient-end: #f68031;      /* Gradient end for text (warm orange) */
  --card-glow-color: #ffb24700;       /* Subtle warm orange glow */
  --hero-gradient-start: #000000;     /* Cosmic dark start */
  --hero-gradient-end: #000000;       /* Cosmic dark end */
  --brand-glow-light: rgba(255,209,102,0.35);   /* Warm yellow glow light */
  --brand-glow-dark: rgba(255,179,71,0.15);     /* Warm orange glow dark */
  --brand-glow-global: rgba(255,209,102,0.10);  /* Global warm yellow glow */
  --brand-glow-enhanced: rgba(255,179,71,0.18); /* Enhanced warm orange glow */
  --brand-btn-bg: #ffd166;
  --brand-btn-text: #000;
  --brand-btn-border: #ffd166;
  --brand-btn-hover-bg: #ffb347;
  --brand-btn-hover-text: #000;
  --star-gradient-start: #fffbe6; /* Warm white/yellow for stars */
  --star-gradient-end: #ffb347;   /* Warm orange for stars */
  --star-size: 2;               /* Controls the radius of stars in the hero section */
  --astrolabe-stroke-width: 2.5;   /* Astrolabe line width */
  --astrolabe-icon-size: 340px; /* Controls both width and max-width */
  
  /* === RESPONSIVE FONT SIZES === */
  /* These scale proportionally based on viewport width using clamp(min, preferred, max) */
  --font-size-xs: clamp(0.75rem, 2vw, 0.875rem);      /* Extra small text */
  --font-size-sm: clamp(0.875rem, 2.5vw, 1rem);       /* Small text (descriptions) */
  --font-size-base: clamp(1rem, 2.5vw, 1.125rem);     /* Base text */
  --font-size-lg: clamp(1.125rem, 3vw, 1.3rem);       /* Large text (card titles) */
  --font-size-xl: clamp(1.25rem, 3.5vw, 1.5rem);      /* Extra large (subheadings) */
  --font-size-2xl: clamp(1.5rem, 4vw, 2rem);          /* 2x large */
  --font-size-3xl: clamp(2rem, 5vw, 2.5rem);          /* 3x large (section titles) */
  --font-size-4xl: clamp(2.5rem, 6vw, 3.5rem);        /* 4x large (hero titles) */
  
  /* === ASTROLABE OVERLAY POSITIONING === */
  --astrolabe-overlay-x: 0px;     /* Horizontal position offset (negative moves left, positive moves right) */
  --astrolabe-overlay-y: -90px;     /* Vertical position offset (negative moves up, positive moves down) */
  --astrolabe-overlay-scale: 1.0;   /* Scale factor for astrolabe overlay size */
  --astrolabe-icon-margin-top: 50px;  /* Astrolabe icon top margin */
  --astrolabe-icon-margin-bottom: 60px;  /* Astrolabe icon bottom margin */
  --hero-subheader-margin-bottom: 20px;  /* Subheader bottom margin */
  
  /* === DECORATIVE ASTROLABE POSITIONING === */
  --services-astrolabe-x: -10%;         /* Services astrolabe horizontal position */
  --services-astrolabe-y: -20%;         /* Services astrolabe vertical position */
  --services-astrolabe-size: 1000px;    /* Services astrolabe size */
  --services-astrolabe-opacity: 0.10;   /* Services astrolabe opacity */
  --about-astrolabe-x: -25%;           /* About astrolabe horizontal position */
  --about-astrolabe-y: -60%;            /* About astrolabe vertical position - centered on title */
  --about-astrolabe-size: 700px;       /* About astrolabe size */
  --about-astrolabe-opacity: 0.12;      /* About astrolabe opacity */
  /* === CONTAINER PADDING VARIABLES === */
  --container-padding-desktop: 1.5rem;  /* Reduced for more card width on desktop */
  --container-padding-tablet: 2.5rem;
  --container-padding-mobile: 2rem;
  --container-padding-xs: 1.2rem;
  --featured-gradient-start: rgba(0,0,0,0);   /* transparent black */
  --featured-gradient-end: rgba(0, 0, 0, 0.895);   /* 70% transparent black */
  
  --hero-radial-center-x: 50%;           /* Radial gradient center X */
  --hero-radial-center-y: 20%;           /* Radial gradient center Y */
  --hero-radial-color: rgba(183, 108, 2, 0.533); /* Radial gradient color */
  --hero-radial-fade-color: rgba(174, 0, 255, 0.11);     /* Radial gradient fade color */
  --hero-radial-fade-stop: 60%;                /* Radial gradient fade stop */
  --hero-linear-fade-color: rgba(0,0,0,0);     /* Linear gradient fade color */
  --hero-linear-end-color: #000;               /* Linear gradient end color */
  --hero-linear-fade-stop: 60%;                /* Linear gradient fade stop */
  --hero-linear-end-stop: 100%;   
  --bs-border-color: rgba(255, 255, 255, 0.169);  /* Bootstrap border color */
  
  /* === VIDEO START FRAME SETTINGS === */
  /* Time in seconds to start each video (Frame number ÷ FPS = seconds) */
  /* Example: Frame 20 at 30fps = 0.67 seconds, Frame 45 at 30fps = 1.5 seconds */
  --video-start-project-1: 6.67;   /* Project 1 video start time (Frame 20 at 30fps) */
  --video-start-project-2: 5.00;   /* Project 2 video start time (Frame 20 at 30fps) */
  --video-start-project-3: 3.67;   /* Project 3 video start time (Frame 20 at 30fps) */
  --video-start-project-4: 0.00;   /* Project 4 video start time (Frame 20 at 30fps) */
  --video-start-project-5: 14.3;   /* Project 5 video start time (Frame 20 at 30fps) */
  --video-start-project-6: 5.3;   /* Project 6 video start time (Frame 20 at 30fps) */
  --video-start-project-7: 12.7;   /* Project 7 video start time (Frame 20 at 30fps) */
  --video-start-project-8: 1.67;   /* Project 8 video start time (Frame 20 at 30fps) */
}

/* === RESPONSIVE ASTROLABE & DECORATIVE VARIABLES === */
/* Keep variable overrides centralized here so changing variables.css affects all breakpoints */
@media (max-width: 767px) {
  :root {
    /* Keep mobile slightly bigger for better visual presence */
    --astrolabe-icon-size: 160px;
    --astrolabe-icon-margin-top: 1.25rem;
    --astrolabe-icon-margin-bottom: 1.5rem;
    --astrolabe-overlay-x: 0px;
    --astrolabe-overlay-y: -75px;
    --services-astrolabe-size: 640px;
    --about-astrolabe-size: 460px;
    --about-astrolabe-y: -60%;  /* Centered on section title */
    --hero-subheader-margin-bottom: 1.5rem;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  :root {
    /* Small tablet: keep astrolabe higher to stay centered on title */
    --astrolabe-icon-size: 240px;
    --astrolabe-icon-margin-top: 48px;
    --astrolabe-icon-margin-bottom: 48px;
    --astrolabe-overlay-x: 0px;
    --astrolabe-overlay-y: -105px;
    --services-astrolabe-size: 880px;
    --about-astrolabe-size: 640px;
    --about-astrolabe-y: -60%;  /* Centered on section title (699-899px) */
    --hero-subheader-margin-bottom: 2rem;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  :root {
    /* Larger tablet: perfect positioning around title */
    --astrolabe-icon-size: 240px;
    --astrolabe-icon-margin-top: 48px;
    --astrolabe-icon-margin-bottom: 48px;
    --astrolabe-overlay-x: 0px;
    --astrolabe-overlay-y: -105px;
    --services-astrolabe-size: 880px;
    --about-astrolabe-size: 640px;
    --about-astrolabe-y: -60%;  /* Centered on section title (862-915px range) */
    --hero-subheader-margin-bottom: 2rem;
  }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  :root {
    /* Desktop (narrow): continue gradual scaling */
    --astrolabe-icon-size: 300px;
    --astrolabe-icon-margin-top: 64px;
    --astrolabe-icon-margin-bottom: 60px;
    --astrolabe-overlay-x: 0px;
    --astrolabe-overlay-y: -110px;
    --services-astrolabe-size: 1040px;
    --about-astrolabe-size: 760px;
    --about-astrolabe-y: -75%;  /* Centered on section title (1481px range - moved up) */
    --hero-subheader-margin-bottom: 3rem;
  }
}

@media (min-width: 1600px) {
  :root {
    /* Extra wide / 4k screens keep the larger default we set earlier */
    --astrolabe-icon-size: 340px;
    --astrolabe-icon-margin-top: 60px;
    --astrolabe-icon-margin-bottom: 60px;
    --astrolabe-overlay-x: 0px;
    --astrolabe-overlay-y: -125px;
    --astrolabe-overlay-scale: 1.06;  /* Make overlay slightly bigger on large screens */
    --services-astrolabe-size: 1200px;
    --about-astrolabe-size: 900px;
    --about-astrolabe-y: -80%;  /* Centered on section title for large screens (1600px+) */
    --about-astrolabe-opacity: 0.15;  /* Much more transparent (1/3 of default 0.12) */
    --hero-subheader-margin-bottom: 3.5rem;
  }
}