/*
 * Haberdash - Modular Component System
 * Generated by build.py
 */

/* ========== TOKENS.CSS ========== */
/*
 * Haberdash Design Tokens — SPECTRA EDITION
 * All visual & emotional tokens driven by the 4 VRGB dimensions
 */

:root {
  /* ==================================== */
  /* 1. CORE VRGB INPUTS — injected by the builder */
  /* ==================================== */
  --d1_h: 210;          /* Hue from Color Harmony */
  --d1_s: 70%;          /* Saturation from Color Harmony */
  --d1_l: 50%;          /* Lightness from Color Harmony */
  --d2_l: 50;           /* L* from Edge Definition */
  --d3_l: 50;           /* L* from Spatial Density */
  --d4_l: 50;           /* L* from Visual Hierarchy */

  /* ==================================== */
  /* 2. PRIMARY PALETTE — derived from D1 */
  /* ==================================== */
  --primary:        hsl(var(--d1_h), calc(var(--d1_s) * 1.1), calc(var(--d1_l) + 12%));
  --primary-hover:  hsl(var(--d1_h), calc(var(--d1_s) * 1.2), calc(var(--d1_l) + 18%));
  --primary-light:  hsl(var(--d1_h), calc(var(--d1_s) * 0.6), calc(var(--d1_l) + 40%));
  --secondary:      hsl(var(--d1_h), 20%, 40%);

  /* Background / surface — inverted lightness from D1 + breathing from D3 */
  --background:     hsl(var(--d1_h), 15%, calc(98% - (var(--d1_l) * 0.9) + (var(--d3_l) * 0.1)));
  --surface:        hsl(var(--d1_h), 12%, calc(96% - (var(--d1_l) * 0.8) + (var(--d3_l) * 0.15)));
  --surface-light:  hsl(var(--d1_h), 10%, calc(97% - (var(--d1_l) * 0.7) + (var(--d3_l) * 0.2)));

  --text:           hsl(var(--d1_h), 10%, calc(10% + (var(--d1_l) * 0.3)));
  --text-heading:   hsl(var(--d1_h), 15%, calc(5% + (var(--d1_l) * 0.25)));
  --text-secondary: hsl(var(--d1_h), 10%, calc(40% + (var(--d1_l) * 0.35)));

  --border:         hsl(var(--d1_h), 15%, calc(80% - (var(--d1_l) * 0.6)));
  --border-light:   hsl(var(--d1_h), 10%, calc(85% - (var(--d1_l) * 0.5)));

  /* ==================================== */
  /* 3. SPACING — driven by Spatial Density (D3) */
  /* ==================================== */
  --space-unit: 1rem;
  --space-multiplier: calc(0.8 + (var(--d3_l) / 200)); /* 0.8 → 1.3 */
  --space-2xs: calc(0.125rem * var(--space-multiplier));
  --space-xs:  calc(0.25rem  * var(--space-multiplier));
  --space-sm:  calc(0.5rem   * var(--space-multiplier));
  --space-md:  calc(0.75rem  * var(--space-multiplier));
  --space-lg:  calc(1rem     * var(--space-multiplier));
  --space-xl:  calc(1.5rem   * var(--space-multiplier));
  --space-2xl: calc(2rem     * var(--space-multiplier));
  --space-3xl: calc(2.5rem   * var(--space-multiplier));

  /* ==================================== */
  /* 4. BORDER RADIUS — curvature follows saturation (D1) + edge softness (D2) */
  /* ==================================== */
  --radius-base: calc(4px + (var(--d1_s) / 8) + ((100 - var(--d2_l)) / 10));
  --radius-sm:   calc(var(--radius-base) * 0.5);
  --radius-md:   var(--radius-base);
  --radius-lg:   calc(var(--radius-base) * 1.5);
  --radius-xl:   calc(var(--radius-base) * 2);
  --radius-full: 9999px;

  /* ==================================== */
  /* 5. SHADOWS — depth from Edge Definition (D2) + mood lightness */
  /* ==================================== */
  --shadow-intensity: calc((100 - var(--d2_l)) / 8);
  --shadow-sm: 0 calc(1px * var(--shadow-intensity)) calc(2px * var(--shadow-intensity)) rgba(0,0,0,0.05);
  --shadow-md: 0 calc(4px * var(--shadow-intensity)) calc(6px * var(--shadow-intensity)) rgba(0,0,0,0.1);
  --shadow-lg: 0 calc(10px * var(--shadow-intensity)) calc(20px * var(--shadow-intensity)) rgba(0,0,0,0.15);

  /* ==================================== */
  /* 6. TYPOGRAPHY — fully alive */
  /* ==================================== */
  --type-lightness: calc((var(--d1_l) * 0.7) + (var(--d3_l) * 0.3));
  --font-size-base: calc(1rem + (var(--type-lightness) / 320));

  --line-height-normal:  calc(1.5 + (var(--d3_l) / 140));
  --line-height-tight:   calc(1.25 + (var(--d3_l) / 400));
  --line-height-relaxed: calc(1.75 + (var(--d3_l) / 120));

  --letter-spacing-tight:   calc(-0.02em + (var(--d3_l) / -1500));
  --letter-spacing-normal:  calc(0em + (var(--d3_l) / 1200));

  --edge-sharpness: calc(100 - var(--d2_l));
  --font-weight-medium: calc(500 + (var(--edge-sharpness) * 1.4));
  --font-weight-bold:   calc(700 + (var(--edge-sharpness) * 1.8));

  --hierarchy-strength: calc(100 - var(--d4_l));
  --heading-scale:      calc(1.18 + (var(--hierarchy-strength) / 160));

  --font-size-lg:    calc(var(--font-size-base) * var(--heading-scale));
  --font-size-xl:    calc(var(--font-size-lg)    * var(--heading-scale));
  --font-size-2xl:   calc(var(--font-size-xl)    * var(--heading-scale));
  --font-size-3xl:   calc(var(--font-size-2xl)   * calc(var(--heading-scale) * 1.12));

  /* ==================================== */
  /* 7. TRANSITIONS — energy from hue warmth + density */
  /* ==================================== */
  --transition-base: calc(180ms + (var(--d1_h) / 360 * 300ms) + (var(--d3_l) / 200 * 200ms)) cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: calc(var(--transition-base) * 0.6);
  --transition-slow: calc(var(--transition-base) * 1.6);

  /* ==================================== */
  /* 8. SEMANTIC FEEDBACK COLORS */
  /* ==================================== */
  --success: hsl(140, 60%, 50%);
  --warning: hsl(45, 90%, 55%);
  --error: hsl(0, 70%, 55%);
  --info: hsl(200, 70%, 55%);

  /* ==================================== */
  /* 9. COMPONENT INFRASTRUCTURE — Required by component API */
  /* ==================================== */
  /* Form controls */
  --checkbox-size: 1.125rem;
  --radio-size: 1.125rem;
  --toggle-width: 48px;
  --toggle-height: 24px;
  --toggle-thumb-size: 20px;
  --toggle-thumb-offset: 2px;
  --slider-track-height: 8px;
  --slider-thumb-size: 18px;

  /* Loading indicators */
  --spinner-size: 2rem;
  --spinner-size-sm: 1.25rem;
  --spinner-size-lg: 3rem;
  --progress-height: 0.5rem;

  /* Badges and icons */
  --badge-rank-size: 2rem;
  --icon-size-sm: 1rem;
  --icon-size-md: 1.5rem;
  --icon-size-lg: 2rem;
  --icon-size-xl: 2.5rem;
  --icon-size-2xl: 3rem;
  --icon-size-3xl: 3rem;

  /* ==================================== */
  /* 10. INTERACTION UTILITIES */
  /* ==================================== */
  --color-white: white;
  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 3px;
  --border-width-xl: 4px;
  --opacity-hover: 0.92;
  --opacity-disabled: 0.5;
  --hover-lift: -1px;
  --hover-lift-lg: -2px;
  --focus-ring-shadow: 0 0 0 3px hsla(var(--d1_h), 70%, 50%, 0.25);
}


/* ========== RESET.CSS ========== */
/*
 * Haberdash Reset
 * Browser reset and foundational styles
 */

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

* {
  margin: 0;
}

body {
  line-height: var(--line-height-normal, 1.5);
  -webkit-font-smoothing: antialiased;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text, hsl(0, 0%, 10%));
  background-color: var(--background, hsl(0, 0%, 98%));
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

a {
  color: var(--primary, hsl(210, 70%, 50%));
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  font-family: 'Courier New', Courier, monospace;
  background: var(--surface, hsl(0, 0%, 95%));
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.9em;
}


/* ========== UTILITIES.CSS ========== */
/*
 * Haberdash Utility Classes
 * Layout, spacing, and helper utilities
 */

/* Layout utilities */
.flex {
  display: flex;
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--column,
.flex--col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.grid {
  display: grid;
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg, 1rem);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg, 1rem);
}

/* Spacing utilities */
.gap-xs {
  gap: var(--space-xs, 0.25rem);
}

.gap-sm {
  gap: var(--space-sm, 0.5rem);
}

.gap-md {
  gap: var(--space-md, 0.75rem);
}

.gap-lg {
  gap: var(--space-lg, 1rem);
}

.gap-xl {
  gap: var(--space-xl, 1.5rem);
}

/* Margin utilities */
.m-0 { margin: 0; }
.mt-xs { margin-top: var(--space-xs, 0.25rem); }
.mt-sm { margin-top: var(--space-sm, 0.5rem); }
.mt-md { margin-top: var(--space-md, 0.75rem); }
.mt-lg { margin-top: var(--space-lg, 1rem); }
.mt-xl { margin-top: var(--space-xl, 1.5rem); }

.mb-xs { margin-bottom: var(--space-xs, 0.25rem); }
.mb-sm { margin-bottom: var(--space-sm, 0.5rem); }
.mb-md { margin-bottom: var(--space-md, 0.75rem); }
.mb-lg { margin-bottom: var(--space-lg, 1rem); }
.mb-xl { margin-bottom: var(--space-xl, 1.5rem); }

.ml-xs { margin-left: var(--space-xs, 0.25rem); }
.ml-sm { margin-left: var(--space-sm, 0.5rem); }
.ml-md { margin-left: var(--space-md, 0.75rem); }
.ml-lg { margin-left: var(--space-lg, 1rem); }
.ml-xl { margin-left: var(--space-xl, 1.5rem); }

.mr-xs { margin-right: var(--space-xs, 0.25rem); }
.mr-sm { margin-right: var(--space-sm, 0.5rem); }
.mr-md { margin-right: var(--space-md, 0.75rem); }
.mr-lg { margin-right: var(--space-lg, 1rem); }
.mr-xl { margin-right: var(--space-xl, 1.5rem); }

/* Padding utilities */
.p-0 { padding: 0; }
.pt-xs { padding-top: var(--space-xs, 0.25rem); }
.pt-sm { padding-top: var(--space-sm, 0.5rem); }
.pt-md { padding-top: var(--space-md, 0.75rem); }
.pt-lg { padding-top: var(--space-lg, 1rem); }
.pt-xl { padding-top: var(--space-xl, 1.5rem); }

.pb-xs { padding-bottom: var(--space-xs, 0.25rem); }
.pb-sm { padding-bottom: var(--space-sm, 0.5rem); }
.pb-md { padding-bottom: var(--space-md, 0.75rem); }
.pb-lg { padding-bottom: var(--space-lg, 1rem); }
.pb-xl { padding-bottom: var(--space-xl, 1.5rem); }

/* Display utilities */
.hidden {
  display: none;
}

.visible {
  display: block;
}

/* Width utilities */
.w-full {
  width: 100%;
}

/* Text utilities */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-secondary {
  color: var(--text-secondary, hsl(0, 0%, 40%));
}

/* Color utilities */
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }

.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-success { background-color: var(--success); }
.bg-warning { background-color: var(--warning); }
.bg-error { background-color: var(--error); }
.bg-info { background-color: var(--info); }
.bg-surface { background-color: var(--surface); }
.bg-background { background-color: var(--background); }

/* Border utilities */
.border { border: var(--border-width-sm) solid var(--border); }
.border-primary { border-color: var(--primary); }
.border-success { border-color: var(--success); }
.border-warning { border-color: var(--warning); }
.border-error { border-color: var(--error); }

/* Border radius utilities */
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-xl { border-radius: var(--radius-xl); }
.radius-full { border-radius: var(--radius-full); }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Typography utilities */
.font-sm { font-size: var(--font-size-sm); }
.font-base { font-size: var(--font-size-base); }
.font-lg { font-size: var(--font-size-lg); }
.font-xl { font-size: var(--font-size-xl); }
.font-2xl { font-size: var(--font-size-2xl); }
.font-3xl { font-size: var(--font-size-3xl); }

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-bold { font-weight: var(--font-weight-bold); }


/* ========== COMPONENT: ALERT ========== */
/*
 * Alert Component
 * Notification messages with contextual variants
 */

.alert {
  padding: var(--space-lg, 1rem);
  border-radius: var(--radius-md, 8px);
  border-left: var(--border-width-xl) solid;
  margin-bottom: var(--space-lg, 1rem);
}

.alert__title {
  font-weight: var(--font-weight-bold, 700);
  margin-bottom: var(--space-sm, 0.5rem);
}

.alert__message {
  margin: 0;
}

.alert--success {
  background: var(--success-bg);
  border-color: var(--success, #22c55e);
  color: var(--success-text);
}

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

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

.alert--info {
  background: var(--info-bg);
  border-color: var(--info, #3b82f6);
  color: var(--info-text);
}


/* ========== COMPONENT: BADGE ========== */
/*
 * Badge Component
 * Small status indicators and labels
 */

.badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  border-radius: var(--radius-full, 9999px);
  background: var(--surface, #f5f5f5);
  color: var(--text, #1a1a1a);
  border: var(--border-width-sm) solid var(--border, #d4d4d4);
}

.badge--primary {
  background: var(--primary-light, #dbeafe);
  color: var(--primary, #3b82f6);
  border-color: var(--primary, #3b82f6);
}

.badge--success {
  background: var(--success-bg);
  color: var(--success, #22c55e);
  border-color: var(--success, #22c55e);
}

.badge--warning {
  background: var(--warning-bg);
  color: var(--warning, #eab308);
  border-color: var(--warning, #eab308);
}

.badge--error {
  background: var(--error-bg);
  color: var(--error, #ef4444);
  border-color: var(--error, #ef4444);
}

.badge--info {
  background: var(--info-bg);
  color: var(--info, #3b82f6);
  border-color: var(--info, #3b82f6);
}

.badge--neutral {
  background: var(--surface, #f5f5f5);
  color: var(--text-secondary, #666);
  border-color: var(--border, #d4d4d4);
}

.badge--rank {
  background: var(--primary, #3b82f6);
  color: var(--color-white);
  border-color: var(--primary, #3b82f6);
  font-weight: var(--font-weight-bold, 700);
  min-width: var(--badge-rank-size);
  text-align: center;
}


/* ========== COMPONENT: BUTTON ========== */
/*
 * Button Component
 * Versatile button styles with variants and sizes
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-size-base, 1rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: var(--line-height-normal);
  text-decoration: none;
  border: var(--border-width-sm) solid transparent;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: all var(--transition-base, 200ms ease);
  background: var(--surface, hsl(0, 0%, 95%));
  color: var(--text, hsl(0, 0%, 10%));
}

.btn:hover {
  opacity: var(--opacity-hover);
  transform: translateY(var(--hover-lift));
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* Primary variant */
.btn--primary {
  background: var(--primary, hsl(210, 70%, 50%));
  color: var(--color-white);
  border-color: var(--primary, hsl(210, 70%, 50%));
}

.btn--primary:hover {
  background: var(--primary-hover, hsl(210, 70%, 60%));
}

/* Secondary variant */
.btn--secondary {
  background: var(--secondary, hsl(0, 0%, 40%));
  color: var(--color-white);
  border-color: var(--secondary, hsl(0, 0%, 40%));
}

.btn--secondary:hover {
  background: var(--secondary-hover, hsl(0, 0%, 50%));
}

/* Success variant */
.btn--success {
  background: var(--success, hsl(140, 60%, 50%));
  color: var(--color-white);
  border-color: var(--success, hsl(140, 60%, 50%));
}

/* Warning variant */
.btn--warning {
  background: var(--warning, hsl(45, 90%, 55%));
  color: var(--text);
  border-color: var(--warning, hsl(45, 90%, 55%));
}

/* Error variant */
.btn--error {
  background: var(--error, hsl(0, 70%, 55%));
  color: var(--color-white);
  border-color: var(--error, hsl(0, 70%, 55%));
}

/* Size variants */
.btn--sm {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm, 0.875rem);
}

.btn--lg {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-lg, 1.125rem);
}

.btn--xl {
  padding: var(--space-lg) var(--space-2xl);
  font-size: var(--font-size-xl, 1.25rem);
}


/* ========== COMPONENT: CARD ========== */
/*
 * Card Component
 * Container for grouped content with header, body, and actions
 */

.card {
  background: var(--surface, #f5f5f5);
  border: var(--border-width-sm) solid var(--border, #d4d4d4);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  transition: all var(--transition-base, 200ms);
}

.card:hover {
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.1));
  transform: translateY(var(--hover-lift-lg));
}

.card__header {
  padding: var(--space-lg, 1rem);
  border-bottom: var(--border-width-sm) solid var(--border-light, #e5e5e5);
}

.card__icon {
  font-size: var(--font-size-2xl, 1.5rem);
  margin-bottom: var(--space-sm, 0.5rem);
}

.card__title {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--text-heading, #000);
  margin: 0;
}

.card__body {
  padding: var(--space-lg, 1rem);
}

.card__description {
  color: var(--text-secondary, #666);
  margin: 0;
}

.card__actions {
  padding: var(--space-lg, 1rem);
  border-top: var(--border-width-sm) solid var(--border-light, #e5e5e5);
  display: flex;
  gap: var(--space-sm, 0.5rem);
}


/* ========== COMPONENT: FORM ========== */
/*
 * Form Component
 * Input fields, selects, textareas, and form controls
 */

.form-group {
  margin-bottom: var(--space-lg, 1rem);
}

.form__label {
  display: block;
  margin-bottom: var(--space-sm, 0.5rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-heading, #000);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--input-bg);
  border: var(--border-width-sm) solid var(--border, #d4d4d4);
  border-radius: var(--radius-md, 8px);
  font-size: var(--font-size-base, 1rem);
  transition: border-color var(--transition-fast, 150ms);
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--primary, #3b82f6);
  box-shadow: var(--focus-ring-shadow);
}

.form__textarea {
  min-height: var(--textarea-min-height);
  resize: vertical;
}

.form__hint {
  display: block;
  margin-top: var(--space-xs, 0.25rem);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-secondary, #666);
}

.form__fieldset {
  border: var(--border-width-sm) solid var(--border, #d4d4d4);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-lg, 1rem);
  margin-bottom: var(--space-lg, 1rem);
}

.form__legend {
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-heading, #000);
  padding: 0 var(--space-sm, 0.5rem);
}

.form__choice {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  margin-bottom: var(--space-sm, 0.5rem);
  cursor: pointer;
}

.form__choice input[type="checkbox"],
.form__choice input[type="radio"] {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  cursor: pointer;
}


/* ========== COMPONENT: LIST-CARD ========== */
/*
 * List Card Component
 * Display lists of items with status
 */

.list-card {
  background: var(--surface, #f5f5f5);
  border: var(--border-width-sm) solid var(--border, #d4d4d4);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.list-card__header {
  padding: var(--space-lg, 1rem);
  border-bottom: var(--border-width-sm) solid var(--border-light, #e5e5e5);
}

.list-card__title {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-bold, 700);
  margin: 0;
}

.list-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-card__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg, 1rem);
  border-bottom: var(--border-width-sm) solid var(--border-light, #e5e5e5);
}

.list-card__item:last-child {
  border-bottom: none;
}

.list-card__item-content {
  flex: 1;
}

.list-card__item-title {
  font-weight: var(--font-weight-medium, 500);
  margin-bottom: var(--space-xs, 0.25rem);
}

.list-card__item-subtitle {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-secondary, #666);
  margin: 0;
}

.list-card__item-meta {
  margin-left: var(--space-lg, 1rem);
}

.list-card__item-status {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  border-radius: var(--radius-sm, 4px);
}

.list-card__item-status--success {
  background: var(--success-bg);
  color: var(--success, #22c55e);
}

.list-card__item-status--warning {
  background: var(--warning-bg);
  color: var(--warning, #eab308);
}

.list-card__item-status--error {
  background: var(--error-bg);
  color: var(--error, #ef4444);
}


/* ========== COMPONENT: PROGRESS ========== */
/*
 * Progress & Loading Component
 * Progress bars and loading spinners
 */

.spinner {
  border: var(--border-width-lg) solid var(--border-light, #e5e5e5);
  border-top-color: var(--primary, #3b82f6);
  border-radius: var(--radius-full, 9999px);
  width: var(--spinner-size);
  height: var(--spinner-size);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner--sm {
  width: var(--spinner-size-sm);
  height: var(--spinner-size-sm);
  border-width: var(--border-width-md);
}

.spinner--lg {
  width: var(--spinner-size-lg);
  height: var(--spinner-size-lg);
  border-width: var(--border-width-xl);
}

.progress {
  width: 100%;
  height: var(--progress-height);
  background: var(--surface, #f5f5f5);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background: var(--primary, #3b82f6);
  border-radius: var(--radius-full, 9999px);
  transition: width var(--transition-slow, 300ms);
}

.progress--success .progress__bar {
  background: var(--success, #22c55e);
}

.progress--warning .progress__bar {
  background: var(--warning, #eab308);
}

/* Example width classes for demonstration */
.progress__bar--45 {
  width: 45%;
}

.progress__bar--75 {
  width: 75%;
}


/* ========== COMPONENT: RESULT-CARD ========== */
/*
 * Result Card Component
 * Display metrics and analysis results
 */

.result-card {
  background: var(--surface, #f5f5f5);
  border: var(--border-width-sm) solid var(--border, #d4d4d4);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.result-card__header {
  padding: var(--space-lg, 1rem);
  border-bottom: var(--border-width-sm) solid var(--border-light, #e5e5e5);
}

.result-card__title {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: var(--font-weight-bold, 700);
  margin-bottom: var(--space-xs, 0.25rem);
}

.result-card__subtitle {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-secondary, #666);
  margin: 0;
}

.result-card__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--metric-min-width), 1fr));
  gap: var(--space-lg, 1rem);
  padding: var(--space-lg, 1rem);
}

.result-card__metric {
  text-align: center;
}

.result-card__metric-label {
  display: block;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-secondary, #666);
  margin-bottom: var(--space-xs, 0.25rem);
}

.result-card__metric-value {
  display: block;
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--text-heading, #000);
}

.result-card__footer {
  padding: var(--space-lg, 1rem);
  border-top: var(--border-width-sm) solid var(--border-light, #e5e5e5);
  display: flex;
  gap: var(--space-sm, 0.5rem);
}


/* ========== COMPONENT: SLIDER ========== */
/*
 * Slider Component
 * Range input controls
 */

.slider {
  margin-bottom: var(--space-lg, 1rem);
}

.slider__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: var(--font-weight-medium, 500);
  margin-bottom: var(--space-sm, 0.5rem);
  color: var(--text-heading, #000);
}

.slider__track {
  position: relative;
}

.slider__input {
  width: 100%;
  height: var(--slider-track-height, 6px);
  border-radius: var(--radius-sm, 4px);
  background: var(--border, #e0e0e0);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--slider-thumb-size, 18px);
  height: var(--slider-thumb-size, 18px);
  border-radius: var(--radius-full, 9999px);
  background: var(--primary, #3b82f6);
  cursor: pointer;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  transition: transform var(--transition-fast, 150ms ease);
}

.slider__input::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.slider__input::-moz-range-thumb {
  width: var(--slider-thumb-size, 18px);
  height: var(--slider-thumb-size, 18px);
  border-radius: var(--radius-full, 9999px);
  background: var(--primary, #3b82f6);
  cursor: pointer;
  border: none;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
  transition: transform var(--transition-fast, 150ms ease);
}

.slider__input::-moz-range-thumb:hover {
  transform: scale(1.1);
}

.slider__labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-xs, 0.25rem);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-secondary, #666);
}

.slider__output {
  display: block;
  margin-top: var(--space-sm, 0.5rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-heading, #000);
}


/* ========== COMPONENT: TOAST ========== */
/*
 * Toast Component
 * Temporary notification messages
 */

.toast-container {
  position: fixed;
  top: var(--space-lg, 1rem);
  right: var(--space-lg, 1rem);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
  max-width: var(--toast-max-width);
}

.toast {
  display: flex;
  align-items: start;
  gap: var(--space-sm, 0.5rem);
  padding: var(--space-lg, 1rem);
  background: var(--color-white);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0,0,0,0.15));
  border-left: var(--border-width-xl) solid;
  animation: slideIn var(--transition-base) ease;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast__icon {
  font-size: var(--font-size-xl, 1.25rem);
  flex-shrink: 0;
}

.toast__content {
  flex: 1;
}

.toast__title {
  font-weight: var(--font-weight-bold, 700);
  margin-bottom: var(--space-xs, 0.25rem);
}

.toast__message {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-secondary, #666);
  margin: 0;
}

.toast__close {
  background: none;
  border: none;
  font-size: var(--icon-size-md);
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary, #666);
  padding: 0;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.toast--success { border-color: var(--success, #22c55e); }
.toast--warning { border-color: var(--warning, #eab308); }
.toast--error { border-color: var(--error, #ef4444); }
.toast--info { border-color: var(--info, #3b82f6); }


/* ========== COMPONENT: TOGGLE ========== */
/*
 * Toggle Switch Component
 * On/off switch control
 */

.toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 0.5rem);
  cursor: pointer;
}

.toggle__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle__track {
  position: relative;
  width: var(--toggle-width);
  height: var(--toggle-height);
  background: var(--border, #d4d4d4);
  border-radius: var(--radius-full, 9999px);
  transition: background var(--transition-fast, 150ms);
}

.toggle__input:checked + .toggle__track {
  background: var(--primary, #3b82f6);
}

.toggle__thumb {
  position: absolute;
  top: var(--toggle-thumb-offset);
  left: var(--toggle-thumb-offset);
  width: var(--toggle-thumb-size);
  height: var(--toggle-thumb-size);
  background: var(--color-white);
  border-radius: var(--radius-full, 9999px);
  transition: transform var(--transition-fast, 150ms);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}

.toggle__input:checked + .toggle__track .toggle__thumb {
  transform: translateX(calc(var(--toggle-width) - var(--toggle-thumb-size) - var(--toggle-thumb-offset) * 2));
}

.toggle__label {
  font-weight: var(--font-weight-medium, 500);
  color: var(--text, #1a1a1a);
}


/* ========== COMPONENT: TYPOGRAPHY ========== */
/*
 * Typography Component
 * Heading and text styles
 */

h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading, #000);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-tight, 1.25);
  margin-bottom: var(--space-md, 0.75rem);
}

h1 { font-size: var(--font-size-3xl, 1.875rem); }
h2 { font-size: var(--font-size-2xl, 1.5rem); }
h3 { font-size: var(--font-size-xl, 1.25rem); }
h4 { font-size: var(--font-size-lg, 1.125rem); }
h5 { font-size: var(--font-size-base, 1rem); }
h6 { font-size: var(--font-size-sm, 0.875rem); }

p {
  margin-bottom: var(--space-lg, 1rem);
  line-height: var(--line-height-normal, 1.5);
}

.text--gradient {
  background: linear-gradient(135deg, var(--primary, #3b82f6), var(--secondary, #8b5cf6));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ========== COMPONENT: UPLOAD ========== */
/*
 * File Upload Component
 * Drag and drop file upload area
 */

.upload {
  border: var(--border-width-md) dashed var(--border, #d4d4d4);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-2xl, 2rem);
  text-align: center;
  transition: all var(--transition-base, 200ms);
}

.upload--dragover {
  border-color: var(--primary, #3b82f6);
  background: var(--primary-light, #dbeafe);
}

.upload__input {
  display: none;
}

.upload__label {
  display: block;
  cursor: pointer;
}

.upload__icon {
  font-size: var(--icon-size-3xl);
  display: block;
  margin-bottom: var(--space-sm, 0.5rem);
}

.upload__text {
  display: block;
  font-weight: var(--font-weight-medium, 500);
  margin-bottom: var(--space-xs, 0.25rem);
}

.upload__hint {
  display: block;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-secondary, #666);
  margin-bottom: var(--space-lg, 1rem);
}

.upload__button {
  pointer-events: none;
}

.upload__file-list {
  margin-top: var(--space-lg, 1rem);
}

.upload__file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm, 0.5rem);
  background: var(--surface, #f5f5f5);
  border-radius: var(--radius-sm, 4px);
  margin-bottom: var(--space-sm, 0.5rem);
}

.upload__file-name {
  font-weight: var(--font-weight-medium, 500);
}

.upload__file-size {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-secondary, #666);
}

.upload__file-remove {
  background: none;
  border: none;
  font-size: var(--icon-size-md);
  line-height: 1;
  cursor: pointer;
  color: var(--error, #ef4444);
  padding: 0;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}