/*
 * Thrynd CSS Framework
 * Version: 0.1.0
 *
 * A modern, opinionated CSS framework designed for the AI age.
 * - Beautiful defaults out of the box
 * - Theme switching via body class
 * - LLM-friendly documentation
 * - Framework agnostic
 */

/* Core */

/*
 * Thrynd Reset
 * Modern CSS reset with sensible defaults
 */

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

/* Reset margins on common block elements only - not all elements */

body, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
dl, dd, ol, ul, figure, hr, fieldset, legend {
  margin: 0;
}

/* Reset padding on list elements only */

ol, ul, menu {
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  line-height: 1.5;
  min-height: 100vh;
}

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;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Remove default button styles */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/*
 * Thrynd Core Variables
 * Base CSS custom properties that themes can override
 */

:root {
  /* Colors - Base */
  --color-white: #fff;
  --color-black: #000;

  /* Colors - Gray scale */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Colors - Semantic (to be overridden by themes) */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-active: #1d4ed8;
  --color-secondary: #6b7280;
  --color-secondary-hover: #4b5563;
  --color-secondary-active: #374151;
  --color-success: #10b981;
  --color-success-hover: #059669;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-info: #3b82f6;
  --color-info-hover: #2563eb;

  /* Text colors */
  --color-text: #1f2937;
  --color-text-secondary: #6b7280;
  --color-heading: #111827;

  /* UI colors */
  --color-border: #e5e7eb;
  --color-background: #fff;

  /* Typography */
  --font-sans: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, sans-serif;
  --font-serif: georgia, cambria, 'Times New Roman', times, serif;
  --font-mono: 'Cascadia Code', menlo, monaco, consolas, 'Courier New', monospace;
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.25rem;     /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-4xl: 2.25rem;    /* 36px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* Border radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;   /* 2px */
  --radius-base: 0.25rem;  /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.5rem;     /* 8px */
  --radius-xl: 0.75rem;    /* 12px */
  --radius-2xl: 1rem;      /* 16px */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* Breakpoints (for reference in JS) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/*
 * Thrynd Typography
 * Base typography styles
 */

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text, var(--color-gray-900));
  background-color: var(--color-background, var(--color-white));
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-heading, var(--color-gray-900));
  margin-bottom: var(--space-4);
}

h1 {
  font-size: var(--font-size-4xl);
}

h2 {
  font-size: var(--font-size-3xl);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
}

/* Paragraph */

p {
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

/* Links */

a {
  color: var(--color-link, var(--color-primary));
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-link-hover, var(--color-primary-hover));
  text-decoration: underline;
}

/* Lists */

ul, ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  margin-bottom: var(--space-2);
}

/* Code */

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

code {
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
  border-radius: var(--radius-base);
}

pre {
  padding: var(--space-4);
  background-color: var(--color-gray-100);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

pre code {
  padding: 0;
  background-color: transparent;
}

/* Blockquote */

blockquote {
  padding-left: var(--space-4);
  border-left: 4px solid var(--color-gray-300);
  margin-bottom: var(--space-4);
  font-style: italic;
  color: var(--color-gray-600);
}

/* Horizontal rule */

hr {
  border: 0;
  height: 1px;
  background-color: var(--color-gray-200);
  margin: var(--space-8) 0;
}

/* Emphasis */

strong, b {
  font-weight: var(--font-weight-bold);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--font-size-sm);
}

/* Utility classes */

.text-muted {
  color: var(--color-gray-600);
}

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

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

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

/*
 * Thrynd Layout
 * Base layout utilities and container
 */

/* Container */

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

/* Grid */

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Flexbox */

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-row { flex-direction: row; }

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

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

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

.items-start { align-items: flex-start; }

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

.items-end { align-items: flex-end; }

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

.justify-start { justify-content: flex-start; }

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

.justify-end { justify-content: flex-end; }

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

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

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

.gap-2 { gap: var(--space-2); }

.gap-3 { gap: var(--space-3); }

.gap-4 { gap: var(--space-4); }

.gap-6 { gap: var(--space-6); }

.gap-8 { gap: var(--space-8); }

/* Display */

.block { display: block; }

.inline-block { display: inline-block; }

.inline { display: inline; }

.hidden { display: none; }

/* Width */

.w-full { width: 100%; }

.w-auto { width: auto; }

.max-w-sm { max-width: 24rem; }

.max-w-md { max-width: 28rem; }

.max-w-lg { max-width: 32rem; }

.max-w-xl { max-width: 36rem; }

/* Margin */

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Themes */

/*
 * Thrynd Theme: Modern
 * Clean, contemporary design with vibrant colors
 */

body.theme-modern,
.theme-modern {
  /* Primary colors - Vibrant blue (WCAG AA compliant) */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-active: #1e40af;
  --color-primary-light: #dbeafe;

  /* Secondary colors - Neutral gray */
  --color-secondary: #6b7280;
  --color-secondary-hover: #4b5563;
  --color-secondary-active: #374151;
  --color-secondary-light: #f3f4f6;

  /* Success - Green (WCAG AA compliant) */
  --color-success: #059669;
  --color-success-hover: #047857;
  --color-success-light: #d1fae5;

  /* Danger - Red (WCAG AA compliant) */
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-light: #fee2e2;

  /* Warning - Amber (WCAG AA compliant) */
  --color-warning: #d97706;
  --color-warning-hover: #b45309;
  --color-warning-light: #fef3c7;

  /* Info - Blue (WCAG AA compliant) */
  --color-info: #2563eb;
  --color-info-hover: #1d4ed8;
  --color-info-light: #dbeafe;

  /* Background colors */
  --color-background: #fff;
  --color-surface: #f9fafb;

  /* Text colors */
  --color-text: #111827;
  --color-text-secondary: #6b7280;
  --color-heading: #111827;

  /* Border colors */
  --color-border: #e5e7eb;
  --color-border-hover: #d1d5db;

  /* Link colors (WCAG AA compliant) */
  --color-link: #2563eb;
  --color-link-hover: #1d4ed8;

  /* Component styling */
  --card-background: #fff;
  --card-border: #e5e7eb;
  --card-shadow: var(--shadow-sm);
  --button-radius: var(--radius-md);
  --card-radius: var(--radius-lg);
  --input-radius: var(--radius-md);

  /* Typography */
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);
}

/*
 * Thrynd Theme: Classic
 * Traditional, elegant design with serif fonts and muted colors
 */

body.theme-classic,
.theme-classic {
  /* Primary colors - Navy blue */
  --color-primary: #1e3a8a;
  --color-primary-hover: #1e40af;
  --color-primary-active: #1d4ed8;
  --color-primary-light: #dbeafe;

  /* Secondary colors - Warm gray */
  --color-secondary: #78716c;
  --color-secondary-hover: #57534e;
  --color-secondary-active: #44403c;
  --color-secondary-light: #f5f5f4;

  /* Success - Forest green (WCAG AA compliant) */
  --color-success: #15803d;
  --color-success-hover: #166534;
  --color-success-light: #dcfce7;

  /* Danger - Burgundy */
  --color-danger: #b91c1c;
  --color-danger-hover: #991b1b;
  --color-danger-light: #fee2e2;

  /* Warning - Gold */
  --color-warning: #ca8a04;
  --color-warning-hover: #a16207;
  --color-warning-light: #fef9c3;

  /* Info - Steel blue */
  --color-info: #1e3a8a;
  --color-info-hover: #1e40af;
  --color-info-light: #dbeafe;

  /* Background colors */
  --color-background: #fafaf9;
  --color-surface: #fff;

  /* Text colors */
  --color-text: #292524;
  --color-text-secondary: #78716c;
  --color-heading: #1c1917;

  /* Border colors */
  --color-border: #e7e5e4;
  --color-border-hover: #d6d3d1;

  /* Link colors */
  --color-link: #1e3a8a;
  --color-link-hover: #1e40af;

  /* Component styling */
  --card-background: #fff;
  --card-border: #e7e5e4;
  --card-shadow: var(--shadow-base);
  --button-radius: var(--radius-base);
  --card-radius: var(--radius-base);
  --input-radius: var(--radius-base);

  /* Typography */
  --font-body: var(--font-serif);
  --font-heading: var(--font-serif);
}

/*
 * Thrynd Theme: Minimal
 * Brutalist, monochrome design with stark contrasts
 */

body.theme-minimal,
.theme-minimal {
  /* Primary colors - Pure black */
  --color-primary: #000;
  --color-primary-hover: #1f2937;
  --color-primary-active: #374151;
  --color-primary-light: #f3f4f6;

  /* Secondary colors - Gray */
  --color-secondary: #6b7280;
  --color-secondary-hover: #4b5563;
  --color-secondary-active: #374151;
  --color-secondary-light: #f9fafb;

  /* Success - Dark green */
  --color-success: #065f46;
  --color-success-hover: #047857;
  --color-success-light: #d1fae5;

  /* Danger - Dark red */
  --color-danger: #7f1d1d;
  --color-danger-hover: #991b1b;
  --color-danger-light: #fee2e2;

  /* Warning - Dark yellow */
  --color-warning: #78350f;
  --color-warning-hover: #92400e;
  --color-warning-light: #fef3c7;

  /* Info - Dark gray */
  --color-info: #374151;
  --color-info-hover: #4b5563;
  --color-info-light: #f3f4f6;

  /* Background colors */
  --color-background: #fff;
  --color-surface: #fff;

  /* Text colors */
  --color-text: #000;
  --color-text-secondary: #6b7280;
  --color-heading: #000;

  /* Border colors */
  --color-border: #000;
  --color-border-hover: #374151;

  /* Link colors */
  --color-link: #000;
  --color-link-hover: #1f2937;

  /* Component styling */
  --card-background: #fff;
  --card-border: #000;
  --card-shadow: none;
  --button-radius: var(--radius-none);
  --card-radius: var(--radius-none);
  --input-radius: var(--radius-none);

  /* Typography */
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);
}

/* Minimal theme specific adjustments */

.theme-minimal {
  border: 2px solid var(--color-border);
}

.theme-minimal .card {
  border-width: 2px;
}

.theme-minimal button,
.theme-minimal .btn,
.theme-minimal [class^="btn-"] {
  border: 2px solid var(--color-border);
}

/*
 * Thrynd Theme: Neon
 * Cyberpunk, vibrant design with electric colors
 */

body.theme-neon,
.theme-neon {
  /* Primary colors - Electric blue/cyan (WCAG AA compliant) */
  --color-primary: #00d4e6;
  --color-primary-hover: #00b8cc;
  --color-primary-active: #009cb3;
  --color-primary-light: rgba(0, 240, 255, 0.1);

  /* Secondary colors - Electric purple */
  --color-secondary: #b026ff;
  --color-secondary-hover: #9920e6;
  --color-secondary-active: #8219cc;
  --color-secondary-light: rgba(176, 38, 255, 0.1);

  /* Success - Neon green */
  --color-success: #39ff14;
  --color-success-hover: #2ee60f;
  --color-success-light: rgba(57, 255, 20, 0.1);

  /* Danger - Hot pink (WCAG AA compliant) */
  --color-danger: #cc005a;
  --color-danger-hover: #b3004f;
  --color-danger-light: rgba(255, 0, 110, 0.1);

  /* Warning - Neon yellow */
  --color-warning: #ff0;
  --color-warning-hover: #e6e600;
  --color-warning-light: rgba(255, 255, 0, 0.1);

  /* Info - Neon blue (WCAG AA compliant) */
  --color-info: #00d4e6;
  --color-info-hover: #00b8cc;
  --color-info-light: rgba(0, 240, 255, 0.1);

  /* Background colors - Dark */
  --color-background: #0a0a0a;
  --color-surface: #1a1a1a;

  /* Text colors - Light on dark */
  --color-text: #fff;
  --color-text-secondary: #a0a0a0;
  --color-heading: #fff;

  /* Border colors */
  --color-border: #333;
  --color-border-hover: #00f0ff;

  /* Link colors (WCAG AA compliant) */
  --color-link: #00d4e6;
  --color-link-hover: #b026ff;

  /* Component styling */
  --card-background: #1a1a1a;
  --card-border: #333;
  --card-shadow: 0 0 20px rgba(0, 240, 255, 0.3);
  --button-radius: var(--radius-base);
  --card-radius: var(--radius-md);
  --input-radius: var(--radius-base);

  /* Typography */
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);
}

/* Neon-specific enhancements */

.theme-neon {
  background-color: var(--color-background);
}

.theme-neon .btn-primary {
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.theme-neon .btn-primary:hover {
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.8);
}

.theme-neon .btn-secondary {
  box-shadow: 0 0 10px rgba(176, 38, 255, 0.5);
}

.theme-neon .btn-secondary:hover {
  box-shadow: 0 0 20px rgba(176, 38, 255, 0.8);
}

.theme-neon .card-elevated {
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.2);
  border: 1px solid rgba(0, 240, 255, 0.3);
}

.theme-neon .card-elevated:hover {
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.4);
  border-color: rgba(0, 240, 255, 0.6);
}

.theme-neon h1,
.theme-neon h2,
.theme-neon h3 {
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.theme-neon .navbar {
  background-color: rgba(26, 26, 26, 0.95);
  border-bottom-color: rgba(0, 240, 255, 0.5);
  backdrop-filter: blur(10px);
}

.theme-neon .form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.2), 0 0 10px rgba(0, 240, 255, 0.5);
}

.theme-neon a:hover {
  text-shadow: 0 0 8px currentColor;
}

/*
 * Thrynd Theme: Nature
 * Earthy, organic design with natural colors
 */

body.theme-nature,
.theme-nature {
  /* Primary colors - Forest green */
  --color-primary: #2d6a4f;
  --color-primary-hover: #245941;
  --color-primary-active: #1b4332;
  --color-primary-light: #d8f3dc;

  /* Secondary colors - Earth brown */
  --color-secondary: #8b7355;
  --color-secondary-hover: #6f5c45;
  --color-secondary-active: #534535;
  --color-secondary-light: #e8dfd4;

  /* Success - Leaf green */
  --color-success: #52b788;
  --color-success-hover: #40916c;
  --color-success-light: #b7e4c7;

  /* Danger - Terracotta */
  --color-danger: #c1666b;
  --color-danger-hover: #a45256;
  --color-danger-light: #f4c2c2;

  /* Warning - Autumn gold */
  --color-warning: #d4a574;
  --color-warning-hover: #b8885d;
  --color-warning-light: #f4e4d4;

  /* Info - Sky blue */
  --color-info: #6096ba;
  --color-info-hover: #4d7a9a;
  --color-info-light: #d4e7f4;

  /* Background colors - Natural */
  --color-background: #fefae0;
  --color-surface: #faedcd;

  /* Text colors - Natural */
  --color-text: #3a3a2c;
  --color-text-secondary: #6b6b57;
  --color-heading: #2d2d1f;

  /* Border colors */
  --color-border: #d4a373;
  --color-border-hover: #b8885d;

  /* Link colors */
  --color-link: #2d6a4f;
  --color-link-hover: #1b4332;

  /* Component styling */
  --card-background: #fff;
  --card-border: #d4a373;
  --card-shadow: 0 2px 8px rgba(139, 115, 85, 0.15);
  --button-radius: var(--radius-lg);
  --card-radius: var(--radius-xl);
  --input-radius: var(--radius-lg);

  /* Typography */
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);
}

/* Nature-specific styling */

.theme-nature {
  background-color: var(--color-background);
  background-image: linear-gradient(180deg, #fefae0 0%, #faedcd 100%);
}

.theme-nature .card {
  border-width: 2px;
}

.theme-nature .card-elevated {
  box-shadow: 0 4px 12px rgba(139, 115, 85, 0.2);
}

.theme-nature .card-elevated:hover {
  box-shadow: 0 6px 16px rgba(139, 115, 85, 0.3);
}

.theme-nature .btn-primary,
.theme-nature .btn-secondary,
.theme-nature .btn-success,
.theme-nature .btn-danger {
  font-weight: var(--font-weight-semibold);
  text-transform: none;
}

.theme-nature .navbar {
  background-color: rgba(250, 237, 205, 0.95);
  backdrop-filter: blur(8px);
}

.theme-nature .form-input {
  background-color: rgba(255, 255, 255, 0.8);
}

.theme-nature .form-input:focus {
  background-color: #fff;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15);
}

.theme-nature .badge {
  font-weight: var(--font-weight-semibold);
}

/* Natural texture effect */

.theme-nature::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4a373' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
  z-index: -1;
}

/*
 * Thrynd Theme: Corporate
 * Professional, trustworthy design with blue focus
 */

body.theme-corporate,
.theme-corporate {
  /* Primary colors - Corporate blue */
  --color-primary: #06c;
  --color-primary-hover: #0052a3;
  --color-primary-active: #003d7a;
  --color-primary-light: #cce5ff;

  /* Secondary colors - Professional gray */
  --color-secondary: #5a6c7d;
  --color-secondary-hover: #465664;
  --color-secondary-active: #33404b;
  --color-secondary-light: #e8ecf0;

  /* Success - Professional green */
  --color-success: #00875a;
  --color-success-hover: #064;
  --color-success-light: #c1f0d6;

  /* Danger - Corporate red */
  --color-danger: #de350b;
  --color-danger-hover: #bf2600;
  --color-danger-light: #ffebe6;

  /* Warning - Amber */
  --color-warning: #ff8b00;
  --color-warning-hover: #d97000;
  --color-warning-light: #fff0d6;

  /* Info - Light blue */
  --color-info: #06c;
  --color-info-hover: #0052a3;
  --color-info-light: #cce5ff;

  /* Background colors */
  --color-background: #f5f7fa;
  --color-surface: #fff;

  /* Text colors */
  --color-text: #172b4d;
  --color-text-secondary: #5a6c7d;
  --color-heading: #091e42;

  /* Border colors */
  --color-border: #dfe1e6;
  --color-border-hover: #c1c7d0;

  /* Link colors */
  --color-link: #06c;
  --color-link-hover: #0052a3;

  /* Component styling */
  --card-background: #fff;
  --card-border: #dfe1e6;
  --card-shadow: 0 1px 3px rgba(9, 30, 66, 0.12), 0 0 1px rgba(9, 30, 66, 0.1);
  --button-radius: var(--radius-base);
  --card-radius: var(--radius-base);
  --input-radius: var(--radius-base);

  /* Typography */
  --font-body: -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-heading: -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* Corporate-specific styling */

.theme-corporate {
  background-color: var(--color-background);
}

.theme-corporate .navbar {
  background-color: #fff;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 3px rgba(9, 30, 66, 0.08);
}

.theme-corporate .navbar-primary {
  background-color: var(--color-primary);
  border-bottom-color: var(--color-primary-hover);
  box-shadow: 0 1px 4px rgba(0, 102, 204, 0.3);
}

.theme-corporate .card-elevated {
  box-shadow: 0 4px 8px rgba(9, 30, 66, 0.12), 0 0 2px rgba(9, 30, 66, 0.08);
}

.theme-corporate .card-elevated:hover {
  box-shadow: 0 8px 16px rgba(9, 30, 66, 0.15), 0 0 4px rgba(9, 30, 66, 0.1);
}

.theme-corporate .btn-primary {
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}

.theme-corporate .btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.theme-corporate .btn-secondary:hover {
  background-color: var(--color-gray-50);
  border-color: var(--color-border-hover);
}

.theme-corporate h1,
.theme-corporate h2,
.theme-corporate h3,
.theme-corporate h4,
.theme-corporate h5,
.theme-corporate h6 {
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}

.theme-corporate .form-input {
  border-width: 2px;
}

.theme-corporate .form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.theme-corporate .alert {
  border-left-width: 4px;
}

.theme-corporate .badge {
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.6875rem;
}

.theme-corporate .table {
  border: 1px solid var(--color-border);
}

.theme-corporate .table th {
  background-color: var(--color-surface);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

/* Professional hover states */

.theme-corporate a:hover {
  text-decoration: underline;
}

.theme-corporate .card:hover {
  border-color: var(--color-border-hover);
}

/* Sidebar styling for corporate apps */

.theme-corporate .sidebar {
  background-color: #fff;
  border-right: 1px solid var(--color-border);
  box-shadow: 1px 0 3px rgba(9, 30, 66, 0.08);
}

.theme-corporate .sidebar-nav .nav-item {
  font-weight: var(--font-weight-medium);
}

.theme-corporate .sidebar-nav .nav-item.active {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* Components */

/*
 * Thrynd Buttons
 * Button component styles with variants
 */

/**
 * @thrynd component button
 * @description Interactive button element for user actions and form submissions
 * @category form
 * @complexity simple
 */

/**
 * @thrynd variant primary
 * @parent button
 * @class btn-primary
 * @usage Main call-to-action, most important action on page
 * @example <button class="btn-primary">Submit</button>
 * @semantic Primary action - use once per section
 */

/**
 * @thrynd variant secondary
 * @parent button
 * @class btn-secondary
 * @usage Alternative actions, cancel buttons, supporting actions
 * @example <button class="btn-secondary">Cancel</button>
 * @semantic Secondary actions - can use multiple times
 */

/**
 * @thrynd variant danger
 * @parent button
 * @class btn-danger
 * @usage Destructive actions (delete, remove, clear)
 * @example <button class="btn-danger">Delete</button>
 * @semantic Warns user of destructive action
 */

/**
 * @thrynd variant ghost
 * @parent button
 * @class btn-ghost
 * @usage Subtle actions in busy interfaces, tertiary actions
 * @example <button class="btn-ghost">Edit</button>
 * @semantic Low-emphasis actions
 */

/**
 * @thrynd size small
 * @parent button
 * @class btn-sm
 * @usage Compact UI, tables, inline actions
 * @example <button class="btn-primary btn-sm">Save</button>
 */

/**
 * @thrynd size medium
 * @parent button
 * @class null
 * @usage Default size, most UI elements
 * @example <button class="btn-primary">Submit</button>
 * @default true
 */

/**
 * @thrynd size large
 * @parent button
 * @class btn-lg
 * @usage Hero sections, landing pages, prominent CTAs
 * @example <button class="btn-primary btn-lg">Get Started</button>
 */

/**
 * @thrynd modifier outline
 * @parent button
 * @class btn-outline
 * @usage Hollow button with border only
 * @example <button class="btn-primary btn-outline">Outlined</button>
 * @combines Can combine with any variant
 */

/**
 * @thrynd modifier block
 * @parent button
 * @class btn-block
 * @usage Full-width button
 * @example <button class="btn-primary btn-block">Full Width</button>
 * @combines Can combine with any variant or size
 */

/**
 * @thrynd modifier loading
 * @parent button
 * @class btn-loading
 * @usage Shows loading spinner during async operations
 * @example <button class="btn-primary btn-loading" disabled>Loading...</button>
 * @combines Add disabled attribute when loading
 */

/**
 * @thrynd state hover
 * @parent button
 * @automatic true
 * @description Darker background on hover
 */

/**
 * @thrynd state disabled
 * @parent button
 * @attribute disabled
 * @example <button class="btn-primary" disabled>Disabled</button>
 * @description Reduced opacity and no pointer events
 */

/**
 * @thrynd accessibility keyboard
 * @parent button
 * @keyboard Activated with Enter or Space
 */

/**
 * @thrynd accessibility screenReader
 * @parent button
 * @screenReader Button role implicit, ensure meaningful text
 */

/**
 * @thrynd accessibility required
 * @parent button
 * @required Accessible text content or aria-label
 */

/**
 * @thrynd accessibility required
 * @parent button
 * @required type="button" or type="submit" attribute
 */

/**
 * @thrynd combination heroCTA
 * @parent button
 * @classes btn-primary btn-lg
 * @usage Hero section CTA
 * @context Landing pages, main conversion point
 */

/**
 * @thrynd antipattern multipleVariants
 * @parent button
 * @pattern Using multiple variants (btn-primary btn-secondary)
 * @reason Only one variant should be applied
 * @severity error
 * @suggestion Choose one variant based on the action's importance
 */

/* Base button styles */

button {
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--button-radius, var(--radius-md));
  transition: all var(--transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

button:disabled,
button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button variants */

.btn-primary,
button.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-primary);
}

.btn-primary:hover,
button.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-primary:active,
button.btn-primary:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.btn-secondary,
button.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
  border: 1px solid var(--color-secondary);
}

.btn-secondary:hover,
button.btn-secondary:hover {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}

.btn-secondary:active,
button.btn-secondary:active {
  background-color: var(--color-secondary-active);
  border-color: var(--color-secondary-active);
}

.btn-danger,
button.btn-danger {
  background-color: var(--color-danger);
  color: var(--color-white);
  border: 1px solid var(--color-danger);
}

.btn-danger:hover,
button.btn-danger:hover {
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}

.btn-ghost,
button.btn-ghost {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid transparent;
}

.btn-ghost:hover,
button.btn-ghost:hover {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

/* Button outline variants */

.btn-outline,
button.btn-outline {
  background-color: transparent;
  border-width: 1px;
}

.btn-primary.btn-outline {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary.btn-outline:hover {
  background-color: var(--color-primary-light);
}

/* Button sizes */

.btn-sm,
button.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

.btn-lg,
button.btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-lg);
}

/* Button block (full width) */

.btn-block,
button.btn-block {
  width: 100%;
  display: flex;
}

/* Button loading state */

.btn-loading,
button.btn-loading {
  position: relative;
  pointer-events: none;
}

.btn-loading::before,
button.btn-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: inherit;
  z-index: 1;
}

.btn-loading::after,
button.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spinner 0.6s linear infinite;
  z-index: 2;
}

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

/* Link styled as button */

a.btn-primary,
a.btn-secondary,
a.btn-danger,
a.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  border-radius: var(--button-radius, var(--radius-md));
  transition: all var(--transition-fast);
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 1px solid transparent;
}

/*
 * Thrynd Cards
 * Card component styles with variants
 */

/**
 * @thrynd component card
 * @description Container component for grouping related content with visual boundary
 * @category layout
 * @complexity simple
 */

/**
 * @thrynd variant default
 * @parent card
 * @class card
 * @usage Basic card with subtle border, general content grouping
 * @example <div class="card"><div class="card-body">Content</div></div>
 * @semantic Standard content container
 */

/**
 * @thrynd variant elevated
 * @parent card
 * @class card-elevated
 * @usage Featured content, interactive cards, hover effects
 * @example <div class="card-elevated"><div class="card-body">Featured</div></div>
 * @semantic Emphasized content with shadow and hover animation
 */

/**
 * @thrynd variant outlined
 * @parent card
 * @class card-outlined
 * @usage Strong visual boundary, form sections, grouped inputs
 * @example <div class="card-outlined"><div class="card-body">Outlined</div></div>
 * @semantic Content with prominent border
 */

/**
 * @thrynd part header
 * @parent card
 * @class card-header
 * @usage Card title area with bottom border
 * @example <div class="card"><div class="card-header">Title</div><div class="card-body">Content</div></div>
 */

/**
 * @thrynd part body
 * @parent card
 * @class card-body
 * @usage Main content area with padding
 * @example <div class="card"><div class="card-body">Content</div></div>
 */

/**
 * @thrynd part footer
 * @parent card
 * @class card-footer
 * @usage Actions area with top border and surface background
 * @example <div class="card"><div class="card-body">Content</div><div class="card-footer">Actions</div></div>
 */

/**
 * @thrynd part image
 * @parent card
 * @class card-img
 * @usage Full-width image, typically at top of card
 * @example <div class="card"><img class="card-img" src="..." alt="..."><div class="card-body">Content</div></div>
 */

/**
 * @thrynd part title
 * @parent card
 * @class card-title
 * @usage Card heading with bold text
 * @example <div class="card-body"><h3 class="card-title">Title</h3><p>Content</p></div>
 */

/**
 * @thrynd modifier link
 * @parent card
 * @class card-link
 * @usage Wraps card to make entire card clickable
 * @example <a href="#" class="card-link"><div class="card">Clickable card</div></a>
 * @combines Wrap around any card variant
 */

/**
 * @thrynd accessibility keyboard
 * @parent card
 * @keyboard Use card-link wrapper for keyboard-accessible clickable cards
 */

/**
 * @thrynd accessibility screenReader
 * @parent card
 * @screenReader Ensure card-link has descriptive text or aria-label
 */

/**
 * @thrynd combination featuredCard
 * @parent card
 * @classes card-elevated card-img card-body card-title
 * @usage Product cards, blog post previews
 * @context E-commerce, content listings
 */

/* Base card styles */

.card {
  background-color: var(--card-background, var(--color-white));
  border: 1px solid var(--card-border, var(--color-border));
  border-radius: var(--card-radius, var(--radius-lg));
  overflow: hidden;
}

/* Card variants */

.card-elevated {
  background-color: var(--card-background, var(--color-white));
  border: 1px solid transparent;
  border-radius: var(--card-radius, var(--radius-lg));
  box-shadow: var(--card-shadow, var(--shadow-md));
  overflow: hidden;
}

.card-elevated:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  transition: all var(--transition-base);
}

.card-outlined {
  background-color: var(--card-background, var(--color-white));
  border: 2px solid var(--card-border, var(--color-border));
  border-radius: var(--card-radius, var(--radius-lg));
  overflow: hidden;
}

/* Card sections */

.card-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.card-body {
  padding: var(--space-6);
}

.card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface, var(--color-gray-50));
}

/* Card image */

.card-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Card title */

.card-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

/* Clickable card */

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: all var(--transition-base);
}

.card-link:hover .card {
  border-color: var(--color-primary);
}

.card-link:hover .card-elevated {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

/*
 * Thrynd Forms
 * Form component styles
 */

/**
 * @thrynd component form
 * @description Form elements for user input including text fields, selects, checkboxes
 * @category form
 * @complexity moderate
 */

/**
 * @thrynd part group
 * @parent form
 * @class form-group
 * @usage Wrapper for label + input pairs with consistent spacing
 * @example <div class="form-group"><label>Name</label><input type="text" class="form-input"></div>
 */

/**
 * @thrynd variant input
 * @parent form
 * @class form-input
 * @usage Explicit input styling (also applied to text, email, password inputs by default)
 * @example <input type="text" class="form-input" placeholder="Enter text">
 * @semantic Standard text input field
 */

/**
 * @thrynd state error
 * @parent form
 * @class form-input-error
 * @usage Input validation failed
 * @example <input type="email" class="form-input form-input-error"><span class="form-error">Invalid email</span>
 * @attribute Also supports .error class on input
 */

/**
 * @thrynd state success
 * @parent form
 * @class form-input-success
 * @usage Input validation passed
 * @example <input type="email" class="form-input form-input-success"><span class="form-success">Looks good!</span>
 * @attribute Also supports .success class on input
 */

/**
 * @thrynd state disabled
 * @parent form
 * @attribute disabled
 * @description Grayed out with no interaction
 * @example <input type="text" class="form-input" disabled>
 */

/**
 * @thrynd part checkbox
 * @parent form
 * @class form-checkbox
 * @usage Styled checkbox input
 * @example <input type="checkbox" class="form-checkbox"> Accept terms
 */

/**
 * @thrynd part radio
 * @parent form
 * @class form-radio
 * @usage Styled radio button input
 * @example <input type="radio" name="option" class="form-radio"> Option A
 */

/**
 * @thrynd part help
 * @parent form
 * @class form-help
 * @usage Helper text below input
 * @example <input type="text" class="form-input"><span class="form-help">Enter your full name</span>
 */

/**
 * @thrynd part error-message
 * @parent form
 * @class form-error
 * @usage Error message text in danger color
 * @example <span class="form-error">This field is required</span>
 */

/**
 * @thrynd part success-message
 * @parent form
 * @class form-success
 * @usage Success message text in success color
 * @example <span class="form-success">Username available</span>
 */

/**
 * @thrynd accessibility required
 * @parent form
 * @required Always use label elements associated with inputs
 */

/**
 * @thrynd accessibility required
 * @parent form
 * @required Use aria-describedby to link inputs to help/error text
 */

/**
 * @thrynd accessibility keyboard
 * @parent form
 * @keyboard All form elements focusable with visible focus ring
 */

/**
 * @thrynd combination validatedInput
 * @parent form
 * @classes form-group form-input form-error
 * @usage Form field with validation feedback
 * @context User registration, data entry forms
 */

/* Form group */

.form-group {
  margin-bottom: var(--space-4);
}

.form-group:last-child {
  margin-bottom: 0;
}

/* Labels */

label {
  display: block;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

/* Input styles */

.form-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-base);
  font-family: inherit;
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius, var(--radius-md));
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-input:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--color-gray-100);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Textarea */

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

/* Select */

select {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--space-2) center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: var(--space-8);
}

/* Checkbox and Radio */

.form-checkbox,
.form-radio,
input[type="checkbox"],
input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: all var(--transition-fast);
}

input[type="radio"],
.form-radio {
  border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* File input */

input[type="file"] {
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--input-radius, var(--radius-md));
}

/* Form validation states */

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

.form-input-error:focus,
input.error:focus,
textarea.error:focus,
select.error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-light);
}

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

.form-input-success:focus,
input.success:focus,
textarea.success:focus,
select.success:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-light);
}

/* Help text */

.form-help {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.form-error {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-danger);
}

.form-success {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-success);
}

/*
 * Thrynd Navigation
 * Navigation components (navbar, sidebar, breadcrumbs, tabs)
 */

/**
 * @thrynd component navbar
 * @description Top navigation bar with brand, links, and actions
 * @category navigation
 * @complexity moderate
 */

/**
 * @thrynd variant default
 * @parent navbar
 * @class navbar
 * @usage Standard navigation bar with surface background
 * @example <nav class="navbar"><a class="navbar-brand" href="#">Brand</a><ul class="navbar-nav"><li><a class="navbar-link" href="#">Link</a></li></ul></nav>
 */

/**
 * @thrynd variant primary
 * @parent navbar
 * @class navbar-primary
 * @usage Branded navbar with primary color background
 * @example <nav class="navbar navbar-primary">...</nav>
 * @semantic Site header with brand emphasis
 */

/**
 * @thrynd part brand
 * @parent navbar
 * @class navbar-brand
 * @usage Logo/site name link
 * @example <a class="navbar-brand" href="/">Site Name</a>
 */

/**
 * @thrynd part nav
 * @parent navbar
 * @class navbar-nav
 * @usage Navigation link container
 * @example <ul class="navbar-nav"><li><a class="navbar-link" href="#">Link</a></li></ul>
 */

/**
 * @thrynd part link
 * @parent navbar
 * @class navbar-link
 * @usage Navigation link within navbar
 * @example <a class="navbar-link" href="#">Page</a>
 */

/**
 * @thrynd state active
 * @parent navbar
 * @class active
 * @description Current page indicator on navbar-link
 * @example <a class="navbar-link active" href="#">Current Page</a>
 */

/**
 * @thrynd part toggle
 * @parent navbar
 * @class navbar-toggle
 * @usage Mobile menu toggle button (hidden on desktop)
 * @example <button class="navbar-toggle">Menu</button>
 */

/**
 * @thrynd component sidebar
 * @description Vertical navigation panel
 * @category navigation
 * @complexity moderate
 */

/**
 * @thrynd variant default
 * @parent sidebar
 * @class sidebar
 * @usage Fixed-width vertical navigation
 * @example <aside class="sidebar"><nav class="sidebar-nav">...</nav></aside>
 */

/**
 * @thrynd part header
 * @parent sidebar
 * @class sidebar-header
 * @usage Sidebar title/branding area
 * @example <div class="sidebar-header"><h2>Dashboard</h2></div>
 */

/**
 * @thrynd part nav
 * @parent sidebar
 * @class sidebar-nav
 * @usage Sidebar navigation list container
 * @example <nav class="sidebar-nav"><a class="nav-item" href="#">Item</a></nav>
 */

/**
 * @thrynd part item
 * @parent sidebar
 * @class nav-item
 * @usage Individual navigation item in sidebar
 * @example <a class="nav-item" href="#">Dashboard</a>
 */

/**
 * @thrynd component breadcrumb
 * @description Hierarchical navigation trail
 * @category navigation
 * @complexity simple
 */

/**
 * @thrynd variant default
 * @parent breadcrumb
 * @class breadcrumb
 * @usage Container for breadcrumb trail
 * @example <nav class="breadcrumb"><span class="breadcrumb-item"><a href="/">Home</a></span><span class="breadcrumb-item active">Current</span></nav>
 */

/**
 * @thrynd part item
 * @parent breadcrumb
 * @class breadcrumb-item
 * @usage Individual breadcrumb segment
 * @example <span class="breadcrumb-item"><a href="#">Parent</a></span>
 */

/**
 * @thrynd state active
 * @parent breadcrumb
 * @class active
 * @description Current page (no link, muted text)
 * @example <span class="breadcrumb-item active">Current Page</span>
 */

/**
 * @thrynd component tabs
 * @description Horizontal tab navigation
 * @category navigation
 * @complexity simple
 */

/**
 * @thrynd variant default
 * @parent tabs
 * @class tabs
 * @usage Tab container with bottom border
 * @example <div class="tabs"><button class="tab active">Tab 1</button><button class="tab">Tab 2</button></div>
 */

/**
 * @thrynd part tab
 * @parent tabs
 * @class tab
 * @usage Individual tab button/link
 * @example <button class="tab">Tab Label</button>
 */

/**
 * @thrynd state active
 * @parent tabs
 * @class active
 * @description Currently selected tab
 * @example <button class="tab active">Active Tab</button>
 */

/**
 * @thrynd component pagination
 * @description Page navigation for paginated content
 * @category navigation
 * @complexity simple
 */

/**
 * @thrynd variant default
 * @parent pagination
 * @class pagination
 * @usage Container for pagination controls
 * @example <nav class="pagination"><a class="pagination-item" href="#">1</a><a class="pagination-item active" href="#">2</a></nav>
 */

/**
 * @thrynd part item
 * @parent pagination
 * @class pagination-item
 * @usage Individual page number/control
 * @example <a class="pagination-item" href="?page=2">2</a>
 */

/**
 * @thrynd state active
 * @parent pagination
 * @class active
 * @description Current page indicator
 * @example <span class="pagination-item active">2</span>
 */

/**
 * @thrynd state disabled
 * @parent pagination
 * @class disabled
 * @description Non-clickable pagination item
 * @example <span class="pagination-item disabled">...</span>
 */

/**
 * @thrynd accessibility required
 * @parent navbar
 * @required Use nav element with aria-label for main navigation
 */

/**
 * @thrynd accessibility required
 * @parent breadcrumb
 * @required Use nav element with aria-label="Breadcrumb"
 */

/**
 * @thrynd accessibility keyboard
 * @parent tabs
 * @keyboard Implement arrow key navigation between tabs
 */

/* Navbar */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.navbar-brand {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  text-decoration: none;
}

.navbar-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-link {
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
  padding: var(--space-2);
}

.navbar-link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.navbar-link.active {
  color: var(--color-primary);
}

/* Navbar variants */

.navbar-primary {
  background-color: var(--color-primary);
  border-bottom-color: var(--color-primary-hover);
}

.navbar-primary .navbar-brand,
.navbar-primary .navbar-link {
  color: var(--color-white);
}

.navbar-primary .navbar-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Sidebar */

.sidebar {
  width: 16rem;
  height: 100vh;
  background-color: var(--color-background);
  border-right: 1px solid var(--color-border);
  padding: var(--space-6);
  overflow-y: auto;
}

.sidebar-header {
  margin-bottom: var(--space-6);
}

.sidebar-header h2 {
  font-size: var(--font-size-xl);
  margin-bottom: 0;
}

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

.sidebar-nav .nav-item {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  transition: all var(--transition-fast);
}

.sidebar-nav .nav-item:hover {
  background-color: var(--color-surface);
  text-decoration: none;
}

.sidebar-nav .nav-item.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* Breadcrumbs */

.breadcrumb {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0;
  font-size: var(--font-size-sm);
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  margin: 0 var(--space-2);
  color: var(--color-text-secondary);
}

.breadcrumb-item a {
  color: var(--color-primary);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: var(--color-text-secondary);
}

/* Tabs */

.tabs {
  display: flex;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-6);
}

.tab {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-fast);
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.tab:hover {
  color: var(--color-text);
  text-decoration: none;
}

.tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Pagination */

.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination-item {
  min-width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
  background-color: var(--color-surface);
}

.pagination-item:hover {
  background-color: var(--color-background);
  border-color: var(--color-primary);
  text-decoration: none;
}

.pagination-item.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.pagination-item:disabled,
.pagination-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Mobile menu toggle */

.navbar-toggle {
  display: none;
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  cursor: pointer;
  padding: var(--space-2);
}

@media (max-width: 768px) {
  .navbar-toggle {
    display: block;
  }

  .navbar-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4);
  }

  .navbar-nav.show {
    display: flex;
  }
}

/*
 * Thrynd Feedback Components
 * Alerts, badges, tooltips, progress bars
 */

/**
 * @thrynd component alert
 * @description Contextual feedback messages for user actions and system status
 * @category feedback
 * @complexity simple
 */

/**
 * @thrynd variant primary
 * @parent alert
 * @class alert-primary
 * @usage General informational messages
 * @example <div class="alert alert-primary">Information message</div>
 * @semantic Neutral information
 */

/**
 * @thrynd variant success
 * @parent alert
 * @class alert-success
 * @usage Successful operations, confirmations
 * @example <div class="alert alert-success">Operation completed successfully</div>
 * @semantic Positive outcome
 */

/**
 * @thrynd variant danger
 * @parent alert
 * @class alert-danger
 * @usage Errors, critical warnings
 * @example <div class="alert alert-danger">An error occurred</div>
 * @semantic Negative outcome or error
 */

/**
 * @thrynd variant warning
 * @parent alert
 * @class alert-warning
 * @usage Caution messages, non-critical issues
 * @example <div class="alert alert-warning">Please review before continuing</div>
 * @semantic Caution required
 */

/**
 * @thrynd variant info
 * @parent alert
 * @class alert-info
 * @usage Tips, helpful information
 * @example <div class="alert alert-info">Tip: You can also use keyboard shortcuts</div>
 * @semantic Helpful information
 */

/**
 * @thrynd part title
 * @parent alert
 * @class alert-title
 * @usage Bold heading within alert
 * @example <div class="alert alert-success"><div class="alert-title">Success!</div>Your changes were saved.</div>
 */

/**
 * @thrynd part close
 * @parent alert
 * @class alert-close
 * @usage Dismissible alert close button
 * @example <div class="alert alert-info"><button class="alert-close">&times;</button>Dismissible alert</div>
 */

/**
 * @thrynd component badge
 * @description Small status indicators and labels
 * @category feedback
 * @complexity simple
 */

/**
 * @thrynd variant primary
 * @parent badge
 * @class badge-primary
 * @usage Default badge style
 * @example <span class="badge badge-primary">New</span>
 */

/**
 * @thrynd variant success
 * @parent badge
 * @class badge-success
 * @usage Positive status indicators
 * @example <span class="badge badge-success">Active</span>
 */

/**
 * @thrynd variant danger
 * @parent badge
 * @class badge-danger
 * @usage Negative or alert status
 * @example <span class="badge badge-danger">Error</span>
 */

/**
 * @thrynd variant warning
 * @parent badge
 * @class badge-warning
 * @usage Pending or caution status
 * @example <span class="badge badge-warning">Pending</span>
 */

/**
 * @thrynd modifier outline
 * @parent badge
 * @class badge-outline
 * @usage Outlined badge variant
 * @example <span class="badge badge-primary badge-outline">Outlined</span>
 * @combines Can combine with any badge color variant
 */

/**
 * @thrynd modifier pill
 * @parent badge
 * @class badge-pill
 * @usage Rounded pill shape
 * @example <span class="badge badge-primary badge-pill">99+</span>
 * @combines Can combine with any badge variant
 */

/**
 * @thrynd size large
 * @parent badge
 * @class badge-lg
 * @usage Larger badge for emphasis
 * @example <span class="badge badge-primary badge-lg">Featured</span>
 */

/**
 * @thrynd component tooltip
 * @description Hover-triggered informational popups
 * @category feedback
 * @complexity moderate
 */

/**
 * @thrynd variant default
 * @parent tooltip
 * @class tooltip
 * @usage Wrapper element for tooltip trigger
 * @example <span class="tooltip">Hover me<span class="tooltip-text">Tooltip content</span></span>
 */

/**
 * @thrynd part text
 * @parent tooltip
 * @class tooltip-text
 * @usage The tooltip content element
 * @example <span class="tooltip-text">Helpful information</span>
 */

/**
 * @thrynd modifier bottom
 * @parent tooltip
 * @class tooltip-bottom
 * @usage Position tooltip below trigger
 * @example <span class="tooltip tooltip-bottom">Hover<span class="tooltip-text">Below</span></span>
 */

/**
 * @thrynd component progress
 * @description Visual progress indicators
 * @category feedback
 * @complexity simple
 */

/**
 * @thrynd variant default
 * @parent progress
 * @class progress
 * @usage Progress bar container
 * @example <div class="progress"><div class="progress-bar" style="width: 50%">50%</div></div>
 */

/**
 * @thrynd part bar
 * @parent progress
 * @class progress-bar
 * @usage The filled progress indicator
 * @example <div class="progress-bar" style="width: 75%"></div>
 */

/**
 * @thrynd variant success
 * @parent progress
 * @class progress-bar-success
 * @usage Success/complete progress
 * @example <div class="progress"><div class="progress-bar progress-bar-success" style="width: 100%"></div></div>
 */

/**
 * @thrynd size small
 * @parent progress
 * @class progress-sm
 * @usage Compact progress bar
 * @example <div class="progress progress-sm"><div class="progress-bar" style="width: 50%"></div></div>
 */

/**
 * @thrynd size large
 * @parent progress
 * @class progress-lg
 * @usage Larger progress bar with text
 * @example <div class="progress progress-lg"><div class="progress-bar" style="width: 50%">50%</div></div>
 */

/**
 * @thrynd component spinner
 * @description Loading indicator animation
 * @category feedback
 * @complexity simple
 */

/**
 * @thrynd variant default
 * @parent spinner
 * @class spinner
 * @usage Standard loading spinner
 * @example <div class="spinner"></div>
 */

/**
 * @thrynd size small
 * @parent spinner
 * @class spinner-sm
 * @usage Compact inline spinner
 * @example <span class="spinner spinner-sm"></span> Loading...
 */

/**
 * @thrynd size large
 * @parent spinner
 * @class spinner-lg
 * @usage Large page-level spinner
 * @example <div class="spinner spinner-lg"></div>
 */

/**
 * @thrynd component toast
 * @description Temporary notification messages
 * @category feedback
 * @complexity moderate
 */

/**
 * @thrynd variant default
 * @parent toast
 * @class toast
 * @usage Base toast notification
 * @example <div class="toast">Notification message</div>
 */

/**
 * @thrynd variant success
 * @parent toast
 * @class toast-success
 * @usage Success notification
 * @example <div class="toast toast-success">Changes saved!</div>
 */

/**
 * @thrynd variant danger
 * @parent toast
 * @class toast-danger
 * @usage Error notification
 * @example <div class="toast toast-danger">Failed to save</div>
 */

/**
 * @thrynd accessibility required
 * @parent alert
 * @required Use role="alert" for important alerts
 */

/**
 * @thrynd accessibility screenReader
 * @parent spinner
 * @screenReader Add aria-label="Loading" or visually hidden text
 */

/* Alerts */

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  margin-bottom: var(--space-4);
}

.alert-primary {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.alert-success {
  background-color: var(--color-success-light);
  color: var(--color-success);
  border-color: var(--color-success);
}

.alert-danger {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.alert-warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
  border-color: var(--color-warning);
}

.alert-info {
  background-color: var(--color-info-light);
  color: var(--color-info);
  border-color: var(--color-info);
}

.alert-title {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

.alert-close {
  float: right;
  background: none;
  border: none;
  font-size: var(--font-size-xl);
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.alert-close:hover {
  opacity: 1;
}

/* Badges */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border-radius: var(--radius-base);
  white-space: nowrap;
}

.badge-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.badge-secondary {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.badge-success {
  background-color: var(--color-success-light);
  color: var(--color-success);
}

.badge-danger {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}

.badge-warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}

.badge-info {
  background-color: var(--color-info);
  color: var(--color-white);
}

/* Badge variants */

.badge-outline {
  background-color: transparent;
  border: 1px solid currentColor;
}

.badge-primary.badge-outline {
  color: var(--color-primary);
}

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

.badge-lg {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.badge-pill {
  border-radius: var(--radius-full);
}

/* Badge group */

.badge-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Tooltips */

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: var(--z-tooltip);
  background-color: var(--color-gray-900);
  color: var(--color-white);
  text-align: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--transition-fast);

  /* Position below element by default */
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: var(--space-2);
}

.tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--color-gray-900) transparent transparent transparent;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Tooltip positions */

.tooltip-bottom .tooltip-text {
  top: 100%;
  bottom: auto;
  margin-top: var(--space-2);
  margin-bottom: 0;
}

.tooltip-bottom .tooltip-text::after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent var(--color-gray-900) transparent;
}

/* Progress bars */

.progress {
  width: 100%;
  height: 1rem;
  background-color: var(--color-gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: var(--color-primary);
  transition: width var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.progress-bar-success {
  background-color: var(--color-success);
}

.progress-bar-danger {
  background-color: var(--color-danger);
}

.progress-bar-warning {
  background-color: var(--color-warning);
}

/* Progress sizes */

.progress-sm {
  height: 0.5rem;
}

.progress-lg {
  height: 1.5rem;
}

/* Spinner */

.spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--color-gray-300);
  border-radius: 50%;
  border-top-color: var(--color-primary);
  animation: spinner 0.6s linear infinite;
}

.spinner-sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

.spinner-lg {
  width: 2rem;
  height: 2rem;
  border-width: 3px;
}

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

/* Toast notifications */

.toast {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  min-width: 300px;
  max-width: 400px;
  padding: var(--space-4);
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-tooltip);
  animation: slideInRight var(--transition-base);
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-success {
  border-left: 4px solid var(--color-success);
}

.toast-danger {
  border-left: 4px solid var(--color-danger);
}

.toast-warning {
  border-left: 4px solid var(--color-warning);
}

.toast-info {
  border-left: 4px solid var(--color-info);
}

/*
 * Thrynd Modal & Dialog
 * Modal dialogs and overlays
 */

/**
 * @thrynd component modal
 * @description Dialog overlay for focused user interaction
 * @category overlay
 * @complexity moderate
 */

/**
 * @thrynd part backdrop
 * @parent modal
 * @class modal-backdrop
 * @usage Semi-transparent overlay behind modal
 * @example <div class="modal-backdrop show"></div>
 */

/**
 * @thrynd variant default
 * @parent modal
 * @class modal
 * @usage Modal container (centered flexbox)
 * @example <div class="modal show"><div class="modal-dialog">...</div></div>
 */

/**
 * @thrynd part dialog
 * @parent modal
 * @class modal-dialog
 * @usage The modal content container with max-width
 * @example <div class="modal-dialog"><div class="modal-header">...</div><div class="modal-body">...</div></div>
 */

/**
 * @thrynd size small
 * @parent modal
 * @class modal-dialog-sm
 * @usage Narrow modal (300px max-width)
 * @example <div class="modal-dialog modal-dialog-sm">...</div>
 */

/**
 * @thrynd size large
 * @parent modal
 * @class modal-dialog-lg
 * @usage Wide modal (800px max-width)
 * @example <div class="modal-dialog modal-dialog-lg">...</div>
 */

/**
 * @thrynd size xlarge
 * @parent modal
 * @class modal-dialog-xl
 * @usage Extra wide modal (1140px max-width)
 * @example <div class="modal-dialog modal-dialog-xl">...</div>
 */

/**
 * @thrynd modifier fullscreen
 * @parent modal
 * @class modal-dialog-fullscreen
 * @usage Full viewport modal
 * @example <div class="modal-dialog modal-dialog-fullscreen">...</div>
 */

/**
 * @thrynd part header
 * @parent modal
 * @class modal-header
 * @usage Modal title bar with close button
 * @example <div class="modal-header"><h2 class="modal-title">Title</h2><button class="modal-close">&times;</button></div>
 */

/**
 * @thrynd part title
 * @parent modal
 * @class modal-title
 * @usage Modal heading text
 * @example <h2 class="modal-title">Confirm Action</h2>
 */

/**
 * @thrynd part close
 * @parent modal
 * @class modal-close
 * @usage Close button in header
 * @example <button class="modal-close" aria-label="Close">&times;</button>
 */

/**
 * @thrynd part body
 * @parent modal
 * @class modal-body
 * @usage Main modal content area
 * @example <div class="modal-body"><p>Modal content here</p></div>
 */

/**
 * @thrynd part footer
 * @parent modal
 * @class modal-footer
 * @usage Action buttons area
 * @example <div class="modal-footer"><button class="btn-secondary">Cancel</button><button class="btn-primary">Confirm</button></div>
 */

/**
 * @thrynd state show
 * @parent modal
 * @class show
 * @description Makes modal visible
 * @example <div class="modal show">...</div>
 */

/**
 * @thrynd component dropdown
 * @description Toggle-activated menu overlay
 * @category overlay
 * @complexity moderate
 */

/**
 * @thrynd variant default
 * @parent dropdown
 * @class dropdown
 * @usage Container for dropdown trigger and menu
 * @example <div class="dropdown"><button class="dropdown-toggle">Menu</button><div class="dropdown-menu">...</div></div>
 */

/**
 * @thrynd part toggle
 * @parent dropdown
 * @class dropdown-toggle
 * @usage Element that triggers dropdown
 * @example <button class="dropdown-toggle">Options</button>
 */

/**
 * @thrynd part menu
 * @parent dropdown
 * @class dropdown-menu
 * @usage Dropdown content container
 * @example <div class="dropdown-menu"><a class="dropdown-item" href="#">Option 1</a></div>
 */

/**
 * @thrynd part item
 * @parent dropdown
 * @class dropdown-item
 * @usage Individual menu option
 * @example <a class="dropdown-item" href="#">Edit</a>
 */

/**
 * @thrynd part divider
 * @parent dropdown
 * @class dropdown-divider
 * @usage Horizontal separator between items
 * @example <div class="dropdown-divider"></div>
 */

/**
 * @thrynd modifier right
 * @parent dropdown
 * @class dropdown-menu-right
 * @usage Align menu to right edge of trigger
 * @example <div class="dropdown-menu dropdown-menu-right">...</div>
 */

/**
 * @thrynd component popover
 * @description Rich tooltip with header and body
 * @category overlay
 * @complexity simple
 */

/**
 * @thrynd variant default
 * @parent popover
 * @class popover
 * @usage Positioned content popup
 * @example <div class="popover"><div class="popover-header">Title</div><div class="popover-body">Content</div></div>
 */

/**
 * @thrynd part header
 * @parent popover
 * @class popover-header
 * @usage Popover title
 * @example <div class="popover-header">Info</div>
 */

/**
 * @thrynd part body
 * @parent popover
 * @class popover-body
 * @usage Popover content
 * @example <div class="popover-body">More details here</div>
 */

/**
 * @thrynd accessibility required
 * @parent modal
 * @required Use aria-modal="true" and role="dialog" on modal
 */

/**
 * @thrynd accessibility required
 * @parent modal
 * @required Trap focus within modal when open
 */

/**
 * @thrynd accessibility keyboard
 * @parent modal
 * @keyboard Escape key should close modal
 */

/**
 * @thrynd accessibility required
 * @parent dropdown
 * @required Use aria-expanded on toggle, aria-haspopup="menu"
 */

/* Modal backdrop */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal-backdrop);
  display: none;
  animation: fadeIn var(--transition-fast);
}

.modal-backdrop.show {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  overflow-y: auto;
}

.modal.show {
  display: flex;
}

/* Modal dialog */

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 500px;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
  animation: slideDown var(--transition-base);
}

@keyframes slideDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Modal sizes */

.modal-dialog-sm {
  max-width: 300px;
}

.modal-dialog-lg {
  max-width: 800px;
}

.modal-dialog-xl {
  max-width: 1140px;
}

.modal-dialog-fullscreen {
  max-width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}

/* Modal sections */

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.modal-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  font-size: var(--font-size-2xl);
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: var(--color-text);
}

.modal-body {
  padding: var(--space-6);
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* Dropdown */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  display: none;
  min-width: 10rem;
  padding: var(--space-2) 0;
  margin-top: var(--space-2);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.dropdown-menu.show {
  display: block;
  animation: fadeInDown var(--transition-fast);
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-menu-right {
  left: auto;
  right: 0;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.dropdown-item:hover {
  background-color: var(--color-gray-100);
  text-decoration: none;
}

.dropdown-item.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.dropdown-divider {
  height: 1px;
  margin: var(--space-2) 0;
  background-color: var(--color-border);
}

/* Popover */

.popover {
  position: absolute;
  z-index: var(--z-popover);
  max-width: 276px;
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.popover-header {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.popover-body {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

/*
 * Thrynd Tables
 * Table component styles
 */

/* Base table */

.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: var(--space-4);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.table th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-heading);
  background-color: var(--color-surface);
  border-bottom-width: 2px;
}

.table tbody tr:hover {
  background-color: var(--color-surface);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

/* Table variants */

.table-bordered {
  border: 1px solid var(--color-border);
}

.table-bordered th,
.table-bordered td {
  border: 1px solid var(--color-border);
}

.table-striped tbody tr:nth-child(odd) {
  background-color: var(--color-surface);
}

.table-striped tbody tr:hover {
  background-color: var(--color-surface);
  opacity: 0.8;
}

/* Table sizes */

.table-sm th,
.table-sm td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.table-lg th,
.table-lg td {
  padding: var(--space-4) var(--space-6);
}

/* Responsive table */

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .table-responsive {
    width: 100%;
    overflow-x: scroll;
  }
}

/* Table with cards (mobile-friendly alternative) */

@media (max-width: 768px) {
  .table-cards {
    display: block;
  }

  .table-cards thead {
    display: none;
  }

  .table-cards tbody,
  .table-cards tr,
  .table-cards td {
    display: block;
    width: 100%;
  }

  .table-cards tr {
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background-color: var(--color-background);
  }

  .table-cards td {
    border: none;
    padding: var(--space-2) 0;
    text-align: right;
    position: relative;
    padding-left: 50%;
  }

  .table-cards td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    padding-left: 0;
    font-weight: var(--font-weight-semibold);
    text-align: left;
  }
}

/* Table cell alignment */

.table .text-center {
  text-align: center;
}

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

/* Table colors for rows */

.table .table-primary {
  background-color: var(--color-primary-light);
}

.table .table-success {
  background-color: var(--color-success-light);
}

.table .table-danger {
  background-color: var(--color-danger-light);
}

.table .table-warning {
  background-color: var(--color-warning-light);
}

/* Table with actions column */

.table .table-actions {
  width: 1%;
  white-space: nowrap;
}

.table .table-actions .btn {
  margin: 0 var(--space-1);
}

/* Sortable table headers */

.table th.sortable {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  padding-right: var(--space-6);
}

.table th.sortable:hover {
  background-color: var(--color-gray-100);
}

.table th.sortable::after {
  content: '↕';
  position: absolute;
  right: var(--space-3);
  opacity: 0.3;
}

.table th.sortable.sort-asc::after {
  content: '↑';
  opacity: 1;
}

.table th.sortable.sort-desc::after {
  content: '↓';
  opacity: 1;
}

/* Table loading state */

.table.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Empty table state */

.table-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-secondary);
}

.table-empty-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-4);
  opacity: 0.3;
}

/*
 * Thrynd Data Display Components
 * Avatars, lists, stats, and other data presentation components
 */

/* Avatars */

.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  background-color: var(--color-gray-200);
  color: var(--color-gray-600);
  font-weight: var(--font-weight-medium);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.avatar-sm {
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--font-size-xs);
}

.avatar-md {
  width: 2.5rem;
  height: 2.5rem;
  font-size: var(--font-size-base);
}

.avatar-lg {
  width: 4rem;
  height: 4rem;
  font-size: var(--font-size-xl);
}

.avatar-xl {
  width: 6rem;
  height: 6rem;
  font-size: var(--font-size-3xl);
}

/* Avatar group */

.avatar-group {
  display: inline-flex;
  align-items: center;
}

.avatar-group .avatar {
  margin-left: -0.5rem;
  border: 2px solid var(--color-white);
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

.avatar-group .avatar:hover {
  z-index: 1;
  transform: translateY(-2px);
  transition: transform var(--transition-fast);
}

/* Avatar with status indicator */

.avatar-status {
  position: relative;
}

.avatar-status::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  background-color: var(--color-gray-400);
}

.avatar-status.online::after {
  background-color: var(--color-success);
}

.avatar-status.busy::after {
  background-color: var(--color-danger);
}

.avatar-status.away::after {
  background-color: var(--color-warning);
}

/* Stats display */

.stats {
  display: flex;
  gap: var(--space-6);
}

.stat {
  flex: 1;
}

.stat-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.stat-value {
  display: block;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.stat-change {
  display: inline-block;
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
}

.stat-change.positive {
  color: var(--color-success);
}

.stat-change.negative {
  color: var(--color-danger);
}

/* List group */

.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
}

.list-group-item {
  position: relative;
  display: block;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  margin-bottom: -1px;
}

.list-group-item:first-child {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.list-group-item:last-child {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.list-group-item:hover {
  background-color: var(--color-surface);
  text-decoration: none;
}

.list-group-item.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  z-index: 2;
}

/* Timeline */

.timeline {
  position: relative;
  padding-left: var(--space-8);
  list-style: none;
}

.timeline::before {
  content: '';
  position: absolute;
  left: var(--space-4);
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-border);
}

.timeline-item {
  position: relative;
  margin-bottom: var(--space-6);
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(var(--space-8) * -1 + var(--space-4) - 6px);
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-primary);
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.timeline-time {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.timeline-content {
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-md);
}

/* Key-value pairs */

.dl-horizontal {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-6);
}

.dl-horizontal dt {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.dl-horizontal dd {
  margin: 0;
}

/* Empty state */

.empty-state {
  text-align: center;
  padding: var(--space-12);
}

.empty-state-icon {
  font-size: var(--font-size-4xl);
  color: var(--color-text-secondary);
  opacity: 0.5;
  margin-bottom: var(--space-4);
}

.empty-state-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}

.empty-state-description {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}

/* Code block */

.code-block {
  background-color: var(--color-gray-900);
  color: var(--color-gray-100);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.code-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.code-block-title {
  font-size: var(--font-size-xs);
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Divider */

.divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-6) 0;
  border: none;
}

.divider-text {
  position: relative;
  text-align: center;
  margin: var(--space-6) 0;
}

.divider-text::before,
.divider-text::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 45%;
  height: 1px;
  background-color: var(--color-border);
}

.divider-text::before {
  left: 0;
}

.divider-text::after {
  right: 0;
}

.divider-text span {
  background-color: var(--color-background, var(--color-white));
  padding: 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* Utilities */

/*
 * Thrynd Spacing Utilities
 * Margin and padding utilities
 */

/* Margin */

.m-0 { margin: var(--space-0); }

.m-1 { margin: var(--space-1); }

.m-2 { margin: var(--space-2); }

.m-3 { margin: var(--space-3); }

.m-4 { margin: var(--space-4); }

.m-6 { margin: var(--space-6); }

.m-8 { margin: var(--space-8); }

.m-10 { margin: var(--space-10); }

.m-12 { margin: var(--space-12); }

.m-16 { margin: var(--space-16); }

.m-20 { margin: var(--space-20); }

.m-24 { margin: var(--space-24); }

.m-auto { margin: auto; }

/* Margin top */

.mt-0 { margin-top: var(--space-0); }

.mt-1 { margin-top: var(--space-1); }

.mt-2 { margin-top: var(--space-2); }

.mt-3 { margin-top: var(--space-3); }

.mt-4 { margin-top: var(--space-4); }

.mt-6 { margin-top: var(--space-6); }

.mt-8 { margin-top: var(--space-8); }

.mt-10 { margin-top: var(--space-10); }

.mt-12 { margin-top: var(--space-12); }

.mt-16 { margin-top: var(--space-16); }

.mt-20 { margin-top: var(--space-20); }

.mt-24 { margin-top: var(--space-24); }

/* Margin bottom */

.mb-0 { margin-bottom: var(--space-0); }

.mb-1 { margin-bottom: var(--space-1); }

.mb-2 { margin-bottom: var(--space-2); }

.mb-3 { margin-bottom: var(--space-3); }

.mb-4 { margin-bottom: var(--space-4); }

.mb-6 { margin-bottom: var(--space-6); }

.mb-8 { margin-bottom: var(--space-8); }

.mb-10 { margin-bottom: var(--space-10); }

.mb-12 { margin-bottom: var(--space-12); }

.mb-16 { margin-bottom: var(--space-16); }

.mb-20 { margin-bottom: var(--space-20); }

.mb-24 { margin-bottom: var(--space-24); }

/* Margin left */

.ml-0 { margin-left: var(--space-0); }

.ml-1 { margin-left: var(--space-1); }

.ml-2 { margin-left: var(--space-2); }

.ml-3 { margin-left: var(--space-3); }

.ml-4 { margin-left: var(--space-4); }

/* Margin right */

.mr-0 { margin-right: var(--space-0); }

.mr-1 { margin-right: var(--space-1); }

.mr-2 { margin-right: var(--space-2); }

.mr-3 { margin-right: var(--space-3); }

.mr-4 { margin-right: var(--space-4); }

/* Margin horizontal */

.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }

.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }

.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }

.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }

/* Margin vertical */

.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }

.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }

.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }

.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }

.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }

.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }

.my-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }

.my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }

.my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }

.my-20 { margin-top: var(--space-20); margin-bottom: var(--space-20); }

.my-24 { margin-top: var(--space-24); margin-bottom: var(--space-24); }

/* Padding */

.p-0 { padding: var(--space-0); }

.p-1 { padding: var(--space-1); }

.p-2 { padding: var(--space-2); }

.p-3 { padding: var(--space-3); }

.p-4 { padding: var(--space-4); }

.p-6 { padding: var(--space-6); }

.p-8 { padding: var(--space-8); }

.p-10 { padding: var(--space-10); }

.p-12 { padding: var(--space-12); }

.p-16 { padding: var(--space-16); }

.p-20 { padding: var(--space-20); }

.p-24 { padding: var(--space-24); }

/* Padding top */

.pt-0 { padding-top: var(--space-0); }

.pt-1 { padding-top: var(--space-1); }

.pt-2 { padding-top: var(--space-2); }

.pt-3 { padding-top: var(--space-3); }

.pt-4 { padding-top: var(--space-4); }

.pt-6 { padding-top: var(--space-6); }

.pt-8 { padding-top: var(--space-8); }

.pt-10 { padding-top: var(--space-10); }

.pt-12 { padding-top: var(--space-12); }

.pt-16 { padding-top: var(--space-16); }

.pt-20 { padding-top: var(--space-20); }

.pt-24 { padding-top: var(--space-24); }

/* Padding bottom */

.pb-0 { padding-bottom: var(--space-0); }

.pb-1 { padding-bottom: var(--space-1); }

.pb-2 { padding-bottom: var(--space-2); }

.pb-3 { padding-bottom: var(--space-3); }

.pb-4 { padding-bottom: var(--space-4); }

.pb-6 { padding-bottom: var(--space-6); }

.pb-8 { padding-bottom: var(--space-8); }

.pb-10 { padding-bottom: var(--space-10); }

.pb-12 { padding-bottom: var(--space-12); }

.pb-16 { padding-bottom: var(--space-16); }

.pb-20 { padding-bottom: var(--space-20); }

.pb-24 { padding-bottom: var(--space-24); }

/* Padding horizontal */

.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }

.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }

.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }

.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }

.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }

.px-10 { padding-left: var(--space-10); padding-right: var(--space-10); }

.px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }

/* Padding vertical */

.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }

.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }

.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

.py-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }

.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }

.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }

.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }

.py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }

/*
 * Thrynd Color Utilities
 * Text and background color utilities
 */

/* Text colors */

.text-primary { color: var(--color-primary); }

.text-secondary { color: var(--color-secondary); }

.text-success { color: var(--color-success); }

.text-danger { color: var(--color-danger); }

.text-warning { color: var(--color-warning); }

.text-info { color: var(--color-info); }

.text-muted { color: var(--color-text-secondary); }

.text-white { color: var(--color-white); }

.text-black { color: var(--color-black); }

/* Background colors */

.bg-primary { background-color: var(--color-primary); color: var(--color-white); }

.bg-secondary { background-color: var(--color-secondary); color: var(--color-white); }

.bg-success { background-color: var(--color-success); color: var(--color-white); }

.bg-danger { background-color: var(--color-danger); color: var(--color-white); }

.bg-warning { background-color: var(--color-warning); color: var(--color-white); }

.bg-info { background-color: var(--color-info); color: var(--color-white); }

.bg-white { background-color: var(--color-white); }

.bg-gray-50 { background-color: var(--color-gray-50); }

.bg-gray-100 { background-color: var(--color-gray-100); }

.bg-gray-200 { background-color: var(--color-gray-200); }

/* Light background colors */

.bg-primary-light { background-color: var(--color-primary-light); color: var(--color-primary); }

.bg-success-light { background-color: var(--color-success-light); color: var(--color-success); }

.bg-danger-light { background-color: var(--color-danger-light); color: var(--color-danger); }

.bg-warning-light { background-color: var(--color-warning-light); color: var(--color-warning); }

/*
 * Thrynd Typography Utilities
 * Font size, weight, and text utilities
 */

/* Font sizes */

.text-xs { font-size: var(--font-size-xs); }

.text-sm { font-size: var(--font-size-sm); }

.text-base { font-size: var(--font-size-base); }

.text-lg { font-size: var(--font-size-lg); }

.text-xl { font-size: var(--font-size-xl); }

.text-2xl { font-size: var(--font-size-2xl); }

.text-3xl { font-size: var(--font-size-3xl); }

.text-4xl { font-size: var(--font-size-4xl); }

/* Font weights */

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

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

.font-semibold { font-weight: var(--font-weight-semibold); }

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

/* Line heights */

.leading-tight { line-height: var(--line-height-tight); }

.leading-normal { line-height: var(--line-height-normal); }

.leading-relaxed { line-height: var(--line-height-relaxed); }

/* Text alignment */

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

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

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

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

/* Text transform */

.uppercase { text-transform: uppercase; }

.lowercase { text-transform: lowercase; }

.capitalize { text-transform: capitalize; }

.normal-case { text-transform: none; }

/* Text decoration */

.underline { text-decoration: underline; }

.line-through { text-decoration: line-through; }

.no-underline { text-decoration: none; }

/* Font styles */

.italic { font-style: italic; }

.not-italic { font-style: normal; }

/* Text overflow */

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Whitespace */

.whitespace-normal { white-space: normal; }

.whitespace-nowrap { white-space: nowrap; }

.whitespace-pre { white-space: pre; }

.whitespace-pre-wrap { white-space: pre-wrap; }

/*
 * Thrynd Layout Utilities
 * Additional layout and positioning utilities
 */

/* Position */

.relative { position: relative; }

.absolute { position: absolute; }

.fixed { position: fixed; }

.sticky { position: sticky; }

.static { position: static; }

/* Display */

.block { display: block; }

.inline-block { display: inline-block; }

.inline { display: inline; }

.flex { display: flex; }

.inline-flex { display: inline-flex; }

.grid { display: grid; }

.inline-grid { display: inline-grid; }

.hidden { display: none; }

/* Overflow */

.overflow-auto { overflow: auto; }

.overflow-hidden { overflow: hidden; }

.overflow-visible { overflow: visible; }

.overflow-scroll { overflow: scroll; }

/* Z-index */

.z-0 { z-index: 0; }

.z-10 { z-index: 10; }

.z-20 { z-index: 20; }

.z-30 { z-index: 30; }

.z-40 { z-index: 40; }

.z-50 { z-index: 50; }

/* Border radius */

.rounded-none { border-radius: var(--radius-none); }

.rounded-sm { border-radius: var(--radius-sm); }

.rounded { border-radius: var(--radius-base); }

.rounded-md { border-radius: var(--radius-md); }

.rounded-lg { border-radius: var(--radius-lg); }

.rounded-xl { border-radius: var(--radius-xl); }

.rounded-full { border-radius: var(--radius-full); }

/* Shadows */

.shadow-none { box-shadow: none; }

.shadow-sm { box-shadow: var(--shadow-sm); }

.shadow { box-shadow: var(--shadow-base); }

.shadow-md { box-shadow: var(--shadow-md); }

.shadow-lg { box-shadow: var(--shadow-lg); }

.shadow-xl { box-shadow: var(--shadow-xl); }

/* Opacity */

.opacity-0 { opacity: 0; }

.opacity-25 { opacity: 0.25; }

.opacity-50 { opacity: 0.5; }

.opacity-75 { opacity: 0.75; }

.opacity-100 { opacity: 1; }

/* Cursor */

.cursor-auto { cursor: auto; }

.cursor-pointer { cursor: pointer; }

.cursor-not-allowed { cursor: not-allowed; }

/* User select */

.select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.select-text { -webkit-user-select: text; -moz-user-select: text; user-select: text; }

.select-all { -webkit-user-select: all; -moz-user-select: all; user-select: all; }

/* Pointer events */

.pointer-events-none { pointer-events: none; }

.pointer-events-auto { pointer-events: auto; }

/*
 * Thrynd Border Utilities
 * Border width, style, and color utilities
 */

/* Border width */

.border { border-width: 1px; border-style: solid; border-color: var(--color-border); }

.border-0 { border-width: 0; }

.border-2 { border-width: 2px; border-style: solid; border-color: var(--color-border); }

.border-4 { border-width: 4px; border-style: solid; border-color: var(--color-border); }

/* Border sides */

.border-t { border-top: 1px solid var(--color-border); }

.border-r { border-right: 1px solid var(--color-border); }

.border-b { border-bottom: 1px solid var(--color-border); }

.border-l { border-left: 1px solid var(--color-border); }

/* Border colors */

.border-primary { border-color: var(--color-primary); }

.border-secondary { border-color: var(--color-secondary); }

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

.border-danger { border-color: var(--color-danger); }

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

.border-gray-200 { border-color: var(--color-gray-200); }

.border-gray-300 { border-color: var(--color-gray-300); }

.border-transparent { border-color: transparent; }

/* Border side colors */

.border-t-transparent { border-top-color: transparent; }

.border-r-transparent { border-right-color: transparent; }

.border-b-transparent { border-bottom-color: transparent; }

.border-l-transparent { border-left-color: transparent; }

.border-t-primary { border-top-color: var(--color-primary); }

.border-r-primary { border-right-color: var(--color-primary); }

.border-b-primary { border-bottom-color: var(--color-primary); }

.border-l-primary { border-left-color: var(--color-primary); }

.border-t-success { border-top-color: var(--color-success); }

.border-r-success { border-right-color: var(--color-success); }

.border-b-success { border-bottom-color: var(--color-success); }

.border-l-success { border-left-color: var(--color-success); }

/* Border styles */

.border-solid { border-style: solid; }

.border-dashed { border-style: dashed; }

.border-dotted { border-style: dotted; }

.border-none { border-style: none; }

/* Divide (for child elements) */

.divide-y > * + * {
  border-top: 1px solid var(--color-border);
}

.divide-x > * + * {
  border-left: 1px solid var(--color-border);
}

/* Ring (outline) */

.ring {
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.ring-primary {
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.ring-success {
  box-shadow: 0 0 0 3px var(--color-success-light);
}

.ring-danger {
  box-shadow: 0 0 0 3px var(--color-danger-light);
}

/*
 * Thrynd Effects Utilities
 * Transforms, transitions, and visual effects
 */

/* Transforms */

.transform {
  transform: translateX(var(--transform-translate-x, 0))
             translateY(var(--transform-translate-y, 0))
             rotate(var(--transform-rotate, 0))
             skewX(var(--transform-skew-x, 0))
             skewY(var(--transform-skew-y, 0))
             scaleX(var(--transform-scale-x, 1))
             scaleY(var(--transform-scale-y, 1));
}

/* Scale */

.scale-0 { transform: scale(0); }

.scale-50 { transform: scale(0.5); }

.scale-75 { transform: scale(0.75); }

.scale-90 { transform: scale(0.9); }

.scale-95 { transform: scale(0.95); }

.scale-100 { transform: scale(1); }

.scale-105 { transform: scale(1.05); }

.scale-110 { transform: scale(1.1); }

.scale-125 { transform: scale(1.25); }

.scale-150 { transform: scale(1.5); }

/* Rotate */

.rotate-0 { transform: rotate(0deg); }

.rotate-45 { transform: rotate(45deg); }

.rotate-90 { transform: rotate(90deg); }

.rotate-180 { transform: rotate(180deg); }

.-rotate-45 { transform: rotate(-45deg); }

.-rotate-90 { transform: rotate(-90deg); }

.-rotate-180 { transform: rotate(-180deg); }

/* Translate */

.translate-x-0 { transform: translateX(0); }

.translate-x-1 { transform: translateX(0.25rem); }

.translate-x-2 { transform: translateX(0.5rem); }

.translate-x-4 { transform: translateX(1rem); }

.-translate-x-1 { transform: translateX(-0.25rem); }

.-translate-x-2 { transform: translateX(-0.5rem); }

.-translate-x-4 { transform: translateX(-1rem); }

.translate-y-0 { transform: translateY(0); }

.translate-y-1 { transform: translateY(0.25rem); }

.translate-y-2 { transform: translateY(0.5rem); }

.translate-y-4 { transform: translateY(1rem); }

.-translate-y-1 { transform: translateY(-0.25rem); }

.-translate-y-2 { transform: translateY(-0.5rem); }

.-translate-y-4 { transform: translateY(-1rem); }

/* Transitions */

.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: var(--transition-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-none {
  transition-property: none;
}

.transition-all {
  transition-property: all;
  transition-duration: var(--transition-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: var(--transition-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-opacity {
  transition-property: opacity;
  transition-duration: var(--transition-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-transform {
  transition-property: transform;
  transition-duration: var(--transition-base);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Duration */

.duration-75 { transition-duration: 75ms; }

.duration-100 { transition-duration: 100ms; }

.duration-150 { transition-duration: 150ms; }

.duration-200 { transition-duration: 200ms; }

.duration-300 { transition-duration: 300ms; }

.duration-500 { transition-duration: 500ms; }

.duration-700 { transition-duration: 700ms; }

.duration-1000 { transition-duration: 1000ms; }

/* Timing function */

.ease-linear { transition-timing-function: linear; }

.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }

.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* Filters */

.blur-none { filter: blur(0); }

.blur-sm { filter: blur(4px); }

.blur { filter: blur(8px); }

.blur-md { filter: blur(12px); }

.blur-lg { filter: blur(16px); }

.blur-xl { filter: blur(24px); }

.brightness-0 { filter: brightness(0); }

.brightness-50 { filter: brightness(0.5); }

.brightness-75 { filter: brightness(0.75); }

.brightness-90 { filter: brightness(0.9); }

.brightness-100 { filter: brightness(1); }

.brightness-110 { filter: brightness(1.1); }

.brightness-125 { filter: brightness(1.25); }

.brightness-150 { filter: brightness(1.5); }

.contrast-0 { filter: contrast(0); }

.contrast-50 { filter: contrast(0.5); }

.contrast-100 { filter: contrast(1); }

.contrast-125 { filter: contrast(1.25); }

.contrast-150 { filter: contrast(1.5); }

.grayscale-0 { filter: grayscale(0); }

.grayscale { filter: grayscale(100%); }

.invert-0 { filter: invert(0); }

.invert { filter: invert(100%); }

.saturate-0 { filter: saturate(0); }

.saturate-50 { filter: saturate(0.5); }

.saturate-100 { filter: saturate(1); }

.saturate-150 { filter: saturate(1.5); }

.saturate-200 { filter: saturate(2); }

/* Backdrop filter */

.backdrop-blur-none { backdrop-filter: blur(0); }

.backdrop-blur-sm { backdrop-filter: blur(4px); }

.backdrop-blur { backdrop-filter: blur(8px); }

.backdrop-blur-md { backdrop-filter: blur(12px); }

.backdrop-blur-lg { backdrop-filter: blur(16px); }

/* Mix blend mode */

.mix-blend-normal { mix-blend-mode: normal; }

.mix-blend-multiply { mix-blend-mode: multiply; }

.mix-blend-screen { mix-blend-mode: screen; }

.mix-blend-overlay { mix-blend-mode: overlay; }

.mix-blend-darken { mix-blend-mode: darken; }

.mix-blend-lighten { mix-blend-mode: lighten; }

/* Hover effects */

.hover\:scale-105:hover { transform: scale(1.05); }

.hover\:scale-110:hover { transform: scale(1.1); }

.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }

.hover\:shadow-xl:hover { box-shadow: var(--shadow-xl); }

.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }

.hover\:-translate-y-2:hover { transform: translateY(-0.5rem); }

/* Animations */

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* Keyframes */

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

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/*
 * Sizing Utilities
 * Width, height, max-width, min-width, min-height utilities
 */

/* Width utilities */

.w-auto { width: auto; }

.w-full { width: 100%; }

.w-screen { width: 100vw; }

.w-min { width: -moz-min-content; width: min-content; }

.w-max { width: -moz-max-content; width: max-content; }

.w-fit { width: -moz-fit-content; width: fit-content; }

/* Fractional widths */

.w-1\/2 { width: 50%; }

.w-1\/3 { width: 33.333333%; }

.w-2\/3 { width: 66.666667%; }

.w-1\/4 { width: 25%; }

.w-2\/4 { width: 50%; }

.w-3\/4 { width: 75%; }

.w-1\/5 { width: 20%; }

.w-2\/5 { width: 40%; }

.w-3\/5 { width: 60%; }

.w-4\/5 { width: 80%; }

.w-1\/6 { width: 16.666667%; }

.w-2\/6 { width: 33.333333%; }

.w-3\/6 { width: 50%; }

.w-4\/6 { width: 66.666667%; }

.w-5\/6 { width: 83.333333%; }

.w-1\/12 { width: 8.333333%; }

.w-2\/12 { width: 16.666667%; }

.w-3\/12 { width: 25%; }

.w-4\/12 { width: 33.333333%; }

.w-5\/12 { width: 41.666667%; }

.w-6\/12 { width: 50%; }

.w-7\/12 { width: 58.333333%; }

.w-8\/12 { width: 66.666667%; }

.w-9\/12 { width: 75%; }

.w-10\/12 { width: 83.333333%; }

.w-11\/12 { width: 91.666667%; }

/* Fixed widths (using spacing scale) */

.w-0 { width: 0; }

.w-px { width: 1px; }

.w-1 { width: 0.25rem; }

.w-2 { width: 0.5rem; }

.w-3 { width: 0.75rem; }

.w-4 { width: 1rem; }

.w-5 { width: 1.25rem; }

.w-6 { width: 1.5rem; }

.w-7 { width: 1.75rem; }

.w-8 { width: 2rem; }

.w-9 { width: 2.25rem; }

.w-10 { width: 2.5rem; }

.w-11 { width: 2.75rem; }

.w-12 { width: 3rem; }

.w-14 { width: 3.5rem; }

.w-16 { width: 4rem; }

.w-20 { width: 5rem; }

.w-24 { width: 6rem; }

.w-28 { width: 7rem; }

.w-32 { width: 8rem; }

.w-36 { width: 9rem; }

.w-40 { width: 10rem; }

.w-44 { width: 11rem; }

.w-48 { width: 12rem; }

.w-52 { width: 13rem; }

.w-56 { width: 14rem; }

.w-60 { width: 15rem; }

.w-64 { width: 16rem; }

.w-72 { width: 18rem; }

.w-80 { width: 20rem; }

.w-96 { width: 24rem; }

/* Height utilities */

.h-auto { height: auto; }

.h-full { height: 100%; }

.h-screen { height: 100vh; }

.h-min { height: -moz-min-content; height: min-content; }

.h-max { height: -moz-max-content; height: max-content; }

.h-fit { height: -moz-fit-content; height: fit-content; }

/* Fixed heights (using spacing scale) */

.h-0 { height: 0; }

.h-px { height: 1px; }

.h-1 { height: 0.25rem; }

.h-2 { height: 0.5rem; }

.h-3 { height: 0.75rem; }

.h-4 { height: 1rem; }

.h-5 { height: 1.25rem; }

.h-6 { height: 1.5rem; }

.h-7 { height: 1.75rem; }

.h-8 { height: 2rem; }

.h-9 { height: 2.25rem; }

.h-10 { height: 2.5rem; }

.h-11 { height: 2.75rem; }

.h-12 { height: 3rem; }

.h-14 { height: 3.5rem; }

.h-16 { height: 4rem; }

.h-20 { height: 5rem; }

.h-24 { height: 6rem; }

.h-28 { height: 7rem; }

.h-32 { height: 8rem; }

.h-36 { height: 9rem; }

.h-40 { height: 10rem; }

.h-44 { height: 11rem; }

.h-48 { height: 12rem; }

.h-52 { height: 13rem; }

.h-56 { height: 14rem; }

.h-60 { height: 15rem; }

.h-64 { height: 16rem; }

.h-72 { height: 18rem; }

.h-80 { height: 20rem; }

.h-96 { height: 24rem; }

/* Max-width utilities */

.max-w-none { max-width: none; }

.max-w-xs { max-width: 20rem; }

.max-w-sm { max-width: 24rem; }

.max-w-md { max-width: 28rem; }

.max-w-lg { max-width: 32rem; }

.max-w-xl { max-width: 36rem; }

.max-w-2xl { max-width: 42rem; }

.max-w-3xl { max-width: 48rem; }

.max-w-4xl { max-width: 56rem; }

.max-w-5xl { max-width: 64rem; }

.max-w-6xl { max-width: 72rem; }

.max-w-7xl { max-width: 80rem; }

.max-w-full { max-width: 100%; }

.max-w-screen { max-width: 100vw; }

.max-w-min { max-width: -moz-min-content; max-width: min-content; }

.max-w-max { max-width: -moz-max-content; max-width: max-content; }

.max-w-fit { max-width: -moz-fit-content; max-width: fit-content; }

/* Max-width breakpoint sizes */

.max-w-screen-sm { max-width: 640px; }

.max-w-screen-md { max-width: 768px; }

.max-w-screen-lg { max-width: 1024px; }

.max-w-screen-xl { max-width: 1280px; }

.max-w-screen-2xl { max-width: 1536px; }

/* Min-width utilities */

.min-w-0 { min-width: 0; }

.min-w-full { min-width: 100%; }

.min-w-min { min-width: -moz-min-content; min-width: min-content; }

.min-w-max { min-width: -moz-max-content; min-width: max-content; }

.min-w-fit { min-width: -moz-fit-content; min-width: fit-content; }

/* Max-height utilities */

.max-h-none { max-height: none; }

.max-h-full { max-height: 100%; }

.max-h-screen { max-height: 100vh; }

.max-h-min { max-height: -moz-min-content; max-height: min-content; }

.max-h-max { max-height: -moz-max-content; max-height: max-content; }

.max-h-fit { max-height: -moz-fit-content; max-height: fit-content; }

/* Fixed max-heights */

.max-h-0 { max-height: 0; }

.max-h-px { max-height: 1px; }

.max-h-1 { max-height: 0.25rem; }

.max-h-2 { max-height: 0.5rem; }

.max-h-3 { max-height: 0.75rem; }

.max-h-4 { max-height: 1rem; }

.max-h-5 { max-height: 1.25rem; }

.max-h-6 { max-height: 1.5rem; }

.max-h-8 { max-height: 2rem; }

.max-h-10 { max-height: 2.5rem; }

.max-h-12 { max-height: 3rem; }

.max-h-16 { max-height: 4rem; }

.max-h-20 { max-height: 5rem; }

.max-h-24 { max-height: 6rem; }

.max-h-32 { max-height: 8rem; }

.max-h-40 { max-height: 10rem; }

.max-h-48 { max-height: 12rem; }

.max-h-64 { max-height: 16rem; }

.max-h-80 { max-height: 20rem; }

.max-h-96 { max-height: 24rem; }

/* Min-height utilities */

.min-h-0 { min-height: 0; }

.min-h-full { min-height: 100%; }

.min-h-screen { min-height: 100vh; }

.min-h-min { min-height: -moz-min-content; min-height: min-content; }

.min-h-max { min-height: -moz-max-content; min-height: max-content; }

.min-h-fit { min-height: -moz-fit-content; min-height: fit-content; }

/* Aspect ratio utilities */

.aspect-auto { aspect-ratio: auto; }

.aspect-square { aspect-ratio: 1 / 1; }

.aspect-video { aspect-ratio: 16 / 9; }

.aspect-4\/3 { aspect-ratio: 4 / 3; }

.aspect-3\/2 { aspect-ratio: 3 / 2; }

.aspect-21\/9 { aspect-ratio: 21 / 9; }

/*
 * Positioning Utilities
 * Top, right, bottom, left offset utilities for positioned elements
 */

/* Top utilities */

.top-0 { top: 0; }

.top-px { top: 1px; }

.top-0\.5 { top: 0.125rem; }

.top-1 { top: 0.25rem; }

.top-1\.5 { top: 0.375rem; }

.top-2 { top: 0.5rem; }

.top-2\.5 { top: 0.625rem; }

.top-3 { top: 0.75rem; }

.top-3\.5 { top: 0.875rem; }

.top-4 { top: 1rem; }

.top-5 { top: 1.25rem; }

.top-6 { top: 1.5rem; }

.top-7 { top: 1.75rem; }

.top-8 { top: 2rem; }

.top-9 { top: 2.25rem; }

.top-10 { top: 2.5rem; }

.top-11 { top: 2.75rem; }

.top-12 { top: 3rem; }

.top-14 { top: 3.5rem; }

.top-16 { top: 4rem; }

.top-20 { top: 5rem; }

.top-24 { top: 6rem; }

.top-28 { top: 7rem; }

.top-32 { top: 8rem; }

.top-36 { top: 9rem; }

.top-40 { top: 10rem; }

.top-44 { top: 11rem; }

.top-48 { top: 12rem; }

.top-52 { top: 13rem; }

.top-56 { top: 14rem; }

.top-60 { top: 15rem; }

.top-64 { top: 16rem; }

.top-72 { top: 18rem; }

.top-80 { top: 20rem; }

.top-96 { top: 24rem; }

.top-auto { top: auto; }

.top-1\/2 { top: 50%; }

.top-1\/3 { top: 33.333333%; }

.top-2\/3 { top: 66.666667%; }

.top-1\/4 { top: 25%; }

.top-2\/4 { top: 50%; }

.top-3\/4 { top: 75%; }

.top-full { top: 100%; }

/* Right utilities */

.right-0 { right: 0; }

.right-px { right: 1px; }

.right-0\.5 { right: 0.125rem; }

.right-1 { right: 0.25rem; }

.right-1\.5 { right: 0.375rem; }

.right-2 { right: 0.5rem; }

.right-2\.5 { right: 0.625rem; }

.right-3 { right: 0.75rem; }

.right-3\.5 { right: 0.875rem; }

.right-4 { right: 1rem; }

.right-5 { right: 1.25rem; }

.right-6 { right: 1.5rem; }

.right-7 { right: 1.75rem; }

.right-8 { right: 2rem; }

.right-9 { right: 2.25rem; }

.right-10 { right: 2.5rem; }

.right-11 { right: 2.75rem; }

.right-12 { right: 3rem; }

.right-14 { right: 3.5rem; }

.right-16 { right: 4rem; }

.right-20 { right: 5rem; }

.right-24 { right: 6rem; }

.right-28 { right: 7rem; }

.right-32 { right: 8rem; }

.right-36 { right: 9rem; }

.right-40 { right: 10rem; }

.right-44 { right: 11rem; }

.right-48 { right: 12rem; }

.right-52 { right: 13rem; }

.right-56 { right: 14rem; }

.right-60 { right: 15rem; }

.right-64 { right: 16rem; }

.right-72 { right: 18rem; }

.right-80 { right: 20rem; }

.right-96 { right: 24rem; }

.right-auto { right: auto; }

.right-1\/2 { right: 50%; }

.right-1\/3 { right: 33.333333%; }

.right-2\/3 { right: 66.666667%; }

.right-1\/4 { right: 25%; }

.right-2\/4 { right: 50%; }

.right-3\/4 { right: 75%; }

.right-full { right: 100%; }

/* Bottom utilities */

.bottom-0 { bottom: 0; }

.bottom-px { bottom: 1px; }

.bottom-0\.5 { bottom: 0.125rem; }

.bottom-1 { bottom: 0.25rem; }

.bottom-1\.5 { bottom: 0.375rem; }

.bottom-2 { bottom: 0.5rem; }

.bottom-2\.5 { bottom: 0.625rem; }

.bottom-3 { bottom: 0.75rem; }

.bottom-3\.5 { bottom: 0.875rem; }

.bottom-4 { bottom: 1rem; }

.bottom-5 { bottom: 1.25rem; }

.bottom-6 { bottom: 1.5rem; }

.bottom-7 { bottom: 1.75rem; }

.bottom-8 { bottom: 2rem; }

.bottom-9 { bottom: 2.25rem; }

.bottom-10 { bottom: 2.5rem; }

.bottom-11 { bottom: 2.75rem; }

.bottom-12 { bottom: 3rem; }

.bottom-14 { bottom: 3.5rem; }

.bottom-16 { bottom: 4rem; }

.bottom-20 { bottom: 5rem; }

.bottom-24 { bottom: 6rem; }

.bottom-28 { bottom: 7rem; }

.bottom-32 { bottom: 8rem; }

.bottom-36 { bottom: 9rem; }

.bottom-40 { bottom: 10rem; }

.bottom-44 { bottom: 11rem; }

.bottom-48 { bottom: 12rem; }

.bottom-52 { bottom: 13rem; }

.bottom-56 { bottom: 14rem; }

.bottom-60 { bottom: 15rem; }

.bottom-64 { bottom: 16rem; }

.bottom-72 { bottom: 18rem; }

.bottom-80 { bottom: 20rem; }

.bottom-96 { bottom: 24rem; }

.bottom-auto { bottom: auto; }

.bottom-1\/2 { bottom: 50%; }

.bottom-1\/3 { bottom: 33.333333%; }

.bottom-2\/3 { bottom: 66.666667%; }

.bottom-1\/4 { bottom: 25%; }

.bottom-2\/4 { bottom: 50%; }

.bottom-3\/4 { bottom: 75%; }

.bottom-full { bottom: 100%; }

/* Left utilities */

.left-0 { left: 0; }

.left-px { left: 1px; }

.left-0\.5 { left: 0.125rem; }

.left-1 { left: 0.25rem; }

.left-1\.5 { left: 0.375rem; }

.left-2 { left: 0.5rem; }

.left-2\.5 { left: 0.625rem; }

.left-3 { left: 0.75rem; }

.left-3\.5 { left: 0.875rem; }

.left-4 { left: 1rem; }

.left-5 { left: 1.25rem; }

.left-6 { left: 1.5rem; }

.left-7 { left: 1.75rem; }

.left-8 { left: 2rem; }

.left-9 { left: 2.25rem; }

.left-10 { left: 2.5rem; }

.left-11 { left: 2.75rem; }

.left-12 { left: 3rem; }

.left-14 { left: 3.5rem; }

.left-16 { left: 4rem; }

.left-20 { left: 5rem; }

.left-24 { left: 6rem; }

.left-28 { left: 7rem; }

.left-32 { left: 8rem; }

.left-36 { left: 9rem; }

.left-40 { left: 10rem; }

.left-44 { left: 11rem; }

.left-48 { left: 12rem; }

.left-52 { left: 13rem; }

.left-56 { left: 14rem; }

.left-60 { left: 15rem; }

.left-64 { left: 16rem; }

.left-72 { left: 18rem; }

.left-80 { left: 20rem; }

.left-96 { left: 24rem; }

.left-auto { left: auto; }

.left-1\/2 { left: 50%; }

.left-1\/3 { left: 33.333333%; }

.left-2\/3 { left: 66.666667%; }

.left-1\/4 { left: 25%; }

.left-2\/4 { left: 50%; }

.left-3\/4 { left: 75%; }

.left-full { left: 100%; }

/* Inset utilities (all sides) */

.inset-0 { inset: 0; }

.inset-px { inset: 1px; }

.inset-0\.5 { inset: 0.125rem; }

.inset-1 { inset: 0.25rem; }

.inset-2 { inset: 0.5rem; }

.inset-3 { inset: 0.75rem; }

.inset-4 { inset: 1rem; }

.inset-5 { inset: 1.25rem; }

.inset-6 { inset: 1.5rem; }

.inset-8 { inset: 2rem; }

.inset-10 { inset: 2.5rem; }

.inset-12 { inset: 3rem; }

.inset-16 { inset: 4rem; }

.inset-auto { inset: auto; }

.inset-1\/2 { inset: 50%; }

.inset-full { inset: 100%; }

/* Inset X (left & right) */

.inset-x-0 { left: 0; right: 0; }

.inset-x-px { left: 1px; right: 1px; }

.inset-x-1 { left: 0.25rem; right: 0.25rem; }

.inset-x-2 { left: 0.5rem; right: 0.5rem; }

.inset-x-3 { left: 0.75rem; right: 0.75rem; }

.inset-x-4 { left: 1rem; right: 1rem; }

.inset-x-5 { left: 1.25rem; right: 1.25rem; }

.inset-x-6 { left: 1.5rem; right: 1.5rem; }

.inset-x-8 { left: 2rem; right: 2rem; }

.inset-x-10 { left: 2.5rem; right: 2.5rem; }

.inset-x-12 { left: 3rem; right: 3rem; }

.inset-x-16 { left: 4rem; right: 4rem; }

.inset-x-auto { left: auto; right: auto; }

.inset-x-1\/2 { left: 50%; right: 50%; }

.inset-x-full { left: 100%; right: 100%; }

/* Inset Y (top & bottom) */

.inset-y-0 { top: 0; bottom: 0; }

.inset-y-px { top: 1px; bottom: 1px; }

.inset-y-1 { top: 0.25rem; bottom: 0.25rem; }

.inset-y-2 { top: 0.5rem; bottom: 0.5rem; }

.inset-y-3 { top: 0.75rem; bottom: 0.75rem; }

.inset-y-4 { top: 1rem; bottom: 1rem; }

.inset-y-5 { top: 1.25rem; bottom: 1.25rem; }

.inset-y-6 { top: 1.5rem; bottom: 1.5rem; }

.inset-y-8 { top: 2rem; bottom: 2rem; }

.inset-y-10 { top: 2.5rem; bottom: 2.5rem; }

.inset-y-12 { top: 3rem; bottom: 3rem; }

.inset-y-16 { top: 4rem; bottom: 4rem; }

.inset-y-auto { top: auto; bottom: auto; }

.inset-y-1\/2 { top: 50%; bottom: 50%; }

.inset-y-full { top: 100%; bottom: 100%; }

/* Negative values */

.-top-1 { top: -0.25rem; }

.-top-2 { top: -0.5rem; }

.-top-3 { top: -0.75rem; }

.-top-4 { top: -1rem; }

.-top-5 { top: -1.25rem; }

.-top-6 { top: -1.5rem; }

.-top-8 { top: -2rem; }

.-top-10 { top: -2.5rem; }

.-top-12 { top: -3rem; }

.-top-16 { top: -4rem; }

.-top-20 { top: -5rem; }

.-top-24 { top: -6rem; }

.-top-1\/2 { top: -50%; }

.-top-full { top: -100%; }

.-right-1 { right: -0.25rem; }

.-right-2 { right: -0.5rem; }

.-right-3 { right: -0.75rem; }

.-right-4 { right: -1rem; }

.-right-5 { right: -1.25rem; }

.-right-6 { right: -1.5rem; }

.-right-8 { right: -2rem; }

.-right-10 { right: -2.5rem; }

.-right-12 { right: -3rem; }

.-right-16 { right: -4rem; }

.-right-20 { right: -5rem; }

.-right-24 { right: -6rem; }

.-right-1\/2 { right: -50%; }

.-right-full { right: -100%; }

.-bottom-1 { bottom: -0.25rem; }

.-bottom-2 { bottom: -0.5rem; }

.-bottom-3 { bottom: -0.75rem; }

.-bottom-4 { bottom: -1rem; }

.-bottom-5 { bottom: -1.25rem; }

.-bottom-6 { bottom: -1.5rem; }

.-bottom-8 { bottom: -2rem; }

.-bottom-10 { bottom: -2.5rem; }

.-bottom-12 { bottom: -3rem; }

.-bottom-16 { bottom: -4rem; }

.-bottom-20 { bottom: -5rem; }

.-bottom-24 { bottom: -6rem; }

.-bottom-1\/2 { bottom: -50%; }

.-bottom-full { bottom: -100%; }

.-left-1 { left: -0.25rem; }

.-left-2 { left: -0.5rem; }

.-left-3 { left: -0.75rem; }

.-left-4 { left: -1rem; }

.-left-5 { left: -1.25rem; }

.-left-6 { left: -1.5rem; }

.-left-8 { left: -2rem; }

.-left-10 { left: -2.5rem; }

.-left-12 { left: -3rem; }

.-left-16 { left: -4rem; }

.-left-20 { left: -5rem; }

.-left-24 { left: -6rem; }

.-left-1\/2 { left: -50%; }

.-left-full { left: -100%; }

/* Object fit utilities */

.object-contain { -o-object-fit: contain; object-fit: contain; }

.object-cover { -o-object-fit: cover; object-fit: cover; }

.object-fill { -o-object-fit: fill; object-fit: fill; }

.object-none { -o-object-fit: none; object-fit: none; }

.object-scale-down { -o-object-fit: scale-down; object-fit: scale-down; }

/* Object position utilities */

.object-bottom { -o-object-position: bottom; object-position: bottom; }

.object-center { -o-object-position: center; object-position: center; }

.object-left { -o-object-position: left; object-position: left; }

.object-left-bottom { -o-object-position: left bottom; object-position: left bottom; }

.object-left-top { -o-object-position: left top; object-position: left top; }

.object-right { -o-object-position: right; object-position: right; }

.object-right-bottom { -o-object-position: right bottom; object-position: right bottom; }

.object-right-top { -o-object-position: right top; object-position: right top; }

.object-top { -o-object-position: top; object-position: top; }

/* Responsive utilities (must be last for proper cascade) */

/*
 * Responsive Utilities
 * Mobile-first responsive variants for all utility classes
 * Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px)
 */

/* Small screens and up (640px+) */

@media (min-width: 640px) {
  /* Display */
  .sm\:block { display: block; }
  .sm\:inline-block { display: inline-block; }
  .sm\:inline { display: inline; }
  .sm\:flex { display: flex; }
  .sm\:inline-flex { display: inline-flex; }
  .sm\:grid { display: grid; }
  .sm\:inline-grid { display: inline-grid; }
  .sm\:hidden { display: none; }

  /* Flex direction */
  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-row-reverse { flex-direction: row-reverse; }
  .sm\:flex-col { flex-direction: column; }
  .sm\:flex-col-reverse { flex-direction: column-reverse; }

  /* Flex wrap */
  .sm\:flex-wrap { flex-wrap: wrap; }
  .sm\:flex-wrap-reverse { flex-wrap: wrap-reverse; }
  .sm\:flex-nowrap { flex-wrap: nowrap; }

  /* Justify content */
  .sm\:justify-start { justify-content: flex-start; }
  .sm\:justify-end { justify-content: flex-end; }
  .sm\:justify-center { justify-content: center; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:justify-around { justify-content: space-around; }
  .sm\:justify-evenly { justify-content: space-evenly; }

  /* Align items */
  .sm\:items-start { align-items: flex-start; }
  .sm\:items-end { align-items: flex-end; }
  .sm\:items-center { align-items: center; }
  .sm\:items-baseline { align-items: baseline; }
  .sm\:items-stretch { align-items: stretch; }

  /* Grid columns */
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  /* Width */
  .sm\:w-auto { width: auto; }
  .sm\:w-full { width: 100%; }
  .sm\:w-1\/2 { width: 50%; }
  .sm\:w-1\/3 { width: 33.333333%; }
  .sm\:w-2\/3 { width: 66.666667%; }
  .sm\:w-1\/4 { width: 25%; }
  .sm\:w-3\/4 { width: 75%; }

  /* Max-width */
  .sm\:max-w-xs { max-width: 20rem; }
  .sm\:max-w-sm { max-width: 24rem; }
  .sm\:max-w-md { max-width: 28rem; }
  .sm\:max-w-lg { max-width: 32rem; }
  .sm\:max-w-xl { max-width: 36rem; }
  .sm\:max-w-full { max-width: 100%; }
  .sm\:max-w-none { max-width: none; }

  /* Text alignment */
  .sm\:text-left { text-align: left; }
  .sm\:text-center { text-align: center; }
  .sm\:text-right { text-align: right; }

  /* Common spacing */
  .sm\:m-0 { margin: 0; }
  .sm\:m-auto { margin: auto; }
  .sm\:mx-auto { margin-left: auto; margin-right: auto; }
  .sm\:p-4 { padding: var(--space-4); }
  .sm\:p-6 { padding: var(--space-6); }
  .sm\:p-8 { padding: var(--space-8); }
}

/* Medium screens and up (768px+) */

@media (min-width: 768px) {
  /* Display */
  .md\:block { display: block; }
  .md\:inline-block { display: inline-block; }
  .md\:inline { display: inline; }
  .md\:flex { display: flex; }
  .md\:inline-flex { display: inline-flex; }
  .md\:grid { display: grid; }
  .md\:inline-grid { display: inline-grid; }
  .md\:hidden { display: none; }

  /* Flex direction */
  .md\:flex-row { flex-direction: row; }
  .md\:flex-row-reverse { flex-direction: row-reverse; }
  .md\:flex-col { flex-direction: column; }
  .md\:flex-col-reverse { flex-direction: column-reverse; }

  /* Flex wrap */
  .md\:flex-wrap { flex-wrap: wrap; }
  .md\:flex-wrap-reverse { flex-wrap: wrap-reverse; }
  .md\:flex-nowrap { flex-wrap: nowrap; }

  /* Justify content */
  .md\:justify-start { justify-content: flex-start; }
  .md\:justify-end { justify-content: flex-end; }
  .md\:justify-center { justify-content: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:justify-around { justify-content: space-around; }
  .md\:justify-evenly { justify-content: space-evenly; }

  /* Align items */
  .md\:items-start { align-items: flex-start; }
  .md\:items-end { align-items: flex-end; }
  .md\:items-center { align-items: center; }
  .md\:items-baseline { align-items: baseline; }
  .md\:items-stretch { align-items: stretch; }

  /* Grid columns */
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  /* Width */
  .md\:w-auto { width: auto; }
  .md\:w-full { width: 100%; }
  .md\:w-1\/2 { width: 50%; }
  .md\:w-1\/3 { width: 33.333333%; }
  .md\:w-2\/3 { width: 66.666667%; }
  .md\:w-1\/4 { width: 25%; }
  .md\:w-3\/4 { width: 75%; }

  /* Max-width */
  .md\:max-w-xs { max-width: 20rem; }
  .md\:max-w-sm { max-width: 24rem; }
  .md\:max-w-md { max-width: 28rem; }
  .md\:max-w-lg { max-width: 32rem; }
  .md\:max-w-xl { max-width: 36rem; }
  .md\:max-w-2xl { max-width: 42rem; }
  .md\:max-w-full { max-width: 100%; }
  .md\:max-w-none { max-width: none; }

  /* Text alignment */
  .md\:text-left { text-align: left; }
  .md\:text-center { text-align: center; }
  .md\:text-right { text-align: right; }

  /* Common spacing */
  .md\:m-0 { margin: 0; }
  .md\:m-auto { margin: auto; }
  .md\:mx-auto { margin-left: auto; margin-right: auto; }
  .md\:p-4 { padding: var(--space-4); }
  .md\:p-6 { padding: var(--space-6); }
  .md\:p-8 { padding: var(--space-8); }
}

/* Large screens and up (1024px+) */

@media (min-width: 1024px) {
  /* Display */
  .lg\:block { display: block; }
  .lg\:inline-block { display: inline-block; }
  .lg\:inline { display: inline; }
  .lg\:flex { display: flex; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:grid { display: grid; }
  .lg\:inline-grid { display: inline-grid; }
  .lg\:hidden { display: none; }

  /* Flex direction */
  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-row-reverse { flex-direction: row-reverse; }
  .lg\:flex-col { flex-direction: column; }
  .lg\:flex-col-reverse { flex-direction: column-reverse; }

  /* Flex wrap */
  .lg\:flex-wrap { flex-wrap: wrap; }
  .lg\:flex-wrap-reverse { flex-wrap: wrap-reverse; }
  .lg\:flex-nowrap { flex-wrap: nowrap; }

  /* Justify content */
  .lg\:justify-start { justify-content: flex-start; }
  .lg\:justify-end { justify-content: flex-end; }
  .lg\:justify-center { justify-content: center; }
  .lg\:justify-between { justify-content: space-between; }
  .lg\:justify-around { justify-content: space-around; }
  .lg\:justify-evenly { justify-content: space-evenly; }

  /* Align items */
  .lg\:items-start { align-items: flex-start; }
  .lg\:items-end { align-items: flex-end; }
  .lg\:items-center { align-items: center; }
  .lg\:items-baseline { align-items: baseline; }
  .lg\:items-stretch { align-items: stretch; }

  /* Grid columns */
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  /* Width */
  .lg\:w-auto { width: auto; }
  .lg\:w-full { width: 100%; }
  .lg\:w-1\/2 { width: 50%; }
  .lg\:w-1\/3 { width: 33.333333%; }
  .lg\:w-2\/3 { width: 66.666667%; }
  .lg\:w-1\/4 { width: 25%; }
  .lg\:w-3\/4 { width: 75%; }
  .lg\:w-1\/5 { width: 20%; }
  .lg\:w-2\/5 { width: 40%; }
  .lg\:w-3\/5 { width: 60%; }
  .lg\:w-4\/5 { width: 80%; }

  /* Max-width */
  .lg\:max-w-xs { max-width: 20rem; }
  .lg\:max-w-sm { max-width: 24rem; }
  .lg\:max-w-md { max-width: 28rem; }
  .lg\:max-w-lg { max-width: 32rem; }
  .lg\:max-w-xl { max-width: 36rem; }
  .lg\:max-w-2xl { max-width: 42rem; }
  .lg\:max-w-3xl { max-width: 48rem; }
  .lg\:max-w-4xl { max-width: 56rem; }
  .lg\:max-w-5xl { max-width: 64rem; }
  .lg\:max-w-full { max-width: 100%; }
  .lg\:max-w-none { max-width: none; }

  /* Text alignment */
  .lg\:text-left { text-align: left; }
  .lg\:text-center { text-align: center; }
  .lg\:text-right { text-align: right; }

  /* Common spacing */
  .lg\:m-0 { margin: 0; }
  .lg\:m-auto { margin: auto; }
  .lg\:mx-auto { margin-left: auto; margin-right: auto; }
  .lg\:p-4 { padding: var(--space-4); }
  .lg\:p-6 { padding: var(--space-6); }
  .lg\:p-8 { padding: var(--space-8); }
  .lg\:p-12 { padding: var(--space-12); }
}

/* Extra large screens and up (1280px+) */

@media (min-width: 1280px) {
  /* Display */
  .xl\:block { display: block; }
  .xl\:inline-block { display: inline-block; }
  .xl\:inline { display: inline; }
  .xl\:flex { display: flex; }
  .xl\:inline-flex { display: inline-flex; }
  .xl\:grid { display: grid; }
  .xl\:inline-grid { display: inline-grid; }
  .xl\:hidden { display: none; }

  /* Flex direction */
  .xl\:flex-row { flex-direction: row; }
  .xl\:flex-row-reverse { flex-direction: row-reverse; }
  .xl\:flex-col { flex-direction: column; }
  .xl\:flex-col-reverse { flex-direction: column-reverse; }

  /* Flex wrap */
  .xl\:flex-wrap { flex-wrap: wrap; }
  .xl\:flex-wrap-reverse { flex-wrap: wrap-reverse; }
  .xl\:flex-nowrap { flex-wrap: nowrap; }

  /* Justify content */
  .xl\:justify-start { justify-content: flex-start; }
  .xl\:justify-end { justify-content: flex-end; }
  .xl\:justify-center { justify-content: center; }
  .xl\:justify-between { justify-content: space-between; }
  .xl\:justify-around { justify-content: space-around; }
  .xl\:justify-evenly { justify-content: space-evenly; }

  /* Align items */
  .xl\:items-start { align-items: flex-start; }
  .xl\:items-end { align-items: flex-end; }
  .xl\:items-center { align-items: center; }
  .xl\:items-baseline { align-items: baseline; }
  .xl\:items-stretch { align-items: stretch; }

  /* Grid columns */
  .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  /* Width */
  .xl\:w-auto { width: auto; }
  .xl\:w-full { width: 100%; }
  .xl\:w-1\/2 { width: 50%; }
  .xl\:w-1\/3 { width: 33.333333%; }
  .xl\:w-2\/3 { width: 66.666667%; }
  .xl\:w-1\/4 { width: 25%; }
  .xl\:w-3\/4 { width: 75%; }
  .xl\:w-1\/5 { width: 20%; }
  .xl\:w-2\/5 { width: 40%; }
  .xl\:w-3\/5 { width: 60%; }
  .xl\:w-4\/5 { width: 80%; }

  /* Max-width */
  .xl\:max-w-xs { max-width: 20rem; }
  .xl\:max-w-sm { max-width: 24rem; }
  .xl\:max-w-md { max-width: 28rem; }
  .xl\:max-w-lg { max-width: 32rem; }
  .xl\:max-w-xl { max-width: 36rem; }
  .xl\:max-w-2xl { max-width: 42rem; }
  .xl\:max-w-3xl { max-width: 48rem; }
  .xl\:max-w-4xl { max-width: 56rem; }
  .xl\:max-w-5xl { max-width: 64rem; }
  .xl\:max-w-6xl { max-width: 72rem; }
  .xl\:max-w-7xl { max-width: 80rem; }
  .xl\:max-w-full { max-width: 100%; }
  .xl\:max-w-none { max-width: none; }

  /* Text alignment */
  .xl\:text-left { text-align: left; }
  .xl\:text-center { text-align: center; }
  .xl\:text-right { text-align: right; }

  /* Common spacing */
  .xl\:m-0 { margin: 0; }
  .xl\:m-auto { margin: auto; }
  .xl\:mx-auto { margin-left: auto; margin-right: auto; }
  .xl\:p-4 { padding: var(--space-4); }
  .xl\:p-6 { padding: var(--space-6); }
  .xl\:p-8 { padding: var(--space-8); }
  .xl\:p-12 { padding: var(--space-12); }
}

/* 2XL screens and up (1536px+) */

@media (min-width: 1536px) {
  /* Display */
  .\32xl\:block { display: block; }
  .\32xl\:inline-block { display: inline-block; }
  .\32xl\:inline { display: inline; }
  .\32xl\:flex { display: flex; }
  .\32xl\:inline-flex { display: inline-flex; }
  .\32xl\:grid { display: grid; }
  .\32xl\:inline-grid { display: inline-grid; }
  .\32xl\:hidden { display: none; }

  /* Flex direction */
  .\32xl\:flex-row { flex-direction: row; }
  .\32xl\:flex-row-reverse { flex-direction: row-reverse; }
  .\32xl\:flex-col { flex-direction: column; }
  .\32xl\:flex-col-reverse { flex-direction: column-reverse; }

  /* Grid columns */
  .\32xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .\32xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .\32xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .\32xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .\32xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .\32xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .\32xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .\32xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  /* Width */
  .\32xl\:w-auto { width: auto; }
  .\32xl\:w-full { width: 100%; }
  .\32xl\:w-1\/2 { width: 50%; }
  .\32xl\:w-1\/3 { width: 33.333333%; }
  .\32xl\:w-2\/3 { width: 66.666667%; }
  .\32xl\:w-1\/4 { width: 25%; }
  .\32xl\:w-3\/4 { width: 75%; }

  /* Max-width */
  .\32xl\:max-w-2xl { max-width: 42rem; }
  .\32xl\:max-w-3xl { max-width: 48rem; }
  .\32xl\:max-w-4xl { max-width: 56rem; }
  .\32xl\:max-w-5xl { max-width: 64rem; }
  .\32xl\:max-w-6xl { max-width: 72rem; }
  .\32xl\:max-w-7xl { max-width: 80rem; }
  .\32xl\:max-w-full { max-width: 100%; }
  .\32xl\:max-w-none { max-width: none; }

  /* Text alignment */
  .\32xl\:text-left { text-align: left; }
  .\32xl\:text-center { text-align: center; }
  .\32xl\:text-right { text-align: right; }
}