/* ==========================================================================
   Werkelkeller Component Styles
   Requires: tokens.css to be loaded first.
   All styles reference CSS Custom Properties from tokens.css.
   ========================================================================== */

/* ==========================================================================
   RESET / BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ==========================================================================
   TYPOGRAPHY CLASSES
   ========================================================================== */

.wk-h1 {
  font-family: var(--wk-font-heading);
  font-size: var(--wk-text-4xl);
  font-weight: var(--wk-font-bold);
  line-height: var(--wk-leading-4xl);
  letter-spacing: var(--wk-tracking-tight);
  color: var(--wk-text);
}

.wk-h2 {
  font-family: var(--wk-font-heading);
  font-size: var(--wk-text-3xl);
  font-weight: var(--wk-font-bold);
  line-height: var(--wk-leading-3xl);
  letter-spacing: var(--wk-tracking-tight);
  color: var(--wk-text);
}

.wk-h3 {
  font-family: var(--wk-font-heading);
  font-size: var(--wk-text-2xl);
  font-weight: var(--wk-font-semibold);
  line-height: var(--wk-leading-2xl);
  letter-spacing: var(--wk-tracking-normal);
  color: var(--wk-text);
}

.wk-h4 {
  font-family: var(--wk-font-heading);
  font-size: var(--wk-text-xl);
  font-weight: var(--wk-font-semibold);
  line-height: var(--wk-leading-xl);
  letter-spacing: var(--wk-tracking-normal);
  color: var(--wk-text);
}

.wk-h5 {
  font-family: var(--wk-font-heading);
  font-size: var(--wk-text-lg);
  font-weight: var(--wk-font-semibold);
  line-height: var(--wk-leading-lg);
  letter-spacing: var(--wk-tracking-normal);
  color: var(--wk-text);
}

.wk-h6 {
  font-family: var(--wk-font-heading);
  font-size: var(--wk-text-base);
  font-weight: var(--wk-font-semibold);
  line-height: var(--wk-leading-base);
  letter-spacing: var(--wk-tracking-normal);
  color: var(--wk-text);
}

.wk-display {
  font-family: var(--wk-font-heading);
  font-size: var(--wk-text-6xl);
  font-weight: var(--wk-font-extrabold);
  line-height: var(--wk-leading-6xl);
  letter-spacing: var(--wk-tracking-tighter);
  color: var(--wk-text);
}

.wk-hero {
  font-family: var(--wk-font-heading);
  font-size: var(--wk-text-5xl);
  font-weight: var(--wk-font-extrabold);
  line-height: var(--wk-leading-5xl);
  letter-spacing: var(--wk-tracking-tighter);
  color: var(--wk-text);
}

.wk-body {
  font-family: var(--wk-font-body);
  font-size: var(--wk-text-base);
  font-weight: var(--wk-font-normal);
  line-height: var(--wk-leading-base);
  letter-spacing: var(--wk-tracking-normal);
  color: var(--wk-text);
}

.wk-body-lg {
  font-family: var(--wk-font-body);
  font-size: var(--wk-text-lg);
  font-weight: var(--wk-font-normal);
  line-height: var(--wk-leading-lg);
  letter-spacing: var(--wk-tracking-normal);
  color: var(--wk-text);
}

.wk-body-sm {
  font-family: var(--wk-font-body);
  font-size: var(--wk-text-sm);
  font-weight: var(--wk-font-normal);
  line-height: var(--wk-leading-sm);
  letter-spacing: var(--wk-tracking-normal);
  color: var(--wk-text-secondary);
}

.wk-caption {
  font-family: var(--wk-font-body);
  font-size: var(--wk-text-xs);
  font-weight: var(--wk-font-normal);
  line-height: var(--wk-leading-xs);
  letter-spacing: var(--wk-tracking-wide);
  color: var(--wk-text-muted);
}

.wk-overline {
  font-family: var(--wk-font-body);
  font-size: var(--wk-text-xs);
  font-weight: var(--wk-font-semibold);
  line-height: var(--wk-leading-xs);
  letter-spacing: var(--wk-tracking-wider);
  text-transform: uppercase;
  color: var(--wk-text-secondary);
}

.wk-code {
  font-family: var(--wk-font-code);
  font-size: var(--wk-text-sm);
  font-weight: var(--wk-font-normal);
  line-height: var(--wk-leading-sm);
  letter-spacing: var(--wk-tracking-normal);
  color: var(--wk-color-primary-400);
  background: var(--wk-bg-code);
  padding: var(--wk-space-0-5) var(--wk-space-1);
  border-radius: var(--wk-radius-sm);
}

.wk-code-block {
  font-family: var(--wk-font-code);
  font-size: var(--wk-text-sm);
  font-weight: var(--wk-font-normal);
  line-height: 1.7;
  letter-spacing: var(--wk-tracking-normal);
  color: var(--wk-text);
  background: var(--wk-bg-code);
  padding: var(--wk-space-4);
  border-radius: var(--wk-radius-lg);
  border: 1px solid var(--wk-border);
  overflow-x: auto;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.wk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wk-space-2);
  padding: var(--wk-space-2) var(--wk-space-4);
  font-family: var(--wk-font-heading);
  font-size: var(--wk-text-sm);
  font-weight: var(--wk-font-medium);
  line-height: var(--wk-leading-sm);
  letter-spacing: var(--wk-tracking-normal);
  border-radius: var(--wk-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--wk-duration-normal) var(--wk-easing-default),
    color var(--wk-duration-normal) var(--wk-easing-default),
    border-color var(--wk-duration-normal) var(--wk-easing-default),
    box-shadow var(--wk-duration-normal) var(--wk-easing-default);
  user-select: none;
  white-space: nowrap;
}

.wk-btn:focus-visible {
  outline: 2px solid var(--wk-border-focus);
  outline-offset: 2px;
}

.wk-btn:disabled,
.wk-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Button Sizes --- */

.wk-btn-sm {
  padding: var(--wk-space-1) var(--wk-space-3);
  font-size: var(--wk-text-xs);
}

.wk-btn-lg {
  padding: var(--wk-space-3) var(--wk-space-6);
  font-size: var(--wk-text-base);
}

/* --- Primary Button --- */

.wk-btn-primary {
  background-color: var(--wk-btn-primary-bg);
  color: var(--wk-btn-primary-text);
}

.wk-btn-primary:hover {
  background-color: var(--wk-btn-primary-hover);
  box-shadow: var(--wk-glow-violet);
}

.wk-btn-primary:active {
  background-color: var(--wk-btn-primary-active);
  box-shadow: none;
}

/* --- Secondary Button --- */

.wk-btn-secondary {
  background-color: var(--wk-btn-secondary-bg);
  color: var(--wk-btn-secondary-text);
  border-color: var(--wk-btn-secondary-border);
}

.wk-btn-secondary:hover {
  background-color: var(--wk-btn-secondary-hover-bg);
}

.wk-btn-secondary:active {
  background-color: var(--wk-btn-secondary-active-bg);
}

/* --- Ghost Button --- */

.wk-btn-ghost {
  background-color: transparent;
  color: var(--wk-btn-ghost-text);
}

.wk-btn-ghost:hover {
  background-color: var(--wk-btn-ghost-hover-bg);
}

.wk-btn-ghost:active {
  background-color: var(--wk-btn-ghost-active-bg);
}

/* --- Danger Button --- */

.wk-btn-danger {
  background-color: var(--wk-btn-danger-bg);
  color: var(--wk-btn-danger-text);
}

.wk-btn-danger:hover {
  background-color: var(--wk-btn-danger-hover);
  box-shadow: var(--wk-glow-magenta);
}

.wk-btn-danger:active {
  background-color: var(--wk-btn-danger-active);
  box-shadow: none;
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.wk-card {
  background-color: var(--wk-bg-elevated);
  border-radius: var(--wk-radius-lg);
  padding: var(--wk-space-6);
  border: 1px solid var(--wk-border);
  transition: box-shadow var(--wk-duration-normal) var(--wk-easing-default);
}

.wk-card-elevated {
  background-color: var(--wk-bg-elevated);
  border-radius: var(--wk-radius-lg);
  padding: var(--wk-space-6);
  border: none;
  box-shadow: var(--wk-shadow-1);
}

.wk-card-elevated:hover {
  box-shadow: var(--wk-shadow-2);
}

.wk-card-outlined {
  background-color: transparent;
  border-radius: var(--wk-radius-lg);
  padding: var(--wk-space-6);
  border: 1px solid var(--wk-border);
}

/* --- Card Subcomponents --- */

.wk-card-header {
  margin-bottom: var(--wk-space-4);
}

.wk-card-title {
  font-family: var(--wk-font-heading);
  font-size: var(--wk-text-lg);
  font-weight: var(--wk-font-semibold);
  line-height: var(--wk-leading-lg);
  color: var(--wk-text);
}

.wk-card-description {
  font-size: var(--wk-text-sm);
  color: var(--wk-text-secondary);
  margin-top: var(--wk-space-1);
}

.wk-card-body {
  color: var(--wk-text);
}

.wk-card-footer {
  margin-top: var(--wk-space-4);
  display: flex;
  align-items: center;
  gap: var(--wk-space-2);
}

/* ==========================================================================
   FORMS
   ========================================================================== */

/* --- Shared Form Element Base --- */

.wk-input,
.wk-select,
.wk-textarea {
  display: block;
  width: 100%;
  padding: var(--wk-space-2) var(--wk-space-3);
  font-family: var(--wk-font-body);
  font-size: var(--wk-text-sm);
  font-weight: var(--wk-font-normal);
  line-height: var(--wk-leading-sm);
  color: var(--wk-text);
  background-color: var(--wk-bg-input);
  border: 1px solid var(--wk-border);
  border-radius: var(--wk-radius-md);
  transition:
    border-color var(--wk-duration-normal) var(--wk-easing-default),
    box-shadow var(--wk-duration-normal) var(--wk-easing-default);
}

.wk-input::placeholder,
.wk-textarea::placeholder {
  color: var(--wk-text-muted);
}

.wk-input:hover,
.wk-select:hover,
.wk-textarea:hover {
  border-color: var(--wk-text-muted);
}

.wk-input:focus,
.wk-select:focus,
.wk-textarea:focus {
  outline: none;
  border-color: var(--wk-border-focus);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}

.wk-input:disabled,
.wk-select:disabled,
.wk-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Input --- */

.wk-input {
  height: 40px;
}

.wk-input-sm {
  height: 32px;
  padding: var(--wk-space-1) var(--wk-space-2);
  font-size: var(--wk-text-xs);
}

.wk-input-lg {
  height: 48px;
  padding: var(--wk-space-3) var(--wk-space-4);
  font-size: var(--wk-text-base);
}

/* --- Select --- */

.wk-select {
  height: 40px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: var(--wk-space-8);
}

/* --- Textarea --- */

.wk-textarea {
  min-height: 100px;
  resize: vertical;
}

/* --- Form Validation States --- */

.wk-input-error,
.wk-select-error,
.wk-textarea-error {
  border-color: var(--wk-error-text);
}

.wk-input-error:focus,
.wk-select-error:focus,
.wk-textarea-error:focus {
  border-color: var(--wk-error-text);
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.25);
}

.wk-input-success,
.wk-select-success,
.wk-textarea-success {
  border-color: var(--wk-success-text);
}

.wk-input-success:focus,
.wk-select-success:focus,
.wk-textarea-success:focus {
  border-color: var(--wk-success-text);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

/* --- Labels and Help Text --- */

.wk-label {
  display: block;
  font-family: var(--wk-font-body);
  font-size: var(--wk-text-sm);
  font-weight: var(--wk-font-medium);
  line-height: var(--wk-leading-sm);
  color: var(--wk-text);
  margin-bottom: var(--wk-space-1);
}

.wk-help-text {
  font-size: var(--wk-text-xs);
  color: var(--wk-text-muted);
  margin-top: var(--wk-space-1);
}

.wk-error-text {
  font-size: var(--wk-text-xs);
  color: var(--wk-error-text);
  margin-top: var(--wk-space-1);
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.wk-nav {
  display: flex;
  align-items: center;
  gap: var(--wk-space-1);
  padding: var(--wk-space-2) var(--wk-space-4);
  background-color: var(--wk-bg-nav);
  border-bottom: 1px solid var(--wk-border);
}

.wk-nav-brand {
  font-family: var(--wk-font-heading);
  font-size: var(--wk-text-lg);
  font-weight: var(--wk-font-bold);
  color: var(--wk-text);
  text-decoration: none;
  margin-right: auto;
}

.wk-nav-link {
  display: inline-flex;
  align-items: center;
  padding: var(--wk-space-1-5) var(--wk-space-3);
  font-family: var(--wk-font-body);
  font-size: var(--wk-text-sm);
  font-weight: var(--wk-font-medium);
  color: var(--wk-text-secondary);
  text-decoration: none;
  border-radius: var(--wk-radius-md);
  transition:
    color var(--wk-duration-fast) var(--wk-easing-default),
    background-color var(--wk-duration-fast) var(--wk-easing-default);
}

.wk-nav-link:hover {
  color: var(--wk-text);
  background-color: var(--wk-btn-ghost-hover-bg);
}

.wk-nav-link[aria-current="page"],
.wk-nav-link-active {
  color: var(--wk-color-primary-400);
  background-color: var(--wk-btn-ghost-hover-bg);
}

/* --- Sidebar Navigation --- */

.wk-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--wk-space-0-5);
  padding: var(--wk-space-4);
  background-color: var(--wk-bg-nav);
  border-right: 1px solid var(--wk-border);
  min-width: 240px;
}

.wk-sidebar-section {
  margin-bottom: var(--wk-space-4);
}

.wk-sidebar-heading {
  font-family: var(--wk-font-body);
  font-size: var(--wk-text-xs);
  font-weight: var(--wk-font-semibold);
  letter-spacing: var(--wk-tracking-wider);
  text-transform: uppercase;
  color: var(--wk-text-muted);
  padding: var(--wk-space-1) var(--wk-space-3);
  margin-bottom: var(--wk-space-1);
}

.wk-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--wk-space-2);
  padding: var(--wk-space-1-5) var(--wk-space-3);
  font-size: var(--wk-text-sm);
  font-weight: var(--wk-font-normal);
  color: var(--wk-text-secondary);
  text-decoration: none;
  border-radius: var(--wk-radius-md);
  transition:
    color var(--wk-duration-fast) var(--wk-easing-default),
    background-color var(--wk-duration-fast) var(--wk-easing-default);
}

.wk-sidebar-link:hover {
  color: var(--wk-text);
  background-color: var(--wk-btn-ghost-hover-bg);
}

.wk-sidebar-link[aria-current="page"],
.wk-sidebar-link-active {
  color: var(--wk-color-primary-400);
  background-color: var(--wk-btn-ghost-hover-bg);
  font-weight: var(--wk-font-medium);
}

/* --- Breadcrumb --- */

.wk-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--wk-space-1);
  font-size: var(--wk-text-sm);
  color: var(--wk-text-muted);
}

.wk-breadcrumb-link {
  color: var(--wk-text-secondary);
  text-decoration: none;
  transition: color var(--wk-duration-fast) var(--wk-easing-default);
}

.wk-breadcrumb-link:hover {
  color: var(--wk-text);
}

.wk-breadcrumb-separator::before {
  content: "/";
  margin: 0 var(--wk-space-1);
  color: var(--wk-text-muted);
}

.wk-breadcrumb-current {
  color: var(--wk-text);
  font-weight: var(--wk-font-medium);
}

/* ==========================================================================
   NEON GLOW UTILITIES
   ========================================================================== */

.wk-glow-violet {
  box-shadow: var(--wk-glow-violet);
}

.wk-glow-green {
  box-shadow: var(--wk-glow-green);
}

.wk-glow-magenta {
  box-shadow: var(--wk-glow-magenta);
}

.wk-glow-cyan {
  box-shadow: var(--wk-glow-cyan);
}

/* --- Text Glow --- */

.wk-text-glow-violet {
  text-shadow: 0 0 20px rgba(167, 139, 250, 0.5);
  color: var(--wk-color-glow-violet);
}

.wk-text-glow-green {
  text-shadow: 0 0 20px rgba(52, 211, 153, 0.5);
  color: var(--wk-color-glow-green);
}

.wk-text-glow-magenta {
  text-shadow: 0 0 20px rgba(244, 114, 182, 0.5);
  color: var(--wk-color-glow-magenta);
}

.wk-text-glow-cyan {
  text-shadow: 0 0 20px rgba(34, 211, 238, 0.5);
  color: var(--wk-color-glow-cyan);
}

/* --- Neon Pulse Animation --- */

.wk-neon-pulse {
  animation: wk-neon-pulse 3s ease-in-out infinite;
}

/* ==========================================================================
   STATUS / ALERT UTILITIES
   ========================================================================== */

.wk-alert {
  padding: var(--wk-space-3) var(--wk-space-4);
  border-radius: var(--wk-radius-md);
  border: 1px solid;
  font-size: var(--wk-text-sm);
  line-height: var(--wk-leading-sm);
}

.wk-alert-success {
  background-color: var(--wk-success-bg);
  color: var(--wk-success-text);
  border-color: var(--wk-success-border);
}

.wk-alert-warning {
  background-color: var(--wk-warning-bg);
  color: var(--wk-warning-text);
  border-color: var(--wk-warning-border);
}

.wk-alert-error {
  background-color: var(--wk-error-bg);
  color: var(--wk-error-text);
  border-color: var(--wk-error-border);
}

.wk-alert-info {
  background-color: var(--wk-info-bg);
  color: var(--wk-info-text);
  border-color: var(--wk-info-border);
}

/* ==========================================================================
   BADGES
   ========================================================================== */

.wk-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--wk-space-0-5) var(--wk-space-2);
  font-family: var(--wk-font-body);
  font-size: var(--wk-text-xs);
  font-weight: var(--wk-font-medium);
  line-height: var(--wk-leading-xs);
  border-radius: var(--wk-radius-full);
  white-space: nowrap;
}

.wk-badge-primary {
  background-color: var(--wk-color-primary-900);
  color: var(--wk-color-primary-300);
}

.wk-badge-secondary {
  background-color: var(--wk-color-secondary-900);
  color: var(--wk-color-secondary-300);
}

.wk-badge-accent {
  background-color: var(--wk-color-accent-900);
  color: var(--wk-color-accent-300);
}

.wk-badge-success {
  background-color: var(--wk-success-bg);
  color: var(--wk-success-text);
}

.wk-badge-warning {
  background-color: var(--wk-warning-bg);
  color: var(--wk-warning-text);
}

.wk-badge-error {
  background-color: var(--wk-error-bg);
  color: var(--wk-error-text);
}

.wk-badge-info {
  background-color: var(--wk-info-bg);
  color: var(--wk-info-text);
}

/* --- Light Mode Badge Overrides --- */

[data-theme="light"] .wk-badge-primary {
  background-color: var(--wk-color-primary-100);
  color: var(--wk-color-primary-700);
}

[data-theme="light"] .wk-badge-secondary {
  background-color: var(--wk-color-secondary-100);
  color: var(--wk-color-secondary-700);
}

[data-theme="light"] .wk-badge-accent {
  background-color: var(--wk-color-accent-100);
  color: var(--wk-color-accent-700);
}

/* --- Light Mode: No glow on hover --- */

[data-theme="light"] .wk-btn-primary:hover {
  box-shadow: none;
}

[data-theme="light"] .wk-btn-danger:hover {
  box-shadow: none;
}

/* ==========================================================================
   DIVIDER
   ========================================================================== */

.wk-divider {
  border: none;
  border-top: 1px solid var(--wk-border);
  margin: var(--wk-space-4) 0;
}

/* ========================================
   Neon Divider
   ======================================== */
.wk-neon-divider {
  height: 2px;
  background: linear-gradient(90deg, var(--wk-color-glow-violet), var(--wk-color-glow-green), var(--wk-color-glow-magenta));
  border: none;
  border-radius: 1px;
}

.wk-neon-divider--thick {
  height: 4px;
  border-radius: 2px;
}