/* -----------------------------------------------------------------------------
  IMPORTS & VARIABLES
----------------------------------------------------------------------------- */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Source+Sans+Pro:wght@400;600&family=Work+Sans:wght@400;600&display=swap');
/* → Loads three fonts from Google Fonts to use across the site */

/* CSS Variables */
:root {
  /* --- COLOR PALETTE --- */
  --nyc-pink: #FFB6C1; /* Used for backgrounds, buttons, highlights */
  --nyc-navy: #001B2E;       /* Primary text color, header/footer */
  --nyc-white: #FFFFFF;      /* Backgrounds, modal, event tiles */
  --nyc-light-pink: #ffe2e7; /* Used for backgrounds, buttons, highlights */
  --nyc-fuschia: #D81E5B;    /* Accent, links, badges, focus */
  --nyc-light-blue: #e3f2fd; /* Calendar highlight, hover, backgrounds */
  --nyc-blue: #1976d2;       /* Calendar '+N more' link, secondary accent */
  --nyc-light-green: #A1C7B6;/* Success messages */
  --nyc-light-gray: #F5F5F5; /* Calendar, backgrounds, alt sections */
  --nyc-medium-gray: #B0B0B0;/* Borders, muted text */
  --nyc-charcoal: #2E2E2E;   /* Rare, for deep contrast */
  --nyc-overlay: rgba(0, 0, 0, 0.5); /* Overlay for hero, modals, etc. */

  /* --- SPACING SCALE --- */
  --space-xxxl: 256px;
  --space-xxl: 192px;
  --space-xl: 128px;
  --space-lg: 64px;
  --space-md: 32px;
  --space-sm-md: 24px;
  --space-sm: 16px;
  --space-xs: 8px;
  --space-xxs: 4px;
  --space-xxxs: 2px;

  /* --- FONT SIZES --- */
  --font-xxxl: 48px; /* hero h1 */
  --font-xxl: 40px; /* h1 */
  --font-xl: 32px;  /* h2 */
  --font-lg: 28px;  /* h3 */
  --font-md: 24px;
  --font-md-sm: 20px; /* nav, collapsible menu */
  --font-sm: 16px;  /* body, p, ul, ol, small text, etc. */
  --font-xs-sm: 12px; /* Small font for responsive buttons/labels */
  --font-xs: 8px;

  /* --- FONT WEIGHTS --- */
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* --- BOX SHADOWS --- */
  --shadow-xs: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.10);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-xl: 0 4px 16px rgba(0,0,0,0.20);

  /* --- BORDER RADII --- */
  --radius-xs: 4px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-round: 50%;
  --radius-pill: 999px;

  /* --- CONTAINER WIDTHS --- */
  --container-max-width: 1200px;
  --container-width: 90%;
  --section-max-width: 900px;
}

/* -----------------------------------------------------------------------------
  RESET & BASE
----------------------------------------------------------------------------- */

/* Reset all elements to box-sizing: border-box and remove default margin/padding */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  font-family: 'Work Sans', 'Arial', sans-serif;
  color: var(--nyc-navy);
  background-color: var(--nyc-white);
  line-height: 1.6;
}

/* -----------------------------------------------------------------------------
  TYPOGRAPHY
----------------------------------------------------------------------------- */

/* Headings use Montserrat/Work Sans, body uses Work Sans */
h1 {
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: var(--font-xxl, 40px); /* Use variable, fallback to px */
  font-weight: var(--font-weight-bold);
  color: var(--nyc-navy);
}
h2, h3 {
  font-family: 'Work Sans', 'Arial', sans-serif;
}
h2 {
  font-size: var(--font-xl, 32px);
  font-weight: var(--font-weight-bold);
  color: var(--nyc-navy);
}
h3 {
  font-size: var(--font-lg, 28px);
  font-weight: var(--font-weight-bold);
  color: var(--nyc-navy);
}
p, ul, ol {
  font-size: var(--font-sm, 16px);
  font-weight: var(--font-weight-regular);
  color: var(--nyc-navy);
  margin-bottom: var(--space-sm);
}
.modal-content p, .event-text p {
  font-family: 'Work Sans', 'Arial', sans-serif;
}
.modal-content h2, .event-text h3 {
  font-family: 'Work Sans', 'Arial', sans-serif;
}

/* -----------------------------------------------------------------------------
  UTILITIES
----------------------------------------------------------------------------- */

/* Utility classes can be added here as needed (e.g., .text-center, .mb-sm, etc.) */

/* Remove any loading/hiding CSS for main content */