From 5577d31c82ae4a05145cf7f71268fa55cb8cd56f Mon Sep 17 00:00:00 2001 From: VinnyNC Date: Sun, 28 Sep 2025 22:19:36 -0400 Subject: [PATCH] Complete 1.1.3-1.1.5: CSS modularization - reset, variables, layout, components, utilities files created, BEM framework implemented --- components.css | 581 +++++++++++++++++++++++++++++++++++++++++++++++++ index.php | 6 +- layout.css | 64 ++++++ reset.css | 16 ++ utilities.css | 341 +++++++++++++++++++++++++++++ variables.css | 233 ++++++++++++++++++++ 6 files changed, 1240 insertions(+), 1 deletion(-) create mode 100644 components.css create mode 100644 layout.css create mode 100644 reset.css create mode 100644 utilities.css create mode 100644 variables.css diff --git a/components.css b/components.css new file mode 100644 index 0000000..c04a0b2 --- /dev/null +++ b/components.css @@ -0,0 +1,581 @@ +/* Component styles - Reusable UI components */ + +/* ================================================================= + VIDEO HEADER - Top section of video area + ================================================================= */ + +.video-header { + background: linear-gradient(135deg, var(--dodgers-blue-700) 0%, var(--dodgers-blue-500) 100%); + padding: var(--spacing-3) var(--spacing-5); + display: flex; + align-items: center; + justify-content: space-between; + box-shadow: var(--shadow-dodgers-md); + z-index: 10; +} + +.header-left { + display: flex; + align-items: center; + gap: var(--spacing-5); +} + +.logo { + font-size: var(--font-size-xl); + font-weight: var(--font-weight-bold); + color: white; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); + display: flex; + align-items: center; + gap: var(--spacing-2); +} + +.logo::before { + content: "⚾"; + font-size: var(--font-size-2xl); +} + +/* ================================================================= + STREAM STATS - Viewer count and badges + ================================================================= */ + +.stream-stats { + display: flex; + align-items: center; + gap: var(--spacing-4); +} + +.viewer-count { + background: rgba(255,255,255,0.2); + padding: var(--spacing-2) var(--spacing-4); + border-radius: var(--border-radius-2xl); + color: white; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-semibold); + display: flex; + align-items: center; + gap: var(--spacing-2); + backdrop-filter: blur(10px); +} + +.viewer-count::before { + content: "👥"; +} + +.stream-badge { + background: var(--dodgers-red); + color: white; + padding: var(--spacing-2) var(--spacing-4); + border-radius: var(--border-radius-2xl); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + text-transform: uppercase; + animation: pulse 2s infinite; +} + +/* ================================================================= + HEADER CONTROLS - Buttons and selectors + ================================================================= */ + +.header-controls { + display: flex; + gap: var(--spacing-3); + align-items: center; +} + +/* Ensure all header control buttons have identical dimensions */ +.header-controls > * { + height: 35px; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + vertical-align: top; + line-height: 1; +} + +.quality-selector { + background: rgba(255,255,255,0.2); + border: none; + color: white; + padding: var(--spacing-2) var(--spacing-4); + border-radius: var(--border-radius-2xl); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + backdrop-filter: blur(10px); + outline: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + min-height: auto; +} + +.toggle-chat-btn { + background: rgba(255,255,255,0.2); + border: none; + color: white; + padding: var(--spacing-2) var(--spacing-4); + border-radius: var(--border-radius-2xl); + cursor: pointer; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-semibold); + transition: all var(--transition-base); + backdrop-filter: blur(10px); + position: relative; +} + +.toggle-chat-btn:hover { + background: rgba(255,255,255,0.3); + transform: translateY(-1px); +} + +.manual-refresh-btn { + background: rgba(255,255,255,0.2); + border: none; + color: white; + padding: var(--spacing-2) var(--spacing-4); + border-radius: var(--border-radius-2xl); + cursor: pointer; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-semibold); + transition: all var(--transition-base); + backdrop-filter: blur(10px); + position: relative; +} + +.manual-refresh-btn:hover { + background: rgba(255,255,255,0.3); + transform: translateY(-1px); +} + +/* ================================================================= + CHAT HEADER + ================================================================= */ + +.chat-header { + background: linear-gradient(135deg, var(--dodgers-blue-500) 0%, var(--dodgers-blue-300) 100%); + padding: var(--spacing-4) var(--spacing-5); + color: white; + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + box-shadow: var(--shadow-sm); + display: flex; + align-items: center; + justify-content: space-between; +} + +.chat-header-left { + display: flex; + align-items: center; + gap: var(--spacing-2); +} + +.chat-header-left::before { + content: "💬"; + font-size: var(--font-size-lg); +} + +.admin-controls { + display: flex; + gap: var(--spacing-2); +} + +.admin-btn { + background: rgba(255,215,0,0.3); + border: 1px solid var(--dodgers-gold); + color: white; + padding: var(--spacing-1) var(--spacing-3); + border-radius: var(--border-radius-xl); + font-size: var(--font-size-xs); + cursor: pointer; + transition: all var(--transition-fast); +} + +.admin-btn:hover { + background: rgba(255,215,0,0.5); +} + +/* ================================================================= + USER INFO SECTION + ================================================================= */ + +.user-info { + padding: var(--spacing-3) var(--spacing-4); + background: var(--card-bg); + border-bottom: 1px solid var(--border-color); +} + +.user-id-display { + font-size: var(--font-size-xs); + color: var(--text-muted); + margin-bottom: var(--spacing-2); + display: flex; + align-items: center; + gap: var(--spacing-2); +} + +.id-badge { + background: var(--dodgers-blue-500); + color: white; + padding: var(--spacing-1) var(--spacing-2); + border-radius: var(--border-radius-xl); + font-weight: var(--font-weight-semibold); + font-family: var(--font-family-mono); +} + +.id-badge.admin { + background: linear-gradient(135deg, var(--dodgers-gold), #FFB700); + color: #333; +} + +.nickname-input { + position: relative; +} + +.nickname-input input { + width: 100%; + padding: var(--spacing-3) var(--spacing-3); + border: 2px solid var(--border-color); + border-radius: var(--border-radius-md); + font-size: var(--font-size-sm); + transition: all var(--transition-base); + background: var(--input-bg); + color: var(--text-primary); +} + +.nickname-input input::placeholder { + color: var(--text-muted); +} + +.nickname-input input:focus { + outline: none; + border-color: var(--dodgers-blue-500); + box-shadow: 0 0 0 3px var(--focus-ring); +} + +/* ================================================================= + CHAT MESSAGES CONTAINER + ================================================================= */ + +.chat-messages { + flex: 1; + overflow-y: auto; + padding: var(--spacing-4); + background: var(--bg-dark); +} + +/* ================================================================= + MESSAGE COMPONENTS + ================================================================= */ + +.message { + margin-bottom: var(--spacing-4); + animation: slideIn var(--transition-slow); + position: relative; +} + +.message:hover .message-actions { + opacity: 1; +} + +.message-actions { + position: absolute; + right: 0; + top: 0; + opacity: 0; + transition: opacity var(--transition-fast); + display: flex; + gap: var(--spacing-1); +} + +.delete-btn, .ban-btn { + background: rgba(239,62,66,0.9); + color: white; + border: none; + padding: var(--spacing-1) var(--spacing-2); + border-radius: var(--border-radius-sm); + font-size: var(--font-size-xs); + cursor: pointer; +} + +.ban-btn { + background: rgba(255,152,0,0.9); +} + +.message-header { + display: flex; + align-items: baseline; + gap: var(--spacing-2); + margin-bottom: var(--spacing-1); + flex-wrap: wrap; +} + +.message-nickname { + font-weight: var(--font-weight-semibold); + color: var(--dodgers-blue-500); + font-size: var(--font-size-sm); +} + +.message-nickname.admin { + color: var(--dodgers-gold); + text-shadow: 0 0 2px rgba(255,215,0,0.5); +} + +.message-id { + font-size: var(--font-size-xs); + color: var(--text-muted); + font-family: var(--font-family-mono); + background: var(--border-color); + padding: 1px var(--spacing-1); + border-radius: var(--border-radius-xl); +} + +.message-time { + font-size: var(--font-size-xs); + color: var(--text-muted); + margin-left: auto; +} + +.message-text { + padding: var(--spacing-2) var(--spacing-3); + background: var(--card-bg); + border-radius: var(--border-radius-lg); + font-size: var(--font-size-sm); + line-height: var(--line-height-normal); + box-shadow: var(--shadow-sm); + border-left: 3px solid transparent; + color: var(--text-primary); + word-wrap: break-word; + word-break: break-word; + overflow-wrap: break-word; + white-space: pre-wrap; + max-width: 100%; +} + +.own-message .message-nickname { + color: var(--dodgers-red-500); +} + +.own-message .message-text { + background: rgba(0,90,156,0.2); + border-left-color: var(--dodgers-blue-500); +} + +.admin-message .message-text { + background: var(--admin-bg); + border-left-color: var(--dodgers-gold); +} + +.system-message { + text-align: center; + color: var(--text-muted); + font-size: var(--font-size-xs); + font-style: italic; + margin: var(--spacing-3) 0; + padding: var(--spacing-2); + background: rgba(0,90,156,0.1); + border-radius: var(--border-radius-md); +} + +.typing-indicator { + padding: 0 var(--spacing-4) var(--spacing-2); + font-size: var(--font-size-xs); + color: var(--text-muted); + font-style: italic; + display: none; +} + +.typing-indicator.active { + display: block; +} + +.typing-indicator span { + animation: blink 1.4s infinite; +} + +.typing-indicator span:nth-child(2) { + animation-delay: 0.2s; +} + +.typing-indicator span:nth-child(3) { + animation-delay: 0.4s; +} + +/* ================================================================= + CHAT INPUT AREA + ================================================================= */ + +.chat-input { + padding: var(--spacing-3) var(--spacing-4); + background: var(--card-bg); + border-top: 1px solid var(--border-color); +} + +.input-group { + display: flex; + gap: var(--spacing-2); +} + +.chat-input input { + flex: 1; + padding: var(--spacing-3) var(--spacing-4); + border: 2px solid var(--border-color); + border-radius: var(--border-radius-2xl); + font-size: var(--font-size-sm); + transition: all var(--transition-base); + background: var(--input-bg); + color: var(--text-primary); +} + +.chat-input input::placeholder { + color: var(--text-muted); +} + +.chat-input input:focus { + outline: none; + border-color: var(--dodgers-blue-500); + box-shadow: 0 0 0 3px var(--focus-ring); +} + +.chat-input button { + padding: var(--spacing-3) var(--spacing-5); + background: linear-gradient(135deg, var(--dodgers-blue-500), var(--dodgers-blue-300)); + color: white; + border: none; + border-radius: var(--border-radius-2xl); + font-size: var(--font-size-sm); + font-weight: var(--font-weight-semibold); + cursor: pointer; + transition: all var(--transition-base); + box-shadow: var(--shadow-dodgers-sm); +} + +.chat-input button:hover { + transform: translateY(-2px); + box-shadow: var(--shadow-dodgers-md); +} + +.chat-input button:active { + transform: translateY(0); +} + +.empty-chat { + text-align: center; + color: var(--text-muted); + padding: var(--spacing-12) var(--spacing-5); + font-size: var(--font-size-sm); +} + +/* ================================================================= + CONNECTION STATUS + ================================================================= */ + +.connection-status { + padding: var(--spacing-2); + background: var(--bg-darker); + text-align: center; + font-size: var(--font-size-xs); + color: var(--text-muted); + display: flex; + align-items: center; + justify-content: center; + gap: var(--spacing-2); + border-top: 1px solid var(--border-color); +} + +.status-dot { + width: var(--spacing-2); + height: var(--spacing-2); + border-radius: 50%; + background: #4caf50; + animation: blink 2s infinite; +} + +.status-dot.offline { + background: #f44336; + animation: none; +} + +/* ================================================================= + NOTIFICATIONS & TOASTS + ================================================================= */ + +.toast { + position: fixed; + bottom: var(--spacing-5); + left: 50%; + transform: translateX(-50%); + background: rgba(0,0,0,0.9); + color: white; + padding: var(--spacing-3) var(--spacing-5); + border-radius: var(--border-radius-2xl); + font-size: var(--font-size-sm); + z-index: var(--z-toast); + opacity: 0; + transition: opacity var(--transition-fast); +} + +.toast.show { + opacity: 1; +} + +.notification-badge { + position: absolute; + top: calc(var(--spacing-2) * -1); + right: calc(var(--spacing-2) * -1); + background: var(--dodgers-red); + color: white; + border-radius: var(--border-radius-xl); + padding: var(--spacing-1) var(--spacing-2); + font-size: var(--font-size-xs); + font-weight: var(--font-weight-bold); + display: none; + animation: bounce 0.5s; +} + +.notification-badge.show { + display: block; +} + +/* ================================================================= + FLOATING ACTION BUTTONS + ================================================================= */ + +.fab-container { + position: fixed; + bottom: var(--spacing-5); + right: var(--spacing-5); + display: flex; + flex-direction: column; + gap: var(--spacing-3); + z-index: var(--z-fixed); +} + +.fab { + width: 56px; + height: 56px; + border-radius: 50%; + background: linear-gradient(135deg, var(--dodgers-blue-500), var(--dodgers-blue-300)); + color: white; + border: none; + cursor: pointer; + box-shadow: var(--shadow-dodgers-md); + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + transition: all var(--transition-base); +} + +.fab:hover { + transform: scale(1.1); + box-shadow: var(--shadow-dodgers-lg); +} + +.fab.secondary { + width: 48px; + height: 48px; + font-size: 20px; + background: rgba(0,90,156,0.9); +} diff --git a/index.php b/index.php index 8c87eab..07aea2a 100644 --- a/index.php +++ b/index.php @@ -308,7 +308,11 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) { Dodgers Stream Theater - + + + + +
diff --git a/layout.css b/layout.css new file mode 100644 index 0000000..4fdd66d --- /dev/null +++ b/layout.css @@ -0,0 +1,64 @@ +/* Layout styles - Main structural elements */ + +/* ================================================================= + THEATER CONTAINER - Main layout wrapper + ================================================================= */ + +.theater-container { + display: flex; + height: 100vh; + position: relative; + transition: all var(--transition-slow); +} + +/* ================================================================= + VIDEO SECTION - Left side containing video player + ================================================================= */ + +.video-section { + flex: 1; + background: #000; + position: relative; + display: flex; + flex-direction: column; + transition: all var(--transition-slow); +} + +.video-section.expanded { + flex: 1; + width: 100%; +} + +/* ================================================================= + VIDEO WRAPPER - Contains the video element + ================================================================= */ + +.video-wrapper { + flex: 1; + position: relative; + background: #000; + overflow: hidden; +} + +/* ================================================================= + CHAT SECTION - Right side chat panel + ================================================================= */ + +.chat-section { + width: 350px; + background: var(--bg-dark); + color: var(--text-primary); + display: flex; + flex-direction: column; + box-shadow: var(--shadow-dodgers-lg); + transition: transform var(--transition-slow); + position: relative; + border-left: 1px solid var(--border-color); +} + +.chat-section.collapsed { + transform: translateX(100%); + position: absolute; + right: 0; + height: 100%; +} diff --git a/reset.css b/reset.css new file mode 100644 index 0000000..88ea847 --- /dev/null +++ b/reset.css @@ -0,0 +1,16 @@ +/* Reset and normalize styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Base body styles */ +body { + font-family: var(--font-family-primary); + background: var(--bg-darkest); + color: var(--text-primary); + height: 100vh; + overflow: hidden; + position: relative; +} diff --git a/utilities.css b/utilities.css new file mode 100644 index 0000000..1f9c520 --- /dev/null +++ b/utilities.css @@ -0,0 +1,341 @@ +/* Utility classes and animations */ + +/* ================================================================= + KEYFRAME ANIMATIONS + ================================================================= */ + +@keyframes slideIn { + from { + opacity: 0; + transform: translateX(-20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.8; + } +} + +@keyframes blink { + 0%, 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +@keyframes bounce { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.2); + } +} + +@keyframes slideOut { + to { + opacity: 0; + transform: translateX(100%); + } +} + +/* ================================================================= + SCROLLBAR STYLING + ================================================================= */ + +.chat-messages::-webkit-scrollbar { + width: var(--spacing-2); +} + +.chat-messages::-webkit-scrollbar-track { + background: var(--bg-darker); +} + +.chat-messages::-webkit-scrollbar-thumb { + background: var(--dodgers-blue-500); + border-radius: var(--border-radius-sm); + opacity: 0.6; +} + +.chat-messages::-webkit-scrollbar-thumb:hover { + opacity: 1; +} + +/* ================================================================= + VIDEO.JS OVERRIDES + ================================================================= */ + +/* Video player container */ +#video-player { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + object-fit: contain; +} + +/* Video.js skin overrides */ +.video-js { + width: 100% !important; + height: 100% !important; + max-width: 100% !important; + max-height: 100% !important; +} + +/* Override VideoJS fluid behavior to prevent overflow */ +.video-js.vjs-fluid { + width: 100% !important; + height: 100% !important; + max-width: 100% !important; + max-height: 100% !important; + padding-top: 0 !important; +} + +/* Ensure the actual video element is properly constrained */ +.video-js video { + width: 100% !important; + height: 100% !important; + max-width: 100% !important; + max-height: 100% !important; + object-fit: contain !important; +} + +/* Control bar styling */ +.video-js .vjs-control-bar { + background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); +} + +/* ================================================================= + FOCUSABLE ELEMENTS (Accessibility) + ================================================================= */ + +/* Focus ring utility - can be used on any focusable element */ +.focus-ring:focus { + outline: 2px solid var(--dodgers-blue-500); + outline-offset: 2px; +} + +/* ================================================================= + VISIBLE ONLY TO SCREEN READERS + ================================================================= */ + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* ================================================================= + FLEXBOX UTILITIES + ================================================================= */ + +.flex { + display: flex; +} + +.flex-col { + flex-direction: column; +} + +.items-center { + align-items: center; +} + +.justify-center { + justify-content: center; +} + +.justify-between { + justify-content: space-between; +} + +.gap-2 { + gap: var(--spacing-2); +} + +.gap-4 { + gap: var(--spacing-4); +} + +/* ================================================================= + SPACING UTILITIES + ================================================================= */ + +.p-4 { + padding: var(--spacing-4); +} + +.px-4 { + padding-left: var(--spacing-4); + padding-right: var(--spacing-4); +} + +.py-4 { + padding-top: var(--spacing-4); + padding-bottom: var(--spacing-4); +} + +.m-4 { + margin: var(--spacing-4); +} + +.mx-4 { + margin-left: var(--spacing-4); + margin-right: var(--spacing-4); +} + +.my-4 { + margin-top: var(--spacing-4); + margin-bottom: var(--spacing-4); +} + +/* ================================================================= + TEXT UTILITIES + ================================================================= */ + +.text-sm { + font-size: var(--font-size-sm); +} + +.text-base { + font-size: var(--font-size-base); +} + +.text-lg { + font-size: var(--font-size-lg); +} + +.text-center { + text-align: center; +} + +.font-semibold { + font-weight: var(--font-weight-semibold); +} + +.font-bold { + font-weight: var(--font-weight-bold); +} + +/* ================================================================= + BACKGROUND UTILITIES + ================================================================= */ + +.bg-primary { + background-color: var(--dodgers-blue-500); +} + +.bg-secondary { + background-color: var(--dodgers-red-500); +} + +.bg-accent { + background-color: var(--dodgers-gold-500); +} + +/* ================================================================= + BORDER UTILITIES + ================================================================= */ + +.rounded { + border-radius: var(--border-radius-base); +} + +.rounded-full { + border-radius: var(--border-radius-full); +} + +/* ================================================================= + TRANSITIONS UTILITIES + ================================================================= */ + +.transition { + transition: all var(--transition-base); +} + +.transition-fast { + transition: all var(--transition-fast); +} + +.transition-slow { + transition: all var(--transition-slow); +} + +/* ================================================================= + RESPONSIVE UTILITIES + ================================================================= */ + +/* Hide elements at different breakpoints */ +@media (max-width: 767px) { + .hidden-mobile { + display: none !important; + } +} + +@media (min-width: 768px) { + .hidden-tablet { + display: none !important; + } +} + +@media (max-width: 1023px) { + .hidden-tablet-up { + display: none !important; + } +} + +@media (min-width: 1024px) { + .hidden-desktop { + display: none !important; + } +} + +/* ================================================================= + MOBILE RESPONSIVE OVERRIDES + ================================================================= */ + +@media (max-width: 768px) { + .chat-section { + width: 100%; + position: absolute; + right: 0; + top: 0; + height: 100%; + z-index: var(--z-modal); + } + + .video-header { + padding: var(--spacing-3) var(--spacing-4); + } + + .logo { + font-size: var(--font-size-base); + } + + .stream-stats { + gap: var(--spacing-3); + } + + .quality-selector { + display: none; + } +} diff --git a/variables.css b/variables.css new file mode 100644 index 0000000..c7b6bdd --- /dev/null +++ b/variables.css @@ -0,0 +1,233 @@ +/* CSS Custom Properties - Dodgers Theme */ + +/* ================================================================= + COLOR PALETTE - DODGERS BRAND COLORS + ================================================================= */ + +:root { + /* Primary Dodgers Colors */ + --dodgers-blue: #005A9C; + --dodgers-blue-50: #e6f2ff; + --dodgers-blue-100: #b3d9ff; + --dodgers-blue-200: #80bfff; + --dodgers-blue-300: #4da6ff; + --dodgers-blue-400: #1a8dff; + --dodgers-blue-500: #005A9C; /* Base */ + --dodgers-blue-600: #004d85; + --dodgers-blue-700: #003d6b; + --dodgers-blue-800: #002d52; + --dodgers-blue-900: #001d38; + + --dodgers-red: #EF3E42; + --dodgers-red-50: #fef2f2; + --dodgers-red-100: #fce2e2; + --dodgers-red-200: #f9c9c9; + --dodgers-red-300: #f4a8a9; + --dodgers-red-400: #ef6e70; + --dodgers-red-500: #EF3E42; /* Base */ + --dodgers-red-600: #e92e31; + --dodgers-red-700: #d91c1f; + --dodgers-red-800: #c0171a; + --dodgers-red-900: #a00d10; + + --dodgers-gold: #FFD700; + --dodgers-gold-50: #fffbeb; + --dodgers-gold-100: #fef3c7; + --dodgers-gold-200: #fde68a; + --dodgers-gold-300: #fcd34d; + --dodgers-gold-400: #fbbf24; + --dodgers-gold-500: #FFD700; /* Base */ + --dodgers-gold-600: #f59e0b; + --dodgers-gold-700: #d97706; + --dodgers-gold-800: #b45309; + --dodgers-gold-900: #92400e; + + /* Semantic Color Mappings */ + --primary-color: var(--dodgers-blue); + --secondary-color: var(--dodgers-red); + --accent-color: var(--dodgers-gold); + + /* Background Colors */ + --bg-darkest: #050810; + --bg-darker: #0a0d14; + --bg-dark: #0f1419; + --bg-light: #15202b; + --bg-lighter: #1a2332; + --bg-lightest: #232d3a; + + /* Text Colors */ + --text-primary: #ffffff; + --text-secondary: #b8c5d6; + --text-muted: #8590a0; + --text-placeholder: #6b7785; + + /* Interactive States */ + --hover-overlay: rgba(255, 255, 255, 0.1); + --active-overlay: rgba(255, 255, 255, 0.2); + --focus-ring: rgba(0, 90, 156, 0.5); + + /* Borders & Dividers */ + --border-color: #1a2332; + --border-color-light: #232d3a; + --divider-color: rgba(255, 255, 255, 0.1); + + /* Input & Form Elements */ + --input-bg: #1a2332; + --input-border: #232d3a; + --input-focus: var(--dodgers-blue); + --input-error: var(--dodgers-red); + --input-disabled: #2a3441; + + /* Cards & Surfaces */ + --card-bg: #15202b; + --card-border: #1a2332; + --card-shadow: rgba(0, 0, 0, 0.3); + + /* Admin Elements */ + --admin-bg: rgba(255, 215, 0, 0.1); + --admin-border: var(--dodgers-gold); + --admin-text: var(--dodgers-gold); + + /* Overlay & Modal */ + --overlay-bg: rgba(0, 0, 0, 0.7); + --modal-bg: #15202b; + --tooltip-bg: #232d3a; + + /* ================================================================= + TYPOGRAPHY SCALE + ================================================================= */ + + /* Font Families */ + --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; + --font-family-mono: 'Courier New', monospace; + + /* Font Sizes - Modular Scale (1.125 ratio) */ + --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: 1.875rem; /* 30px */ + --font-size-4xl: 2.25rem; /* 36px */ + + /* Font Weights */ + --font-weight-normal: 400; + --font-weight-medium: 500; + --font-weight-semibold: 600; + --font-weight-bold: 700; + + /* Line Heights */ + --line-height-tight: 1.25; + --line-height-normal: 1.4; + --line-height-relaxed: 1.6; + --line-height-loose: 1.8; + + /* Letter Spacing */ + --letter-spacing-tight: -0.025em; + --letter-spacing-normal: 0; + --letter-spacing-wide: 0.025em; + + /* ================================================================= + SPACING SCALE + ================================================================= */ + + /* Spacing - Based on 4px grid */ + --spacing-1: 0.25rem; /* 4px */ + --spacing-2: 0.5rem; /* 8px */ + --spacing-3: 0.75rem; /* 12px */ + --spacing-4: 1rem; /* 16px */ + --spacing-5: 1.25rem; /* 20px */ + --spacing-6: 1.5rem; /* 24px */ + --spacing-8: 2rem; /* 32px */ + --spacing-10: 2.5rem; /* 40px */ + --spacing-12: 3rem; /* 48px */ + --spacing-16: 4rem; /* 64px */ + + /* ================================================================= + BORDER RADIUS SCALE + ================================================================= */ + + --border-radius-none: 0; + --border-radius-sm: 0.25rem; /* 4px */ + --border-radius-base: 0.5rem; /* 8px */ + --border-radius-md: 0.75rem; /* 12px */ + --border-radius-lg: 1rem; /* 16px */ + --border-radius-xl: 1.5rem; /* 24px */ + --border-radius-2xl: 2rem; /* 32px */ + --border-radius-full: 9999px; + + /* ================================================================= + SHADOW SCALE + ================================================================= */ + + --shadow-none: none; + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); + + /* Elevated shadows for Dodgers theme */ + --shadow-dodgers-sm: 0 2px 8px rgba(0, 90, 156, 0.15); + --shadow-dodgers-md: 0 4px 16px rgba(0, 90, 156, 0.2); + --shadow-dodgers-lg: 0 8px 32px rgba(0, 90, 156, 0.25); + --shadow-dodgers-xl: 0 16px 48px rgba(0, 90, 156, 0.3); + + /* ================================================================= + BREAKPOINT VARIABLES + ================================================================= */ + + /* Mobile-first breakpoints */ + --breakpoint-xs: 320px; + --breakpoint-sm: 640px; + --breakpoint-md: 768px; + --breakpoint-lg: 1024px; + --breakpoint-xl: 1280px; + --breakpoint-2xl: 1536px; + + /* Media query mixins (these will be used in component CSS) */ + /* xs: 0px and up */ + /* sm: 640px and up */ + /* md: 768px and up */ + /* lg: 1024px and up */ + /* xl: 1280px and up */ + /* 2xl: 1536px and up */ + + /* ================================================================= + Z-INDEX SCALE + ================================================================= */ + + --z-dropdown: 1000; + --z-sticky: 1020; + --z-fixed: 1030; + --z-modal-backdrop: 1040; + --z-modal: 1050; + --z-popover: 1060; + --z-tooltip: 1070; + --z-toast: 1080; + + /* ================================================================= + TRANSITIONS & ANIMATIONS + ================================================================= */ + + --transition-fast: 0.15s ease-in-out; + --transition-base: 0.2s ease-in-out; + --transition-slow: 0.3s ease-in-out; + + /* Easing functions */ + --ease-in: cubic-bezier(0.4, 0, 1, 1); + --ease-out: cubic-bezier(0, 0, 0.2, 1); + --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); + --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +/* ================================================================= + DARK THEME OVERRIDE (Future Enhancement) + ================================================================= */ + +/* .theme-light { + --bg-primary: var(--dodgers-blue-50); + --text-primary: #1e293b; +} */