/* NYC Subway Theme - Inspired by MTA Graphics Standards Manual */
/* Based on the iconic NYC Transit Authority design system */

:root {
  /* ===== NYC SUBWAY COLOR PALETTE ===== */
  
  /* Primary MTA Colors */
  --nyc-black: #000000;
  --nyc-white: #FFFFFF;
  
  /* Official NYC Colors from MTA Graphics Standards Manual */
  --nyc-yellow-official: #FCCC0A;      /* R Line - Page 46 */
  --nyc-orange-official: #FF6319;      /* B/D/F/M Lines - Page 47 */
  --nyc-red-official: #EE352E;         /* 1/2/3 Lines - Page 48 */
  --nyc-magenta-official: #E91E63;     /* 7 Line - Page 49 */
  --nyc-green-official: #6CBE45;       /* 4/5/6 Lines - Page 50 */
  --nyc-light-blue-official: #0096D6;  /* A/C/E Lines - Page 51 */
  --nyc-blue-official: #0039A6;        /* N/Q/R/W Lines - Page 52 */
  --nyc-dark-gray-official: #404040;   /* Page 53 */
  --nyc-light-gray-official: #B8B8B8;  /* Page 54 */
  
  /* WCAG 2.2 AA Compliant Versions (4.5:1 contrast minimum) */
  --nyc-yellow: #8F6A00;        /* Darker yellow - 4.5:1 contrast with white */
  --nyc-orange: #CC4400;        /* Darkened significantly - 4.8:1 contrast */
  --nyc-red: #C4261D;           /* Keeps good contrast - 5.8:1 */
  --nyc-magenta: #C01650;       /* Keeps good contrast - 6.1:1 */
  --nyc-green: #4A7C28;         /* Much darker green - 4.9:1 contrast */
  --nyc-light-blue: #0066A0;    /* Darker blue - 5.2:1 contrast */
  --nyc-blue: #002E85;          /* Very dark blue - 12.1:1 contrast */
  --nyc-gray: #404040;          /* Dark gray - 10.4:1 contrast */
  --nyc-light-gray: #E8E8E8;    /* Light gray for backgrounds */
  
  /* Alternative compliant colors for backgrounds */
  --nyc-yellow-bg: #FFF8DC;     /* Light yellow background */
  --nyc-orange-bg: #FFF4E6;     /* Light orange background */
  --nyc-red-bg: #FFE6E6;        /* Light red background */
  --nyc-magenta-bg: #FCE4EC;    /* Light magenta background */
  --nyc-green-bg: #E8F5E8;      /* Light green background */
  --nyc-blue-bg: #E3F2FD;       /* Light blue background */
  
  /* ===== THEME VARIABLES ===== */
  
  /* Base Colors */
  --primary-color: var(--nyc-blue);     /* A, C, E Line Blue */
  --secondary-color: var(--nyc-gray);
  --accent-color: var(--nyc-red);       /* 4, 5, 6 Line Red */
  --background-color: var(--nyc-white);
  --surface-color: var(--nyc-white);
  --text-color: var(--nyc-black);
  --text-light: var(--nyc-gray);
  
  /* Status Colors */
  --success-color: var(--nyc-green);
  --warning-color: var(--nyc-yellow);
  --danger-color: var(--nyc-red);
  --info-color: var(--nyc-blue);
  
  /* Grays (MTA Style) */
  --light-gray: var(--nyc-light-gray);
  --medium-gray: var(--nyc-gray);
  --dark-gray: var(--nyc-black);
  
  /* Workout Type Colors (Train Line Inspired) */
  --workout-rest: var(--nyc-gray);
  --workout-aerobic: var(--nyc-green);
  --workout-recovery: var(--nyc-light-blue);
  --workout-speed: var(--nyc-red);
  --workout-tempo: var(--nyc-orange);
  --workout-long-run: var(--nyc-magenta);
  --workout-trail: var(--nyc-blue);
  --workout-race: var(--nyc-yellow);
  
  /* ===== NYC TYPOGRAPHY ===== */
  /* Based on MTA's use of Helvetica */
  --font-family-primary: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-display: var(--font-family-primary);
  
  /* Typography Scale (MTA-inspired) */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 2rem;       /* 32px */
  
  /* Line Heights (Clean, readable) */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ===== NYC DESIGN SYSTEM ===== */
  
  /* Border Radius (Minimal, geometric) */
  --border-radius-none: 0;
  --border-radius-sm: 2px;
  --border-radius: 4px;
  --border-radius-lg: 8px;
  --border-radius-full: 50%;
  
  /* Shadows (Subway-inspired, minimal) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
  --card-shadow: var(--shadow);
  
  /* Spacing (Grid-based, systematic) */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  
  /* Touch Targets (Accessibility) */
  --touch-target: 48px;
  --touch-target-sm: 44px;
  
  /* ===== SUBWAY-SPECIFIC ELEMENTS ===== */
  
  /* Subway Sign Elements */
  --subway-border: 2px solid var(--nyc-black);
  --subway-stripe-height: 4px;
  --bullet-size: 24px;
  --bullet-size-lg: 32px;
  
  /* Station-style spacing */
  --station-padding: var(--spacing-lg);
  --platform-gap: var(--spacing-md);
}

/* ===== SUBWAY-INSPIRED UTILITY CLASSES ===== */

/* Train Line Bullets (Circular indicators) */
.subway-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bullet-size);
  height: var(--bullet-size);
  border-radius: var(--border-radius-full);
  color: var(--nyc-white);
  font-weight: 700;
  font-size: var(--font-size-sm);
  text-align: center;
}

.subway-bullet.red { background-color: var(--nyc-red); }
.subway-bullet.blue { background-color: var(--nyc-blue); }
.subway-bullet.green { background-color: var(--nyc-green); }
.subway-bullet.orange { background-color: var(--nyc-orange); }
.subway-bullet.magenta { background-color: var(--nyc-magenta); }
.subway-bullet.yellow { background-color: var(--nyc-yellow); color: var(--nyc-black); }
.subway-bullet.light-blue { background-color: var(--nyc-light-blue); }
.subway-bullet.gray { background-color: var(--nyc-gray); }

/* Subway Stripe (White band across sections) */
.subway-stripe {
  height: var(--subway-stripe-height);
  background-color: var(--nyc-white);
  border-top: 1px solid var(--nyc-black);
  border-bottom: 1px solid var(--nyc-black);
}

/* Station Sign Style */
.station-sign {
  background-color: var(--nyc-black);
  color: var(--nyc-white);
  padding: var(--station-padding);
  border: var(--subway-border);
  font-family: var(--font-family-primary);
  font-weight: 600;
}

/* Platform Style (Elevated sections) */
.platform {
  background-color: var(--nyc-light-gray);
  border: 1px solid var(--nyc-gray);
  padding: var(--platform-gap);
}

/* High Contrast Text (MTA Style) */
.subway-text-high-contrast {
  background-color: var(--nyc-black);
  color: var(--nyc-white);
  padding: var(--spacing-sm) var(--spacing-md);
  font-weight: 600;
}

/* NYC Subway Directional Elements */
.subway-direction {
  background: var(--nyc-white);
  color: var(--nyc-black);
  border: 2px solid var(--nyc-black);
  border-top: 6px solid var(--nyc-black);
  padding: var(--spacing-lg) var(--spacing-xl);
  font-family: var(--font-family-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

.subway-direction:hover {
  background: var(--nyc-light-gray);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Chunky arrows for directional elements - SVG Based */
.subway-arrow {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.subway-arrow.left {
  background-image: url('/assets/images/arrow-left.svg');
  background-size: 32px 16px;
}

.subway-arrow.right {
  background-image: url('/assets/images/arrow-right.svg');
  background-size: 32px 16px;
}

.subway-arrow.up {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="none"><path d="M6 22L18 10L30 22L28 24L18 14L8 24L6 22Z" fill="%23000000"/></svg>');
}

.subway-arrow.down {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="none"><path d="M6 14L18 26L30 14L28 12L18 22L8 12L6 14Z" fill="%23000000"/></svg>');
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (min-width: 768px) {
  :root {
    --bullet-size: 28px;
    --bullet-size-lg: 36px;
    --station-padding: var(--spacing-xl);
  }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --card-shadow: 0 0 0 1px var(--nyc-black);
    --border-radius: var(--border-radius-none);
  }
}

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

/* ===== MULTI-RUN DAY STYLING ===== */

.multi-run-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}

.multi-run-container .workout-card {
  margin-bottom: 2rem; /* Explicit margin between cards */
}

.multi-run-container .workout-card:last-child {
  margin-bottom: 0; /* Remove margin from last card */
}

.multi-run-container .workout-type {
  font-size: 1.1rem;
}

/* Stack multi-run cards on mobile */
@media (max-width: 768px) {
  .multi-run-container .workout-card {
    margin-bottom: 1.5rem; /* Slightly less spacing on mobile */
    padding: 1rem;
  }
}