/* ==========================================================================
   Google Stitch Design System — eFootball™ Lab Design Tokens & Components
   Standardized layout tokens, responsive surfaces, and HUD micro-interactions.
   ========================================================================== */

:root {
  /* Stitch Color Tokens */
  --stitch-sys-color-primary: var(--accent-cyan, #00f2fe);
  --stitch-sys-color-on-primary: #050811;
  --stitch-sys-color-secondary: var(--accent-blue, #38bdf8);
  --stitch-sys-color-tertiary: var(--accent-purple, #a855f7);
  --stitch-sys-color-success: var(--accent-emerald, #10b981);
  --stitch-sys-color-warning: var(--accent-amber, #f59e0b);
  --stitch-sys-color-error: var(--accent-rose, #f43f5e);

  /* Stitch Surfaces & Glass Elevation */
  --stitch-sys-surface-ground: #070a12;
  --stitch-sys-surface-base: #0d1220;
  --stitch-sys-surface-elevated-1: rgba(16, 23, 38, 0.72);
  --stitch-sys-surface-elevated-2: rgba(24, 35, 58, 0.88);
  --stitch-sys-surface-glass: rgba(13, 18, 32, 0.75);

  /* Stitch Typography Scale */
  --stitch-sys-typescale-display-large: 800 2.25rem/1.2 var(--font-sans);
  --stitch-sys-typescale-headline-medium: 700 1.5rem/1.3 var(--font-sans);
  --stitch-sys-typescale-title-medium: 600 1.1rem/1.4 var(--font-sans);
  --stitch-sys-typescale-body-medium: 400 0.92rem/1.55 var(--font-sans);
  --stitch-sys-typescale-label-small: 700 0.72rem/1.2 var(--font-sans);
  --stitch-sys-typescale-code-mono: 500 0.82rem/1.4 var(--font-mono);

  /* Stitch Spacing System */
  --stitch-spacing-xxs: 4px;
  --stitch-spacing-xs: 8px;
  --stitch-spacing-sm: 12px;
  --stitch-spacing-md: 16px;
  --stitch-spacing-lg: 24px;
  --stitch-spacing-xl: 32px;
  --stitch-spacing-xxl: 48px;

  /* Stitch Elevation & Glow */
  --stitch-glow-primary: 0 0 20px rgba(0, 242, 254, 0.28);
  --stitch-glow-warning: 0 0 20px rgba(245, 158, 11, 0.28);
  --stitch-glow-success: 0 0 20px rgba(16, 185, 129, 0.28);
  --stitch-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Stitch Pitch Canvas Component */
.stitch-pitch-container {
  background: radial-gradient(circle at center, #0f1c24 0%, #080d14 100%);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0, 242, 254, 0.08), var(--stitch-shadow-card);
}

.stitch-pitch-canvas {
  width: 100%;
  height: 280px;
  border-radius: var(--radius-sm);
  display: block;
}

/* Stitch Theme Customizer Drawer */
.stitch-theme-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1500;
}

[dir="rtl"] .stitch-theme-panel {
  right: auto;
  left: 24px;
}

.stitch-theme-toggle-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 242, 254, 0.35);
  transition: transform var(--transition-fast);
}

.stitch-theme-toggle-btn:hover {
  transform: scale(1.08) rotate(30deg);
}

.stitch-theme-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 290px;
  background: #0d1322;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-md);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.75), var(--stitch-glow-primary);
  padding: 1.25rem;
  display: none;
  flex-direction: column;
  gap: 1rem;
}

[dir="rtl"] .stitch-theme-menu {
  right: auto;
  left: 0;
}

.stitch-theme-menu.show {
  display: flex;
  animation: fadeIn 0.2s ease-out;
}

.stitch-theme-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.stitch-palette-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-size: 0.78rem;
  font-weight: 700;
  transition: all var(--transition-fast);
}

.stitch-palette-btn:hover, .stitch-palette-btn.active {
  border-color: var(--accent-cyan);
  background: rgba(0, 242, 254, 0.12);
  color: #fff;
}

.palette-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
}