/**
 * SHOELACE ZINE THEME
 * Custom Shoelace theme that matches Broadcast Zine aesthetic
 *
 * This replaces Shoelace's default theme entirely and uses
 * Shoelace's design token system to create a brutalist editorial look.
 */

/* ============================================
   GOOGLE FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ============================================
   BASE ZINE TOKENS
   ============================================ */

:root {
  /* TYPOGRAPHY */
  --zine-font-display: 'Space Mono', monospace;
  --zine-font-body: 'IBM Plex Sans', sans-serif;
  --zine-font-size-hero: clamp(2.5rem, 8vw, 5rem);
  --zine-font-size-h1: clamp(1.75rem, 4vw, 2.5rem);
  --zine-font-size-h2: 1.25rem;
  --zine-font-size-body: 1rem;
  --zine-font-size-small: 0.875rem;
  --zine-font-size-tiny: 0.75rem;
  --zine-line-height-tight: 1.1;
  --zine-line-height-body: 1.6;
  --zine-letter-spacing-tight: -0.02em;
  --zine-letter-spacing-wide: 0.1em;
  --zine-letter-spacing-wider: 0.15em;

  /* SPACING */
  --zine-space-section: 6rem;
  --zine-space-block: 2rem;
  --zine-space-element: 1rem;
  --zine-space-tight: 0.5rem;
  --zine-space-xs: 0.25rem;

  /* BORDERS & EFFECTS */
  --zine-border-width: 1px;
  --zine-border-width-thick: 2px;
  --zine-shadow-hard: 4px 4px 0 var(--zine-accent);
  --zine-shadow-subtle: 2px 2px 0 var(--zine-border);
  --zine-radius: 0;

  /* LAYOUT */
  --zine-max-content-width: 800px;
  --zine-max-wide-width: 1200px;

  /* TRANSITIONS */
  --zine-transition-instant: 0ms;
  --zine-transition-fast: 150ms;
}

/* Dark Mode Tokens (Default) */
.sl-theme-dark,
:root {
  /* COLORS - Dark Mode */
  --zine-bg-primary: #0a0a0a;
  --zine-bg-secondary: #141414;
  --zine-bg-tertiary: #1a1a1a;
  --zine-fg-primary: #f0f0e8;
  --zine-fg-muted: #888880;
  --zine-fg-inverse: #0a0a0a;
  --zine-accent: #4a1e5c;
  --zine-accent-hover: #5e2873;
  --zine-error: #ff4444;
  --zine-success: #44ff88;
  --zine-border: #333;
}

/* Light Mode Tokens */
.sl-theme-light {
  /* COLORS - Light Mode */
  --zine-bg-primary: #c8c8c8;
  --zine-bg-secondary: #d8d8d8;
  --zine-bg-tertiary: #b8b8b8;
  --zine-fg-primary: #0a0a0a;
  --zine-fg-muted: #555550;
  --zine-fg-inverse: #d4d4d4;
  --zine-accent: #4a1e5c;
  --zine-accent-hover: #5e2873;
  --zine-error: #dd0000;
  --zine-success: #008844;
  --zine-border: #888;
}

/* ============================================
   SHOELACE DESIGN TOKENS
   ============================================ */

:root {
  /* TYPOGRAPHY */
  --sl-font-sans: var(--zine-font-body);
  --sl-font-serif: var(--zine-font-body);
  --sl-font-mono: var(--zine-font-display);

  --sl-font-size-2x-small: var(--zine-font-size-tiny);
  --sl-font-size-x-small: var(--zine-font-size-tiny);
  --sl-font-size-small: var(--zine-font-size-small);
  --sl-font-size-medium: var(--zine-font-size-body);
  --sl-font-size-large: var(--zine-font-size-h2);
  --sl-font-size-x-large: var(--zine-font-size-h1);
  --sl-font-size-2x-large: var(--zine-font-size-h1);
  --sl-font-size-3x-large: var(--zine-font-size-hero);
  --sl-font-size-4x-large: var(--zine-font-size-hero);

  --sl-font-weight-light: 400;
  --sl-font-weight-normal: 400;
  --sl-font-weight-semibold: 600;
  --sl-font-weight-bold: 700;

  --sl-letter-spacing-denser: var(--zine-letter-spacing-tight);
  --sl-letter-spacing-dense: var(--zine-letter-spacing-tight);
  --sl-letter-spacing-normal: 0;
  --sl-letter-spacing-loose: var(--zine-letter-spacing-wide);
  --sl-letter-spacing-looser: var(--zine-letter-spacing-wider);

  --sl-line-height-denser: var(--zine-line-height-tight);
  --sl-line-height-dense: var(--zine-line-height-tight);
  --sl-line-height-normal: var(--zine-line-height-body);
  --sl-line-height-loose: var(--zine-line-height-body);
  --sl-line-height-looser: var(--zine-line-height-body);

  /* COLORS - Status colors (same in both themes) */
  --sl-color-primary-50: #f3e8f7;
  --sl-color-primary-100: #e1c5eb;
  --sl-color-primary-200: #c98fda;
  --sl-color-primary-300: #a85cc4;
  --sl-color-primary-400: #8a3aa6;
  --sl-color-primary-500: #5e2873;
  --sl-color-primary-600: #4a1e5c;
  --sl-color-primary-700: #3d1a4d;
  --sl-color-primary-800: #2f143b;
  --sl-color-primary-900: #1f0d27;
  --sl-color-primary-950: #0f0614;

  --sl-color-success-50: #f0fdf4;
  --sl-color-success-100: #dcfce7;
  --sl-color-success-200: #bbf7d0;
  --sl-color-success-300: #86efac;
  --sl-color-success-400: #4ade80;
  --sl-color-success-500: #22c55e;
  --sl-color-success-600: #16a34a;
  --sl-color-success-700: #15803d;
  --sl-color-success-800: #166534;
  --sl-color-success-900: #14532d;
  --sl-color-success-950: #052e16;

  --sl-color-warning-50: #fffbeb;
  --sl-color-warning-100: #fef3c7;
  --sl-color-warning-200: #fde68a;
  --sl-color-warning-300: #fcd34d;
  --sl-color-warning-400: #fbbf24;
  --sl-color-warning-500: #f59e0b;
  --sl-color-warning-600: #d97706;
  --sl-color-warning-700: #b45309;
  --sl-color-warning-800: #92400e;
  --sl-color-warning-900: #78350f;
  --sl-color-warning-950: #451a03;

  --sl-color-danger-50: #fef2f2;
  --sl-color-danger-100: #fee2e2;
  --sl-color-danger-200: #fecaca;
  --sl-color-danger-300: #fca5a5;
  --sl-color-danger-400: #f87171;
  --sl-color-danger-500: #ef4444;
  --sl-color-danger-600: #dc2626;
  --sl-color-danger-700: #b91c1c;
  --sl-color-danger-800: #991b1b;
  --sl-color-danger-900: #7f1d1d;
  --sl-color-danger-950: #450a0a;

  /* SPACING */
  --sl-spacing-3x-small: var(--zine-space-xs);
  --sl-spacing-2x-small: var(--zine-space-xs);
  --sl-spacing-x-small: var(--zine-space-tight);
  --sl-spacing-small: var(--zine-space-tight);
  --sl-spacing-medium: var(--zine-space-element);
  --sl-spacing-large: var(--zine-space-block);
  --sl-spacing-x-large: var(--zine-space-block);
  --sl-spacing-2x-large: var(--zine-space-section);
  --sl-spacing-3x-large: var(--zine-space-section);
  --sl-spacing-4x-large: var(--zine-space-section);

  /* BORDERS */
  /* Brutalist: no rounded corners for standard components */
  --sl-border-radius-small: 0;
  --sl-border-radius-medium: 0;
  --sl-border-radius-large: 0;
  --sl-border-radius-x-large: 0;
  /* DO NOT override circle/pill - breaks icons and pill badges */
  /* --sl-border-radius-circle: (use Shoelace default) */
  /* --sl-border-radius-pill: (use Shoelace default) */

  /* BRUTALIST BORDERS - No rounded corners */
  --sl-input-border-radius-small: 0;
  --sl-input-border-radius-medium: 0;
  --sl-input-border-radius-large: 0;

  /* BORDER WIDTHS */
  --sl-input-border-width: var(--zine-border-width);
  --sl-focus-ring-width: var(--zine-border-width-thick);

  /* SHADOWS - Brutalist: no shadows or minimal */
  --sl-shadow-x-small: none;
  --sl-shadow-small: none;
  --sl-shadow-medium: none;
  --sl-shadow-large: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --sl-shadow-x-large: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);

  /* TRANSITIONS - Instant for brutalist feel */
  --sl-transition-x-slow: var(--zine-transition-instant);
  --sl-transition-slow: var(--zine-transition-instant);
  --sl-transition-medium: var(--zine-transition-fast);
  --sl-transition-fast: var(--zine-transition-fast);
  --sl-transition-x-fast: var(--zine-transition-instant);

  /* Z-INDEX */
  --sl-z-index-drawer: 1000;
  --sl-z-index-dialog: 1000;
  --sl-z-index-dropdown: 1100;
  --sl-z-index-toast: 1200;
  --sl-z-index-tooltip: 1300;
}

/* ============================================
   DARK THEME (Default)
   ============================================ */

.sl-theme-dark,
body:not([class*="sl-theme"]) {
  /* COLORS - Neutrals (proper gradient from dark to light) */
  --sl-color-neutral-0: #000000;
  --sl-color-neutral-50: var(--zine-bg-primary);
  --sl-color-neutral-100: var(--zine-bg-secondary);
  --sl-color-neutral-200: var(--zine-bg-tertiary);
  --sl-color-neutral-300: #252525;
  --sl-color-neutral-400: var(--zine-border);
  --sl-color-neutral-500: #555555;
  --sl-color-neutral-600: #777777;
  --sl-color-neutral-700: var(--zine-fg-muted);
  --sl-color-neutral-800: #c0c0c0;
  --sl-color-neutral-900: #e0e0e0;
  --sl-color-neutral-950: var(--zine-fg-primary);
  --sl-color-neutral-1000: #ffffff;

  /* FOCUS RING */
  --sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) var(--zine-accent);
  --sl-focus-ring-color: var(--zine-accent);
  --sl-focus-ring-style: solid;
  --sl-focus-ring-offset: 0;

  /* INPUTS */
  --sl-input-background-color: var(--zine-bg-secondary);
  --sl-input-background-color-hover: var(--zine-bg-secondary);
  --sl-input-background-color-focus: var(--zine-bg-secondary);
  --sl-input-background-color-disabled: var(--zine-bg-tertiary);

  --sl-input-border-color: var(--zine-border);
  --sl-input-border-color-hover: var(--zine-border);
  --sl-input-border-color-focus: var(--zine-accent);
  --sl-input-border-color-disabled: var(--zine-border);

  --sl-input-color: var(--zine-fg-primary);
  --sl-input-color-hover: var(--zine-fg-primary);
  --sl-input-color-focus: var(--zine-fg-primary);
  --sl-input-color-disabled: var(--zine-fg-muted);

  --sl-input-font-family: var(--zine-font-body);
  --sl-input-font-size-small: var(--zine-font-size-small);
  --sl-input-font-size-medium: var(--zine-font-size-body);
  --sl-input-font-size-large: var(--zine-font-size-body);

  --sl-input-placeholder-color: var(--zine-fg-muted);
  --sl-input-placeholder-color-disabled: var(--zine-fg-muted);

  --sl-input-spacing-small: var(--zine-space-tight);
  --sl-input-spacing-medium: var(--zine-space-element);
  --sl-input-spacing-large: var(--zine-space-element);

  --sl-input-height-small: auto;
  --sl-input-height-medium: auto;
  --sl-input-height-large: auto;

  /* LABELS */
  --sl-input-label-font-size-small: var(--zine-font-size-tiny);
  --sl-input-label-font-size-medium: var(--zine-font-size-tiny);
  --sl-input-label-font-size-large: var(--zine-font-size-tiny);
  --sl-input-label-color: var(--zine-fg-muted);

  /* HELP TEXT */
  --sl-input-help-text-font-size-small: var(--zine-font-size-tiny);
  --sl-input-help-text-font-size-medium: var(--zine-font-size-tiny);
  --sl-input-help-text-font-size-large: var(--zine-font-size-tiny);
  --sl-input-help-text-color: var(--zine-fg-muted);

  /* BUTTONS */
  --sl-button-font-size-small: var(--zine-font-size-tiny);
  --sl-button-font-size-medium: var(--zine-font-size-small);
  --sl-button-font-size-large: var(--zine-font-size-body);

  /* PANELS */
  --sl-panel-background-color: var(--zine-bg-secondary);
  --sl-panel-border-color: var(--zine-border);
  --sl-panel-border-width: var(--zine-border-width);

  /* OVERLAYS */
  --sl-overlay-background-color: rgba(0, 0, 0, 0.7);

  /* TOOLTIPS */
  --sl-tooltip-background-color: var(--zine-bg-primary);
  --sl-tooltip-color: var(--zine-fg-primary);
  --sl-tooltip-font-family: var(--zine-font-body);
  --sl-tooltip-font-size: var(--zine-font-size-small);
  --sl-tooltip-border-radius: var(--zine-radius);
  --sl-tooltip-padding: var(--zine-space-tight);
}

/* ============================================
   LIGHT THEME
   ============================================ */

.sl-theme-light {
  /* COLORS - Neutrals (proper gradient from light to dark) */
  --sl-color-neutral-0: #ffffff;
  --sl-color-neutral-50: #f5f5f5;
  --sl-color-neutral-100: #e0e0e0;
  --sl-color-neutral-200: #d4d4d4;
  --sl-color-neutral-300: var(--zine-bg-primary);
  --sl-color-neutral-400: #b0b0b0;
  --sl-color-neutral-500: #999999;
  --sl-color-neutral-600: var(--zine-border);
  --sl-color-neutral-700: #666666;
  --sl-color-neutral-800: var(--zine-fg-muted);
  --sl-color-neutral-900: #222222;
  --sl-color-neutral-950: var(--zine-fg-primary);
  --sl-color-neutral-1000: #000000;

  /* FOCUS RING */
  --sl-focus-ring: 0 0 0 var(--sl-focus-ring-width) var(--zine-accent);
  --sl-focus-ring-color: var(--zine-accent);
  --sl-focus-ring-style: solid;
  --sl-focus-ring-offset: 0;

  /* INPUTS */
  --sl-input-background-color: var(--zine-bg-secondary);
  --sl-input-background-color-hover: var(--zine-bg-secondary);
  --sl-input-background-color-focus: var(--zine-bg-secondary);
  --sl-input-background-color-disabled: var(--zine-bg-tertiary);

  --sl-input-border-color: var(--zine-border);
  --sl-input-border-color-hover: var(--zine-border);
  --sl-input-border-color-focus: var(--zine-accent);
  --sl-input-border-color-disabled: var(--zine-border);

  --sl-input-color: var(--zine-fg-primary);
  --sl-input-color-hover: var(--zine-fg-primary);
  --sl-input-color-focus: var(--zine-fg-primary);
  --sl-input-color-disabled: var(--zine-fg-muted);

  --sl-input-font-family: var(--zine-font-body);
  --sl-input-font-size-small: var(--zine-font-size-small);
  --sl-input-font-size-medium: var(--zine-font-size-body);
  --sl-input-font-size-large: var(--zine-font-size-body);

  --sl-input-placeholder-color: var(--zine-fg-muted);
  --sl-input-placeholder-color-disabled: var(--zine-fg-muted);

  --sl-input-spacing-small: var(--zine-space-tight);
  --sl-input-spacing-medium: var(--zine-space-element);
  --sl-input-spacing-large: var(--zine-space-element);

  --sl-input-height-small: auto;
  --sl-input-height-medium: auto;
  --sl-input-height-large: auto;

  /* LABELS */
  --sl-input-label-font-size-small: var(--zine-font-size-tiny);
  --sl-input-label-font-size-medium: var(--zine-font-size-tiny);
  --sl-input-label-font-size-large: var(--zine-font-size-tiny);
  --sl-input-label-color: var(--zine-fg-muted);

  /* HELP TEXT */
  --sl-input-help-text-font-size-small: var(--zine-font-size-tiny);
  --sl-input-help-text-font-size-medium: var(--zine-font-size-tiny);
  --sl-input-help-text-font-size-large: var(--zine-font-size-tiny);
  --sl-input-help-text-color: var(--zine-fg-muted);

  /* BUTTONS */
  --sl-button-font-size-small: var(--zine-font-size-tiny);
  --sl-button-font-size-medium: var(--zine-font-size-small);
  --sl-button-font-size-large: var(--zine-font-size-body);

  /* PANELS */
  --sl-panel-background-color: var(--zine-bg-secondary);
  --sl-panel-border-color: var(--zine-border);
  --sl-panel-border-width: var(--zine-border-width);

  /* OVERLAYS */
  --sl-overlay-background-color: rgba(0, 0, 0, 0.5);

  /* TOOLTIPS */
  --sl-tooltip-background-color: var(--zine-bg-primary);
  --sl-tooltip-color: var(--zine-fg-primary);
  --sl-tooltip-font-family: var(--zine-font-body);
  --sl-tooltip-font-size: var(--zine-font-size-small);
  --sl-tooltip-border-radius: var(--zine-radius);
  --sl-tooltip-padding: var(--zine-space-tight);
}

/* ============================================
   COMPONENT-SPECIFIC OVERRIDES
   ============================================ */

/* BUTTONS - Brutalist editorial style */
sl-button::part(base) {
  font-family: var(--zine-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--zine-letter-spacing-wider);
  border-radius: 0;
  border-width: var(--zine-border-width);
  transition: all var(--zine-transition-instant);
}

sl-button[variant="default"]::part(base) {
  background: transparent;
  border-color: var(--zine-fg-primary);
  color: var(--zine-fg-primary);
}

sl-button[variant="default"]::part(base):hover {
  background: var(--zine-fg-primary);
  color: var(--zine-bg-primary);
}

sl-button[variant="primary"]::part(base) {
  background: var(--sl-color-primary-600);
  border-color: var(--sl-color-primary-600);
  /* Shoelace automatically calculates text color based on background luminance */
}

sl-button[variant="primary"]::part(base):hover {
  background: var(--sl-color-primary-700);
  border-color: var(--sl-color-primary-700);
  /* Shoelace automatically calculates text color based on background luminance */
}

sl-button[variant="danger"]::part(base) {
  background: transparent;
  border-color: var(--zine-error);
  color: var(--zine-error);
}

sl-button[variant="danger"]::part(base):hover {
  background: var(--zine-error);
  color: var(--zine-bg-primary);
}

sl-button[variant="warning"]::part(base) {
  background: transparent;
  border-color: var(--zine-accent);
  color: var(--zine-accent);
}

sl-button[variant="warning"]::part(base):hover {
  background: var(--zine-accent);
  color: var(--zine-bg-primary);
}

sl-button::part(base):disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* INPUTS - Bottom border only (editorial style) */
sl-input::part(base) {
  border: none;
  border-bottom: var(--zine-border-width) solid var(--zine-border);
  border-radius: 0;
  background: transparent;
  font-family: var(--zine-font-body);
  padding: var(--zine-space-tight) 0;
}

sl-input::part(input) {
  font-family: var(--zine-font-body);
  color: var(--zine-fg-primary);
}

sl-input::part(base):hover {
  border-bottom-color: var(--zine-border);
}

sl-input[focused]::part(base),
sl-input::part(base):focus-within {
  border-bottom-color: var(--zine-accent);
  box-shadow: none;
}

sl-input[disabled]::part(base) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* LABELS - Space Mono uppercase */
sl-input::part(form-control-label),
sl-select::part(form-control-label),
sl-textarea::part(form-control-label) {
  font-family: var(--zine-font-display);
  font-size: var(--zine-font-size-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--zine-letter-spacing-wider);
  color: var(--zine-fg-muted);
  margin-bottom: var(--zine-space-tight);
}

/* SELECT - Bottom border editorial style */
sl-select::part(combobox) {
  border: none;
  border-bottom: var(--zine-border-width) solid var(--zine-border);
  border-radius: 0;
  background: transparent;
  padding: var(--zine-space-tight) 0;
  font-family: var(--zine-font-body);
  color: var(--zine-fg-primary);
}

sl-select::part(combobox):hover {
  border-bottom-color: var(--zine-border);
}

sl-select[focused]::part(combobox),
sl-select::part(combobox):focus-within {
  border-bottom-color: var(--zine-accent);
  box-shadow: none;
}

sl-select[disabled]::part(combobox) {
  opacity: 0.5;
  cursor: not-allowed;
}

sl-select::part(display-input) {
  font-family: var(--zine-font-body);
  color: var(--zine-fg-primary);
}

sl-select::part(expand-icon) {
  color: var(--zine-fg-muted);
}

/* DROPDOWN MENU */
sl-dropdown::part(panel) {
  border: var(--zine-border-width) solid var(--zine-border);
  border-radius: 0;
  background: var(--zine-bg-secondary);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

sl-menu {
  border-radius: 0;
}

sl-menu-item::part(base) {
  font-family: var(--zine-font-body);
  color: var(--zine-fg-primary);
  border-radius: 0;
}

sl-menu-item::part(base):hover {
  background: var(--zine-bg-tertiary);
}

sl-menu-item[aria-selected="true"]::part(base) {
  background: var(--zine-accent);
  color: var(--zine-fg-inverse);
}

/* OPTIONS (for select dropdowns) */
sl-option::part(base) {
  font-family: var(--zine-font-body);
  color: var(--zine-fg-primary);
  border-radius: 0;
}

sl-option::part(base):hover {
  background: var(--zine-bg-tertiary);
}

sl-option[aria-selected="true"]::part(base) {
  background: var(--zine-accent);
  color: var(--zine-fg-inverse);
}

sl-option::part(checked-icon) {
  color: var(--zine-fg-inverse);
}

/* TEXTAREA - Bottom border editorial style */
sl-textarea::part(base) {
  border: none;
  border-bottom: var(--zine-border-width) solid var(--zine-border);
  border-radius: 0;
  background: transparent;
  font-family: var(--zine-font-body);
}

sl-textarea::part(textarea) {
  font-family: var(--zine-font-body);
  color: var(--zine-fg-primary);
  padding: var(--zine-space-tight) 0;
}

sl-textarea::part(base):hover {
  border-bottom-color: var(--zine-border);
}

sl-textarea[focused]::part(base),
sl-textarea::part(base):focus-within {
  border-bottom-color: var(--zine-accent);
  box-shadow: none;
}

sl-textarea[disabled]::part(base) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* CHECKBOX - Square brutalist style */
sl-checkbox::part(control) {
  border-color: var(--zine-border);
  border-width: var(--zine-border-width);
  border-radius: 0;
  background: transparent;
}

sl-checkbox::part(control):hover {
  border-color: var(--zine-accent);
}

sl-checkbox[checked]::part(control) {
  background: var(--zine-accent);
  border-color: var(--zine-accent);
}

sl-checkbox::part(checked-icon) {
  color: var(--zine-fg-inverse);
}

sl-checkbox::part(label) {
  font-family: var(--zine-font-body);
  color: var(--zine-fg-primary);
}

sl-checkbox[disabled]::part(base) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* RADIO - Keep circular shape (radios are always round) */
sl-radio::part(control) {
  border-color: var(--zine-border);
  border-width: var(--zine-border-width);
  border-radius: 50%;
  background: transparent;
}

sl-radio::part(control):hover {
  border-color: var(--zine-accent);
}

sl-radio[checked]::part(control) {
  background: var(--zine-accent);
  border-color: var(--zine-accent);
}

sl-radio::part(checked-icon) {
  color: var(--zine-fg-inverse);
}

sl-radio::part(label) {
  font-family: var(--zine-font-body);
  color: var(--zine-fg-primary);
}

sl-radio[disabled]::part(base) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* SWITCH */
sl-switch::part(control) {
  border: var(--zine-border-width) solid var(--zine-border);
  background: var(--zine-bg-tertiary);
  border-radius: 0;
}

sl-switch[checked]::part(control) {
  background: var(--zine-accent);
  border-color: var(--zine-accent);
}

sl-switch::part(thumb) {
  border-radius: 0;
  background: var(--zine-fg-primary);
}

sl-switch[checked]::part(thumb) {
  background: var(--zine-fg-inverse);
}

sl-switch::part(label) {
  font-family: var(--zine-font-body);
  color: var(--zine-fg-primary);
}

/* DIALOG */
sl-dialog::part(panel) {
  background: var(--zine-bg-primary);
  border: var(--zine-border-width-thick) solid var(--zine-accent);
  border-radius: 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

sl-dialog::part(header) {
  font-family: var(--zine-font-display);
  font-size: var(--zine-font-size-h2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--zine-letter-spacing-wide);
  color: var(--zine-fg-primary);
  border-bottom: var(--zine-border-width-thick) solid var(--zine-accent);
  padding: var(--zine-space-element);
}

sl-dialog::part(body) {
  padding: var(--zine-space-element);
  color: var(--zine-fg-primary);
}

sl-dialog::part(footer) {
  border-top: var(--zine-border-width) solid var(--zine-border);
  padding: var(--zine-space-element);
}

sl-dialog::part(close-button) {
  color: var(--zine-fg-primary);
}

sl-dialog::part(close-button):hover {
  color: var(--zine-accent);
}

sl-dialog::part(overlay) {
  background: rgba(0, 0, 0, 0.7);
}

/* ALERT */
sl-alert {
  border-radius: 0;
  border-left-width: var(--zine-border-width-thick);
}

sl-alert::part(base) {
  background: var(--zine-bg-secondary);
  border: var(--zine-border-width) solid var(--zine-border);
  border-radius: 0;
  font-family: var(--zine-font-body);
  color: var(--zine-fg-primary);
}

sl-alert[variant="primary"]::part(base) {
  border-left-color: var(--zine-accent);
}

sl-alert[variant="success"]::part(base) {
  border-left-color: var(--zine-success);
}

sl-alert[variant="warning"]::part(base) {
  border-left-color: var(--zine-accent);
}

sl-alert[variant="danger"]::part(base) {
  border-left-color: var(--zine-error);
}

sl-alert::part(icon) {
  font-size: 1.25rem;
}

sl-alert::part(message) {
  font-family: var(--zine-font-body);
}

sl-alert::part(close-button) {
  color: var(--zine-fg-primary);
}

sl-alert::part(close-button):hover {
  color: var(--zine-accent);
}

/* SPINNER */
sl-spinner {
  --track-color: var(--zine-border);
  --indicator-color: var(--zine-accent);
  --track-width: var(--zine-border-width-thick);
}

/* PROGRESS BAR */
sl-progress-bar::part(base) {
  background: var(--zine-bg-tertiary);
  border: var(--zine-border-width) solid var(--zine-border);
  border-radius: 0;
  overflow: hidden;
}

sl-progress-bar::part(indicator) {
  background: var(--zine-accent);
}

/* ICON BUTTON */
sl-icon-button::part(base) {
  color: var(--zine-fg-primary);
  border-radius: 0;
  transition: all var(--zine-transition-fast);
}

sl-icon-button::part(base):hover {
  color: var(--zine-accent);
  background: var(--zine-bg-tertiary);
}

/* DRAWER */
sl-drawer::part(panel) {
  background: var(--zine-bg-primary);
  border: var(--zine-border-width-thick) solid var(--zine-accent);
}

sl-drawer::part(header) {
  font-family: var(--zine-font-display);
  font-size: var(--zine-font-size-h2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--zine-letter-spacing-wide);
  color: var(--zine-fg-primary);
  border-bottom: var(--zine-border-width-thick) solid var(--zine-accent);
}

sl-drawer::part(body) {
  color: var(--zine-fg-primary);
}

sl-drawer::part(footer) {
  border-top: var(--zine-border-width) solid var(--zine-border);
}

sl-drawer::part(close-button) {
  color: var(--zine-fg-primary);
}

sl-drawer::part(close-button):hover {
  color: var(--zine-accent);
}

/* CARD */
sl-card::part(base) {
  background: var(--zine-bg-secondary);
  border: var(--zine-border-width) solid var(--zine-border);
  border-radius: 0;
  box-shadow: none;
}

sl-card::part(header) {
  font-family: var(--zine-font-display);
  font-size: var(--zine-font-size-h2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--zine-letter-spacing-wide);
  color: var(--zine-fg-primary);
  border-bottom: var(--zine-border-width-thick) solid var(--zine-accent);
}

sl-card::part(body) {
  color: var(--zine-fg-primary);
}

sl-card::part(footer) {
  border-top: var(--zine-border-width) solid var(--zine-border);
}

/* TAG */
/* NO color overrides - Shoelace auto-calculates contrast based on --sl-color-* scales */
/* Typography and border styling only */
sl-tag::part(base) {
  font-family: var(--zine-font-display);
  font-size: var(--zine-font-size-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--zine-letter-spacing-wider);
  border-radius: 0;
}

/* BADGE */
/* NO color overrides - Shoelace auto-calculates contrast based on --sl-color-* scales */
/* Typography and border styling only */
sl-badge::part(base) {
  font-family: var(--zine-font-display);
  font-size: var(--zine-font-size-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--zine-letter-spacing-wider);
  border-radius: 0;
}

/* BUTTON GROUP */
sl-button-group {
  --sl-spacing-x-small: 0;
}

sl-button-group sl-button::part(base) {
  border-radius: 0;
}

sl-button-group sl-button:not(:last-child)::part(base) {
  border-right-width: 0;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Checkbox/Radio/Switch stacking container */
.form-controls-stack {
  display: flex;
  flex-direction: column;
  gap: var(--zine-space-tight);
}

/* Custom .badge class variants (for backwards compatibility with non-Shoelace HTML) */
.badge {
  font-family: var(--zine-font-display);
  font-size: var(--zine-font-size-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--zine-letter-spacing-wider);
  display: inline-flex;
  align-items: center;
  gap: var(--zine-space-tight);
  padding: var(--zine-space-xs) var(--zine-space-tight);
  background: transparent;
  border: var(--zine-border-width) solid var(--zine-border);
  border-radius: var(--zine-radius);
  color: var(--zine-fg-primary);
}

.badge.badge-success {
  color: var(--zine-success);
  border-color: var(--zine-success);
}

.badge.badge-warning {
  color: var(--zine-accent);
  border-color: var(--zine-accent);
}

.badge.badge-error {
  color: var(--zine-error);
  border-color: var(--zine-error);
}