/* ================================================================
   GOURMEN PWA - MAIN STYLESHEET V2
   ================================================================
   Logo-based Design System
   BEM Naming, Responsive First, Light/Dark Theme
   Version: 2.0
   Last Updated: 2026-04-10 (brand gradient — baseline + leicht mehr Orange)
   ================================================================ */

/* Import Order */
@import url('v2/tokens.css?v=20260410t');      /* Design Tokens & Theme Variables */
@import url('v2/base.css?v=20260410t');        /* Reset, Typography, Base Elements */
@import url('v2/layout.css?v=20260410t');      /* Base Layout (User Bar, Nav, Main Content) */
@import url('v2/components.css?v=20260410t');  /* All Components */

/* ================================================================
   DEMO PAGE SPECIFIC STYLES
   ================================================================ */
.demo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.demo-header {
  text-align: center;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 2px solid var(--color-border-default);
}

.demo-header__logo {
  max-width: 200px;
  height: auto;
  margin-bottom: var(--space-4);
}

.demo-header__title {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-3);
  background: linear-gradient(135deg, var(--logo-orange), var(--brand-accent-700));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.demo-header__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.demo-header__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.demo-section {
  margin-bottom: var(--space-10);
}

.demo-section__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border-subtle);
}

.demo-section__description {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-5);
}

.demo-grid {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.demo-grid--2col {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.demo-grid--3col {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.demo-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.demo-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.demo-color {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  display: flex;
  align-items: end;
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-subtle);
}

.demo-color__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}

.theme-indicator {
  position: fixed;
  bottom: var(--space-4);
  left: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-fixed);
}