/* ============================================================================
   SCHLAUESOCKE DESIGN SYSTEM - Dark-Mode-First Label Designer Theme
   Version 1.0.0 | Apply this file after Tailwind for full theme coverage.
   ============================================================================ */

:root {
  /* Primary */
  --primary-yellow: #F8D749;
  --primary-yellow-hover: #E6C73D;
  --primary-yellow-shadow: rgba(248, 215, 73, 0.25);
  --primary-yellow-shadow-hover: rgba(248, 215, 73, 0.35);

  /* Success */
  --success-green: #5BA54A;
  --success-green-hover: #4A8F3C;
  --success-green-shadow: rgba(91, 165, 74, 0.25);
  --success-green-shadow-hover: rgba(91, 165, 74, 0.35);

  /* Backgrounds (Dark) */
  --bg-primary: #0F172A;
  --bg-secondary: #1E293B;
  --bg-tertiary: #334155;
  --bg-quaternary: #475569;
  --bg-glass: rgba(15, 23, 42, 0.5);
  --bg-glass-card: rgba(30, 41, 59, 0.8);

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #CBD5E1;
  --text-tertiary: #94A3B8;
  --text-muted: #64748B;
  --text-disabled: #475569;

  /* Borders */
  --border-primary: #334155;
  --border-secondary: #475569;
  --border-focus: #F8D749;

  /* Semantic */
  --error-red: #EF4444;
  --error-red-hover: #DC2626;
  --warning-orange: #F97316;
  --info-blue: #3B82F6;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Transitions */
  --transition-standard: 150ms ease-in-out;
  --transition-fast: 100ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
}

/* Base overrides for dark theme */
body.schlauesocke-theme,
html.schlauesocke-theme {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Scrollbar (Dark Mode) */
.schlauesocke-theme ::-webkit-scrollbar,
.schlauesocke-theme::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.schlauesocke-theme ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
.schlauesocke-theme ::-webkit-scrollbar-thumb {
  background: var(--bg-quaternary);
  border-radius: 4px;
}
.schlauesocke-theme ::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Focus states */
.schlauesocke-theme *:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* Input/select overrides when using theme classes on parent */
.schlauesocke-theme input[type="text"],
.schlauesocke-theme input[type="number"],
.schlauesocke-theme input[type="color"],
.schlauesocke-theme select,
.schlauesocke-theme textarea {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border-primary);
  transition: border-color var(--transition-standard), box-shadow var(--transition-standard);
}
.schlauesocke-theme input:focus,
.schlauesocke-theme select:focus,
.schlauesocke-theme textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(248, 215, 73, 0.15);
}
.schlauesocke-theme input::placeholder,
.schlauesocke-theme textarea::placeholder {
  color: var(--text-muted);
}

/* Primary button (yellow) - utility for inline use */
.schlauesocke-theme .btn-theme-primary {
  background-color: var(--primary-yellow);
  color: var(--bg-primary);
  font-weight: 700;
  border: none;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px var(--primary-yellow-shadow);
  transition: all var(--transition-standard);
}
.schlauesocke-theme .btn-theme-primary:hover {
  background-color: var(--primary-yellow-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 12px var(--primary-yellow-shadow-hover);
}

/* CTA / Success button */
.schlauesocke-theme .btn-theme-cta {
  background-color: var(--success-green);
  color: var(--text-primary);
  font-weight: 700;
  border: none;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px var(--success-green-shadow);
  transition: all var(--transition-standard);
}
.schlauesocke-theme .btn-theme-cta:hover {
  background-color: var(--success-green-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 12px var(--success-green-shadow-hover);
}

/* Secondary / ghost button */
.schlauesocke-theme .btn-theme-secondary {
  background-color: transparent;
  color: var(--text-primary);
  font-weight: 600;
  border: 1px solid var(--border-primary);
  border-radius: 0.375rem;
  transition: all var(--transition-standard);
}
.schlauesocke-theme .btn-theme-secondary:hover {
  background-color: rgba(71, 85, 105, 0.5);
}

/* Destructive button */
.schlauesocke-theme .btn-theme-destructive {
  background-color: var(--error-red);
  color: var(--text-primary);
  font-weight: 600;
  border: none;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px rgba(239, 68, 68, 0.25);
  transition: all var(--transition-standard);
}
.schlauesocke-theme .btn-theme-destructive:hover {
  background-color: var(--error-red-hover);
  transform: translateY(-2px);
}

/* Tab active state (yellow) */
.schlauesocke-theme .tpe-tab.active,
.schlauesocke-theme .tpe-tab[data-active="true"] {
  background-color: var(--primary-yellow) !important;
  color: var(--bg-primary) !important;
  font-weight: 700;
  border-color: var(--primary-yellow) !important;
  box-shadow: 0 2px 4px var(--primary-yellow-shadow);
}

/* Tool button active state */
.schlauesocke-theme .tpe-tool-btn.active {
  background-color: var(--primary-yellow) !important;
  color: var(--bg-primary) !important;
  border-color: var(--primary-yellow) !important;
}