/* ============================================
   FTC Team 19098 - Eastern Foxes
   Color Palette Configuration
   ============================================
   Replace the estimated color values with official brand colors
   DO NOT change variable names - they are referenced throughout the codebase
   ============================================ */

/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
@import url('https://fonts.cdnfonts.com/css/nau-sea');

:root {
  /* Primary Brand Colors */
  --color-primary-orange: #FF5D24;  /* Eastern Foxes Orange - CONFIRMED */
  --color-primary-dark: #0D0704;    /* Main dark background - ESTIMATED */
  --color-primary-brown: #3D1F1C;   /* Secondary brown background - ESTIMATED */
  
  /* Background Colors */
  --color-bg-main: #0D0704;         /* Page background (darkest) - ESTIMATED */
  --color-bg-pattern: #1A0F0A;      /* Wavy pattern lines - ESTIMATED */
  --color-bg-card: #4A2420;         /* Team member cards background - ESTIMATED */
  --color-bg-card-hover: #5A3430;   /* Card hover state - ESTIMATED */
  --color-bg-section: #2D1815;      /* Section backgrounds - ESTIMATED */
  
  /* Text Colors */
  --color-text-primary: #FFFFFF;    /* Main text (white) - CONFIRMED from design */
  --color-text-secondary: #B8B8B8;  /* Secondary text (gray) - ESTIMATED */
  --color-text-accent: #FF5D24;     /* Accent text (orange) - CONFIRMED */
  --color-text-dark: #0D0704;       /* Dark text for light backgrounds - ESTIMATED */
  
  /* Navigation Colors */
  --color-nav-bg: rgba(13, 7, 4, 0.95);  /* Navigation background with transparency - ESTIMATED */
  --color-nav-text: #FFFFFF;        /* Navigation text - CONFIRMED */
  --color-nav-hover: #FF5D24;       /* Navigation hover state - CONFIRMED */
  --color-nav-active: #FF5D24;      /* Active navigation item - CONFIRMED */
  
  /* Button Colors */
  --color-btn-primary: #FF5D24;     /* Primary button background - CONFIRMED */
  --color-btn-primary-hover: #CC3D0F; /* Primary button hover - much darker orange for excellent contrast */
  --color-btn-text: #FFFFFF;        /* Button text - CONFIRMED */
  --color-btn-border: #FF5D24;      /* Button border - CONFIRMED */
  
  /* Award Medal Colors */
  --color-medal-gold: #FFD700;      /* Gold/World Championship - STANDARD */
  --color-medal-silver: #C0C0C0;    /* Silver/Nationals - STANDARD */
  --color-medal-bronze: #CD7F32;    /* Bronze/Regionals - STANDARD */
  
  /* Award Background Colors */
  --color-award-worlds: #570B37;    /* Purple for Worlds - ESTIMATED */
  --color-award-mti: #0A0F3A;
  --color-award-nationals: #69181D; /* Red for Nationals - ESTIMATED */
  --color-award-regionals: #0F3F2C; /* Green for Regionals - ESTIMATED */

  /* Team Role Colors */
  --PR_COLOR: #C8D96F;              /* Lemon yellow-green for PR - USER TO UPDATE */
  --CONSTRUCTION_COLOR: #2C4F7C;    /* Navy blue for Construction - USER TO UPDATE */
  --PROGRAMMING_COLOR: #6B9F78;     /* Cactus green for Programming - USER TO UPDATE */
  --ALUMNI_COLOR: #D4886C;          /* Pale orange for Alumni - USER TO UPDATE */
  --MENTOR_COLOR: #FFD700;          /* Bold yellow for Mentors - USER TO UPDATE */
  --VOLUNTEER_COLOR: #808080;       /* Medium gray for Volunteers - USER TO UPDATE */
  
  /* Utility Colors */
  --color-border: rgba(255, 93, 36, 0.2); /* Default border color - ESTIMATED */
  --color-shadow: rgba(0, 0, 0, 0.5);     /* Shadow color with opacity - STANDARD */
  --color-overlay: rgba(13, 7, 4, 0.9);   /* Modal/overlay background - ESTIMATED */
  
  /* Social Media Brand Colors (for hover states) */
  --color-social-facebook: #1877F2;  /* Facebook blue - STANDARD */
  --color-social-instagram: #E4405F; /* Instagram gradient start - STANDARD */
  --color-social-youtube: #FF0000;   /* YouTube red - STANDARD */
  --color-social-linkedin: #0A66C2;  /* LinkedIn blue - STANDARD */
  --color-social-tiktok: #000000;    /* TikTok black - STANDARD */
}

/* Typography Scale */
:root {
  /* Font Families - 3-Tier Hierarchy */
  --font-3d-titles: 'Nau Sea', 'Impact', sans-serif;    /* For main 3D titles with shadow effect */
  --font-headers: 'Bebas Neue', 'Impact', sans-serif;   /* For section headers */
  --font-body: 'Montserrat', sans-serif;                /* For all body text and descriptions */

  /* Legacy variables for backward compatibility */
  --font-primary: 'Montserrat', sans-serif;             /* Now points to body font */
  --font-heading: 'Bebas Neue', 'Impact', sans-serif;   /* Section headers */
  --font-mono: 'Courier New', monospace;                /* For numbers/codes if needed */
  
  /* Font Sizes - Based on visual hierarchy in PDF */
  --size-h1: 72px;                  /* Main "EASTERN FOXES" heading - ESTIMATED */
  --size-h2: 48px;                  /* Section headings like "OUR TEAM" - ESTIMATED */
  --size-h3: 32px;                  /* Sub-section headings - ESTIMATED */
  --size-h4: 24px;                  /* Card headings/member names - ESTIMATED */
  --size-paragraph: 16px;           /* Body text/Lorem ipsum - ESTIMATED */
  --size-small: 14px;               /* Small text/captions/roles - ESTIMATED */
  --size-nav: 16px;                 /* Navigation text - ESTIMATED */
  --size-button: 18px;              /* Button text - ESTIMATED */
  
  /* Font Weights */
  --weight-light: 300;              /* Light weight */
  --weight-regular: 400;            /* Regular weight */
  --weight-medium: 500;             /* Medium weight */
  --weight-bold: 700;               /* Bold weight - PRIMARY IN DESIGN */
  --weight-black: 900;              /* Black/Heavy weight for main titles */
  
  /* Line Heights */
  --line-height-tight: 1.1;         /* Tight line height for headings */
  --line-height-normal: 1.6;        /* Normal line height for body */
  --line-height-relaxed: 1.8;       /* Relaxed line height for readability */
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;  /* Tight letter spacing */
  --letter-spacing-normal: 0;       /* Normal letter spacing */
  --letter-spacing-wide: 0.05em;     /* Wide letter spacing for emphasis - USED IN HEADINGS */
}

/* Spacing Scale - Based on visual rhythm in PDF */
:root {
  --space-xs: 4px;                  /* Extra small spacing */
  --space-sm: 8px;                  /* Small spacing */
  --space-md: 16px;                 /* Medium spacing - STANDARD GAP */
  --space-lg: 24px;                 /* Large spacing */
  --space-xl: 32px;                 /* Extra large spacing */
  --space-2xl: 48px;                /* 2X large spacing - SECTION GAPS */
  --space-3xl: 64px;                /* 3X large spacing - PAGE SECTIONS */
}

/* Breakpoints - Standard responsive design points */
:root {
  --breakpoint-mobile: 768px;       /* Mobile breakpoint - STANDARD */
  --breakpoint-tablet: 1024px;      /* Tablet breakpoint - STANDARD */
  --breakpoint-desktop: 1200px;     /* Desktop breakpoint - STANDARD */
  --breakpoint-wide: 1440px;        /* Wide screen breakpoint - STANDARD */
}

/* Shadows - Based on elevation hierarchy in design */
:root {
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);           /* Small shadow - CARDS */
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);           /* Medium shadow - NAV */
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);          /* Large shadow - HOVER */
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.5);         /* Extra large shadow */
  --shadow-glow: 0 0 20px rgba(255, 93, 36, 0.4);      /* Orange glow for special hover */
}

/* Transitions - Smooth animation timings */
:root {
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);    /* Fast transition */
  --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* Normal transition - PRIMARY */
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);    /* Slow transition */
}

/* Border Radius - Pixel values for consistent rounding */
:root {
  --radius-sm: 6px;                 /* Small border radius */
  --radius-md: 10px;                /* Medium border radius - CARDS */
  --radius-lg: 15px;                /* Large border radius - BUTTONS */
  --radius-xl: 24px;                /* Extra large border radius - AWARDS */
  --radius-2xl: 36px;               /* 2XL border radius - TEAM CARDS */
  --radius-3xl: 48px;               /* 3XL border radius */
  --radius-full: 50%;               /* Full border radius (circle) - PROFILE PICS */
}