/* =====================================================
   Events Theme — Base Design Tokens & Global Styles
   Matches design-mockup.html tokens exactly.
   ===================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

   :root {
     /* Brand colors */
     --color-primary:       #1a1a2e;
     --color-primary-light: #16213e;
     --color-accent:        #e94560;
     --color-accent-hover:  #c73652;
     --color-surface:       #ffffff;
     --color-surface-alt:   #f8f9fa;
     --color-border:        #dee2e6;
     --color-text-muted:    #6c757d;
   
     /* Seat status colors */
     --seat-available:       #28a745;
     --seat-available-hover: #1e7e34;
     --seat-reserved:        #ffc107;
     --seat-selected:        #007bff;
     --seat-selected-border: #0056b3;
     --seat-sold:            #6c757d;
     --seat-sold-text:       #495057;
   
     /* Typography — matches mockup font scale */
     --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     --font-sm:  0.8125rem;
     --font-md:  1rem;
     --font-lg:  1.125rem;
     --font-xl:  1.5rem;
     --font-2xl: 2rem;
     --font-3xl: 2.75rem;
   
     /* Backward-compat aliases used in existing CSS */
     --font-family-base:    var(--font-family);
     --font-family-heading: var(--font-family);
     --font-size-base:  var(--font-md);
     --font-size-sm:    var(--font-sm);
     --font-size-lg:    var(--font-lg);
     --font-size-xl:    var(--font-xl);
     --font-size-2xl:   var(--font-2xl);
     --font-size-3xl:   var(--font-3xl);
     --line-height-base: 1.6;
     --font-weight-normal:   400;
     --font-weight-medium:   500;
     --font-weight-semibold: 600;
     --font-weight-bold:     700;
   
     /* Spacing */
     --spacing-1:  0.25rem;
     --spacing-2:  0.5rem;
     --spacing-3:  0.75rem;
     --spacing-4:  1rem;
     --spacing-6:  1.5rem;
     --spacing-8:  2rem;
     --spacing-12: 3rem;
     --spacing-16: 4rem;
   
     /* Layout */
     --max-width-content: 1200px;
     --max-width-narrow:  768px;
     --radius:    6px;
     --radius-lg: 12px;
     --border-radius:    var(--radius);
     --border-radius-lg: var(--radius-lg);
     --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
     --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
     --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);
   
     /* Transitions */
     --transition-fast: 150ms ease;
     --transition-base: 250ms ease;
   }
   
   /* ── Global resets layered on top of Olivero ── */
   
   /* Ensure [hidden] always wins over layout display rules (flex, grid, etc.) */
   [hidden] { display: none !important; }
   
   body {
     font-family: var(--font-family);
     font-size: var(--font-md);
     line-height: var(--line-height-base);
     color: var(--color-primary);
     background-color: var(--color-surface);
     margin: 0;
   }
   
   a {
     color: var(--color-accent);
     text-decoration: none;
     transition: color var(--transition-fast);
   }
   
   a:hover {
     color: var(--color-accent-hover);
     text-decoration: underline;
   }
   
   /* Utility classes */
   .visually-hidden {
     position: absolute;
     width: 1px;
     height: 1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
   }
   
   .container {
     max-width: var(--max-width-content);
     margin-inline: auto;
     padding-inline: var(--spacing-4);
   }
   
   /* ── Button system — matches mockup exactly ── */
   .btn {
     display: inline-block;
     padding: 8px 16px;
     border-radius: var(--radius);
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-sm);
     text-align: center;
     cursor: pointer;
     border: 2px solid transparent;
     text-decoration: none;
     transition: background-color var(--transition-fast),
                 color var(--transition-fast),
                 border-color var(--transition-fast);
     line-height: 1.4;
   }
   
   .btn:hover {
     text-decoration: none;
   }
   
   .btn--primary {
     background: var(--color-accent);
     color: white;
     border-color: var(--color-accent);
   }
   
   .btn--primary:hover {
     background: var(--color-accent-hover);
     border-color: var(--color-accent-hover);
     color: white;
   }
   
   .btn--outline {
     background: transparent;
     color: var(--color-accent);
     border-color: var(--color-accent);
   }
   
   .btn--outline:hover {
     background: var(--color-accent);
     color: white;
   }
   
   /* Alias for backward compat */
   .btn--secondary {
     background: transparent;
     color: var(--color-accent);
     border-color: var(--color-accent);
   }
   
   .btn--secondary:hover {
     background: var(--color-accent);
     color: white;
   }
   
   .btn--disabled,
   .btn[disabled] {
     background: var(--color-border);
     color: var(--color-text-muted);
     border-color: var(--color-border);
   }
   
   .btn--full {
     width: 100%;
     display: block;
     padding: 12px;
     font-size: var(--font-md);
   }
   
   /* Badge system — used in cards and detail pages */
   .badge {
     display: inline-block;
     padding: 2px 8px;
     border-radius: var(--radius);
     font-size: 0.72rem;
     font-weight: var(--font-weight-bold);
     text-transform: uppercase;
     letter-spacing: 0.06em;
   }
   
   .badge--on-sale,
   .badge--on_sale {
     background: #e8f5e9;
     color: #2e7d32;
   }
   
   .badge--upcoming {
     background: #e3f2fd;
     color: #1565c0;
   }
   
   .badge--sold-out,
   .badge--sold_out {
     background: #fce4ec;
     color: #c62828;
   }
   
   .badge--cancelled {
     background: #f5f5f5;
     color: #616161;
   }
   
   .badge--coming-soon,
   .badge--coming_soon {
     background: #fff8e1;
     color: #e65100;
   }
   
   /* ── Override Olivero .button--primary to use accent color ── */
   .button--primary,
   input.button--primary,
   a.button--primary {
     background-color: var(--color-accent) !important;
     color: white !important;
   }
   
   .button--primary:hover,
   input.button--primary:hover,
   a.button--primary:hover {
     background-color: var(--color-accent-hover) !important;
   }
   
   body.user-role-client .messages-list {
     display: none;
   }