/* =================================================================
Ty Component Library - Complete CSS System
Industry-Standard Semantic Design System

This file contains:
- CSS Variables (Design Tokens)
- Utility Classes
- Theme Support (Light/Dark)
- Surface System
- 5-Variant Color System
================================================================= */

/* =================================================================
PRE-DEFINITION STYLES - PREVENT LAYOUT SHIFTS
These styles apply BEFORE custom elements are registered via JavaScript.
They reserve space to prevent FOUC (Flash of Unstyled Content) and layout shifts.
================================================================= */

/* Icon component - reserve space before registration */
ty-icon:not(:defined) {
  display: inline-block;
  aspect-ratio: 1 / 1;
  opacity: 0;
  transition: opacity 0.15s ease-in;
}

/* Default size (no attribute or size="md") */
ty-icon:not(:defined),
ty-icon:not(:defined)[size="md"] {
  width: 1em;
  height: 1em;
}

/* Em-based sizes */
ty-icon:not(:defined)[size="xs"] {
  width: 0.75em;
  height: 0.75em;
}

ty-icon:not(:defined)[size="sm"] {
  width: 0.875em;
  height: 0.875em;
}

ty-icon:not(:defined)[size="lg"] {
  width: 1.25em;
  height: 1.25em;
}

ty-icon:not(:defined)[size="xl"] {
  width: 1.5em;
  height: 1.5em;
}

ty-icon:not(:defined)[size="2xl"] {
  width: 2em;
  height: 2em;
}

/* Pixel-based sizes */
ty-icon:not(:defined)[size="12"] {
  width: 12px;
  height: 12px;
}

ty-icon:not(:defined)[size="14"] {
  width: 14px;
  height: 14px;
}

ty-icon:not(:defined)[size="16"] {
  width: 16px;
  height: 16px;
}

ty-icon:not(:defined)[size="18"] {
  width: 18px;
  height: 18px;
}

ty-icon:not(:defined)[size="20"] {
  width: 20px;
  height: 20px;
}

ty-icon:not(:defined)[size="24"] {
  width: 24px;
  height: 24px;
}

ty-icon:not(:defined)[size="32"] {
  width: 32px;
  height: 32px;
}

ty-icon:not(:defined)[size="48"] {
  width: 48px;
  height: 48px;
}

ty-icon:not(:defined)[size="64"] {
  width: 64px;
  height: 64px;
}

ty-icon:not(:defined)[size="80"] {
  width: 80px;
  height: 80px;
}

ty-icon:not(:defined)[size="96"] {
  width: 96px;
  height: 96px;
}

/* Once defined, fade in smoothly */
ty-icon {
  opacity: 1;
}

/* =================================================================
CSS VARIABLES - DESIGN TOKENS
================================================================= */

/* Default theme (light) */
html {
  /* =================================================================
5-VARIANT COLOR SYSTEM
Simplified from 7 variants to 5 practical variants:
-strong = Strong emphasis - active states, strong borders
-mild = Moderate emphasis - hover states, focus rings  
= Base color - default appearance
-soft = Reduced emphasis - muted backgrounds, secondary
-faint = Minimal emphasis - subtle hints, disabled states
================================================================= */

  /* Primary */
  --ty-color-primary-strong: #0034c7;
  --ty-color-primary-mild: #1c40a8;
  --ty-color-primary: #4367cd;
  --ty-color-primary-soft: #60a5fa;
  --ty-color-primary-faint: #93c5fd;

  /* Secondary */
  --ty-color-secondary-strong: #6d28d9;
  --ty-color-secondary-mild: #7c3aed;
  --ty-color-secondary: #8b5cf6;
  --ty-color-secondary-soft: #a78bfa;
  --ty-color-secondary-faint: #c4b5fd;

  /* Success */
  --ty-color-success-strong: #006e49;
  --ty-color-success-mild: #2b8f6d;
  --ty-color-success: #3eaa86;
  --ty-color-success-soft: #64b399;
  --ty-color-success-faint: #7fd4b2;

  /* Danger */
  --ty-color-danger-strong: #b91c1c;
  --ty-color-danger-mild: #dc2626;
  --ty-color-danger: #ef4444;
  --ty-color-danger-soft: #f87171;
  --ty-color-danger-faint: #fca5a5;

  /* Warning */
  --ty-color-warning-strong: #e86400;
  --ty-color-warning-mild: #ee7f00;
  --ty-color-warning: #f59e0b;
  --ty-color-warning-soft: #fbbf24;
  --ty-color-warning-faint: #fcd34d;

  /* Neutral */
  --ty-color-neutral-strong: #374151;
  --ty-color-neutral-mild: #4b5563;
  --ty-color-neutral: #6b7280;
  --ty-color-neutral-soft: #9ca3af;
  --ty-color-neutral-faint: #d1d5db;

  /* =================================================================
BACKGROUND COLORS
================================================================= */

  --ty-bg-faint: #f8fafc;
  /* Very light canvas - for minimal backgrounds */
  --ty-bg-soft: #f1f5f9;
  /* Light canvas - app backgrounds */
  --ty-bg: #ffffff;
  /* WHITE - primary content baseline */
  --ty-bg-mild: #f8fafc;
  /* Subtle elevation - cards with light tint */
  --ty-bg-strong: #e2e8f0;
  /* Maximum elevation - clear distinction */

  /* Primary backgrounds */
  --ty-bg-primary: #dbeafe;
  --ty-bg-primary-mild: #bfdbfe;
  --ty-bg-primary-soft: #eff6ff;

  /* Secondary backgrounds */
  --ty-bg-secondary: #e9d5ff;
  --ty-bg-secondary-mild: #ddd6fe;
  --ty-bg-secondary-soft: #f3e8ff;

  /* Success backgrounds */
  --ty-bg-success: #d1fae5;
  --ty-bg-success-mild: #a7f3d0;
  --ty-bg-success-soft: #ecfdf5;

  /* Danger backgrounds */
  --ty-bg-danger: #fee2e2;
  --ty-bg-danger-mild: #fecaca;
  --ty-bg-danger-soft: #fef2f2;

  /* Warning backgrounds */
  --ty-bg-warning: #fef3c7;
  --ty-bg-warning-mild: #fde68a;
  --ty-bg-warning-soft: #fffbeb;

  /* Neutral backgrounds */
  --ty-bg-neutral: #f2f2f2;
  --ty-bg-neutral-mild: #e9e9e9;
  --ty-bg-neutral-soft: #f9fafb;

  /* =================================================================
BORDER COLORS
================================================================= */

  --ty-border: #e5e7eb;
  --ty-border-mild: #d1d5db;
  --ty-border-strong: #6b7280;
  --ty-border-soft: #f3f4f6;
  --ty-border-faint: #fafafa;

  /* Semantic borders */
  --ty-border-primary: var(--ty-color-primary);
  --ty-border-secondary: var(--ty-color-secondary);
  --ty-border-success: var(--ty-color-success);
  --ty-border-danger: var(--ty-color-danger);
  --ty-border-warning: var(--ty-color-warning);
  --ty-border-neutral: var(--ty-color-neutral);

  /* =================================================================
SURFACE SYSTEM
================================================================= */

  --ty-surface-canvas: #ebebeb;
  --ty-surface-content: #f4f4f4;
  --ty-surface-elevated: #f8f8f8;
  --ty-surface-floating: #ffffff;
  --ty-surface-input: #ffffff;

  /* =================================================================
TEXT HIERARCHY
================================================================= */

  /* Text hierarchy - emphasis based, not semantic */
  --ty-text: #111827;
  /* Primary text - highest emphasis */
  --ty-text-mild: #000000;
  /* Maximum emphasis - true black */
  --ty-text-strong: #000000;
  /* Maximum emphasis - true black */
  --ty-text-soft: #374151;
  /* Less emphasis - medium gray */
  --ty-text-faint: #9ca3af;
  /* Minimum emphasis - very light gray */

  /* =================================================================
COMPONENT TOKENS
================================================================= */

  /* Modal tokens */
  --ty-modal-bg: #ffffff;
  --ty-modal-color: #111827;
  --ty-modal-border: #e5e7eb;
  --ty-modal-backdrop: rgba(0, 0, 0, 0.5);
  --ty-modal-backdrop-blur: blur(2px);
  --ty-modal-border-radius: 16px;
  --ty-modal-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --ty-modal-duration: 200ms;

  /* Modal sizing */
  --ty-modal-sm-width: 300px;
  --ty-modal-md-width: 500px;
  --ty-modal-lg-width: 700px;
  --ty-modal-xl-width: 900px;
  --ty-modal-full-width: 95vw;
  --ty-modal-full-height: 95vh;

  /* Input component tokens */
  --ty-input-bg: #ffffff;
  --ty-input-color: #111827;
  --ty-input-border: #d1d5db;
  --ty-input-border-hover: #9ca3af;
  --ty-input-border-focus: var(--ty-color-primary);
  --ty-input-shadow-focus: rgba(59, 130, 246, 0.1);
  --ty-input-placeholder: #9ca3af;
  --ty-input-disabled-bg: #f9fafb;
  --ty-input-disabled-border: #e5e7eb;
  --ty-input-disabled-color: #9ca3af;
  --ty-label-color: #374151;

  /* Input semantic states */
  --ty-input-success-border: var(--ty-color-success);
  --ty-input-danger-border: var(--ty-color-danger);
  --ty-input-warning-border: var(--ty-color-warning);

  /* Accent colors */
  --ty-accent-primary: #367cd2;
  --ty-accent-secondary: #8461d5;
  --ty-accent-success: #3bb68d;
  --ty-accent-danger: #df5b5b;
  --ty-accent-warning: #e1a644;
  --ty-accent-neutral: #414141;

  /* =================================================================
DESIGN SYSTEM TOKENS
================================================================= */

  /* Spacing Scale */
  --ty-spacing-0: 0;
  --ty-spacing-px: 1px;
  --ty-spacing-mini: 0.125rem;
  --ty-spacing-1: 0.25rem;
  --ty-spacing-2: 0.5rem;
  --ty-spacing-3: 0.75rem;
  --ty-spacing-4: 1rem;
  --ty-spacing-5: 1.25rem;
  --ty-spacing-6: 1.5rem;
  --ty-spacing-7: 1.75rem;
  --ty-spacing-8: 2rem;
  --ty-spacing-9: 2.25rem;
  --ty-spacing-10: 2.5rem;
  --ty-spacing-12: 3rem;
  --ty-spacing-16: 4rem;
  --ty-spacing-20: 5rem;
  --ty-spacing-24: 6rem;

  /* Border Radius */
  --ty-radius-none: 0;
  --ty-radius-sm: 0.125rem;
  --ty-radius-base: 0.25rem;
  --ty-radius-md: 0.375rem;
  --ty-radius-lg: 0.5rem;
  --ty-radius-xl: 0.75rem;
  --ty-radius-2xl: 1rem;
  --ty-radius-3xl: 1.5rem;
  --ty-radius-full: 9999px;

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

  /* Typography */
  --ty-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ty-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;

  --ty-font-xxs: 0.625rem;
  --ty-font-xs: 0.75rem;
  --ty-font-sm: 0.875rem;
  --ty-font-base: 1rem;
  --ty-font-lg: 1.125rem;
  --ty-font-xl: 1.25rem;
  --ty-font-2xl: 1.5rem;
  --ty-font-3xl: 1.875rem;
  --ty-font-4xl: 2.25rem;
  --ty-font-5xl: 3rem;

  --ty-font-thin: 100;
  --ty-font-light: 300;
  --ty-font-normal: 400;
  --ty-font-medium: 500;
  --ty-font-semibold: 600;
  --ty-font-bold: 700;
  --ty-font-extrabold: 800;

  --ty-line-height-none: 1;
  --ty-line-height-tight: 1.25;
  --ty-line-height-snug: 1.375;
  --ty-line-height-normal: 1.5;
  --ty-line-height-relaxed: 1.625;
  --ty-line-height-loose: 2;

  /* Transitions */
  --ty-transition-none: none;
  --ty-transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ty-transition-colors: bg-color, border-color, color, fill, stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ty-transition-shadow: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ty-transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Component Sizes */
  --ty-size-xs: 1.5rem;
  /* 24px */
  --ty-size-sm: 2rem;
  /* 32px */
  --ty-size-md: 2.5rem;
  /* 40px */
  --ty-size-lg: 3rem;
  /* 48px */
  --ty-size-xl: 3.5rem;
  /* 56px */

  /* Z-Index Scale */
  --ty-z-auto: auto;
  --ty-z-0: 0;
  --ty-z-10: 10;
  --ty-z-20: 20;
  --ty-z-30: 30;
  --ty-z-40: 40;
  --ty-z-50: 50;
  --ty-z-sticky: 1020;
  --ty-z-fixed: 1030;
  --ty-z-modal-backdrop: 1040;
  --ty-z-modal: 1050;
  --ty-z-popover: 1060;
  --ty-z-tooltip: 1070;
  --ty-z-dropdown: 1080;
}

/* =================================================================
DARK THEME OVERRIDES
================================================================= */

html.dark,
html[data-theme="dark"] {
  /* =================================================================
5-VARIANT COLOR SYSTEM - DARK THEME
Emphasis logic inverts: lighter = more emphasis
================================================================= */

  /* Primary */
  --ty-color-primary-strong: #c9dff9;
  --ty-color-primary-mild: #68a5f0;
  --ty-color-primary: #4784d0;
  --ty-color-primary-soft: #4573ac;
  --ty-color-primary-faint: #4d6888;

  /* Secondary */
  --ty-color-secondary-strong: #ddd6fe;
  --ty-color-secondary-mild: #c4b5fd;
  --ty-color-secondary: #a78bfa;
  --ty-color-secondary-soft: #8269bc;
  --ty-color-secondary-faint: #76619f;

  /* Success */
  --ty-color-success-strong: #c2f0df;
  --ty-color-success-mild: #6ee7b7;
  --ty-color-success: #3aba8b;
  --ty-color-success-soft: #459679;
  --ty-color-success-faint: #1b795c;

  /* Danger */
  --ty-color-danger-strong: #ffabab;
  --ty-color-danger-mild: #e58787;
  --ty-color-danger: #d06f6f;
  --ty-color-danger-soft: #b06666;
  --ty-color-danger-faint: #aa6e6e;

  /* Warning */
  --ty-color-warning-strong: #fde68a;
  --ty-color-warning-mild: #fcd34d;
  --ty-color-warning: #fbbf24;
  --ty-color-warning-soft: #f59e0b;
  --ty-color-warning-faint: #a06726;

  /* Neutral */
  --ty-color-neutral-strong: #f3f4f6;
  --ty-color-neutral-mild: #d6d6d6;
  --ty-color-neutral: #b3b3b3;
  --ty-color-neutral-soft: #777777;
  --ty-color-neutral-faint: #5b5b5b;

  /* Backgrounds for dark mode */
  --ty-bg-faint: #0f1419;
  --ty-bg-soft: #111827;
  --ty-bg: #1f2937;
  --ty-bg-mild: #374151;
  --ty-bg-strong: #6b7280;

  /* Semantic backgrounds - much darker in dark mode */
  --ty-bg-primary-mild: #43517a;
  --ty-bg-primary: #394159;
  --ty-bg-primary-soft: #323a4f;

  --ty-bg-secondary-mild: #5b21b6;
  --ty-bg-secondary: #4a3c65;
  --ty-bg-secondary-soft: #3b3645;

  --ty-bg-success: #3a4442;
  --ty-bg-success-mild: #405752;
  --ty-bg-success-soft: #2f3b38;

  --ty-bg-danger-mild: #853535;
  --ty-bg-danger: #522828;
  --ty-bg-danger-soft: #483c3c;

  --ty-bg-warning-mild: #743953;
  --ty-bg-warning: #694555;
  --ty-bg-warning-soft: #45333b;

  --ty-bg-neutral-mild: #414141;
  --ty-bg-neutral: #323232;
  --ty-bg-neutral-soft: #242424;

  /* Borders for dark mode */
  --ty-border-strong: #8c8c8c;
  --ty-border-mild: #666666;
  --ty-border: #535353;
  --ty-border-soft: #1f2937;
  --ty-border-faint: #030712;

  --ty-surface-canvas: black;
  --ty-surface-content: #1a1a1a;
  --ty-surface-elevated: #282828;
  --ty-surface-floating: #343434;
  --ty-surface-input: #1f2937;

  --ty-text-mild: #f9fafb;
  --ty-text-strong: #ffffff;
  --ty-text: #d6d6d6;
  --ty-text-soft: #7f8590;
  --ty-text-faint: #555a63;

  /* Shadows need to be darker/more prominent in dark mode */
  --ty-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --ty-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3);
  --ty-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --ty-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --ty-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  --ty-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

  /* Accent colors for dark mode */
  --ty-accent-primary: #415b7a;
  --ty-accent-secondary: #8461d5;
  --ty-accent-success: #3f7a66;
  --ty-accent-danger: #ab5050;
  --ty-accent-warning: #d0852f;
  --ty-accent-neutral: #4d4d4d;

  /* Input component tokens - dark mode */
  --ty-input-bg: #1b1b1b;
  --ty-input-color: #f9fafb;
  --ty-input-border: #505050;
  --ty-input-border-hover: #7f7f7f;
  --ty-input-border-focus: var(--ty-color-primary);
  --ty-input-shadow-focus: rgba(96, 165, 250, 0.1);
  --ty-input-placeholder: #717171;
  --ty-input-disabled-bg: #282828;
  --ty-input-disabled-border: #2e2e2e;
  --ty-input-disabled-color: #717171;
  --ty-label-color: #d1d5db;

  /* Modal - dark mode */
  --ty-modal-bg: var(--ty-bg-mild);
  --ty-modal-color: var(--ty-color-neutral-mild);
  --ty-modal-border: var(--ty-border);
  --ty-modal-backdrop: rgba(0, 0, 0, 0.7);
  --ty-modal-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.4),
    0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* =================================================================
TEXT SELECTION STYLING
Global and semantic text selection colors
================================================================= */

/* Global text selection - uses primary colors by default */
::selection {
  background-color: var(--ty-selection-bg, var(--ty-bg-primary-mild));
  color: var(--ty-selection-color, var(--ty-text-strong));
}

::-moz-selection {
  background-color: var(--ty-selection-bg, var(--ty-color-primary));
  color: var(--ty-selection-color, var(--ty-text-strong));
}


/* Code block selection - special handling for better readability */
pre ::selection,
code ::selection,
pre::-moz-selection,
code::-moz-selection {
  background-color: var(--ty-color-warning-soft);
  color: var(--ty-color-neutral-strong);
}

html.dark pre ::selection,
html.dark code ::selection,
html.dark pre::-moz-selection,
html.dark code::-moz-selection {
  background-color: var(--ty-color-warning);
  color: var(--ty-bg-strong);
}

/* Input and textarea selection - higher contrast */
input::selection,
textarea::selection,
input::-moz-selection,
textarea::-moz-selection {
  background-color: var(--ty-color-primary);
  color: white;
}

html.dark input::selection,
html.dark textarea::selection,
html.dark input::-moz-selection,
html.dark textarea::-moz-selection {
  background-color: var(--ty-color-primary-soft);
  color: var(--ty-color-primary-strong);
}

/* Semantic selection utility classes */
.ty-selection-primary ::selection,
.ty-selection-primary::-moz-selection {
  background-color: var(--ty-color-primary-soft);
  color: var(--ty-color-primary-strong);
}

.ty-selection-secondary ::selection,
.ty-selection-secondary::-moz-selection {
  background-color: var(--ty-color-secondary-soft);
  color: var(--ty-color-secondary-strong);
}

.ty-selection-success ::selection,
.ty-selection-success::-moz-selection {
  background-color: var(--ty-color-success-soft);
  color: var(--ty-color-success-strong);
}

.ty-selection-warning ::selection,
.ty-selection-warning::-moz-selection {
  background-color: var(--ty-color-warning-soft);
  color: var(--ty-color-warning-strong);
}

.ty-selection-danger ::selection,
.ty-selection-danger::-moz-selection {
  background-color: var(--ty-color-danger-soft);
  color: var(--ty-color-danger-strong);
}

.ty-selection-neutral ::selection,
.ty-selection-neutral::-moz-selection {
  background-color: var(--ty-color-neutral-soft);
  color: var(--ty-color-neutral-strong);
}

/* Dark mode semantic selections */
html.dark .ty-selection-primary ::selection,
html.dark .ty-selection-primary::-moz-selection {
  background-color: var(--ty-color-primary);
  color: white;
}

html.dark .ty-selection-secondary ::selection,
html.dark .ty-selection-secondary::-moz-selection {
  background-color: var(--ty-color-secondary);
  color: white;
}

html.dark .ty-selection-success ::selection,
html.dark .ty-selection-success::-moz-selection {
  background-color: var(--ty-color-success);
  color: white;
}

html.dark .ty-selection-warning ::selection,
html.dark .ty-selection-warning::-moz-selection {
  background-color: var(--ty-color-warning);
  color: var(--ty-bg-strong);
}

html.dark .ty-selection-danger ::selection,
html.dark .ty-selection-danger::-moz-selection {
  background-color: var(--ty-color-danger);
  color: white;
}

html.dark .ty-selection-neutral ::selection,
html.dark .ty-selection-neutral::-moz-selection {
  background-color: var(--ty-color-neutral);
  color: white;
}

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

/* =================================================================
SURFACE UTILITIES
================================================================= */

/* Elevated surfaces - cards, panels, components */
.ty-elevated {
  background-color: var(--ty-surface-elevated) !important;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
}

/* Floating surfaces - modals, dropdowns, tooltips */
.ty-floating {
  background-color: var(--ty-surface-floating) !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
}

/* App and page backgrounds - the canvas for content */
.ty-canvas {
  background-color: var(--ty-surface-canvas) !important;
}

/* Main content areas - primary content background */
.ty-content {
  background-color: var(--ty-surface-content) !important;
}

/* Input surfaces - form controls, text areas, inputs */
.ty-input {
  background-color: var(--ty-input-bg) !important;
}

/* Dark theme adjustments for shadows */
html.dark .ty-elevated {
  background-color: var(--ty-surface-elevated) !important;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2) !important;
}

html.dark .ty-floating {
  background-color: var(--ty-surface-floating) !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3) !important;
}

html.dark .ty-high-elevation {
  background-color: var(--ty-surface-floating) !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4) !important;
}

html.dark .ty-sunken {
  background-color: var(--ty-surface-input) !important;
  box-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 0.1) !important;
}

/* =================================================================
SEMANTIC BACKGROUND UTILITIES
================================================================= */

/* Semantic backgrounds - these are the key theme utilities */
.ty-bg-primary {
  background-color: var(--ty-bg-primary);
}

.ty-bg-primary\+ {
  background-color: var(--ty-bg-primary-mild);
}

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

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

.ty-bg-secondary\+ {
  background-color: var(--ty-bg-secondary-mild);
}

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

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

.ty-bg-success\+ {
  background-color: var(--ty-bg-success-mild);
}

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

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

.ty-bg-danger\+ {
  background-color: var(--ty-bg-danger-mild);
}

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

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

.ty-bg-warning\+ {
  background-color: var(--ty-bg-warning-mild);
}

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

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

.ty-bg-neutral\+ {
  background-color: var(--ty-bg-neutral-mild);
}

.ty-bg-neutral- {
  background-color: var(--ty-bg-neutral-soft);
}

/* Legacy background utilities */
.ty-bg {
  background-color: var(--ty-bg);
}

.ty-bg\+ {
  background-color: var(--ty-bg-mild);
}

.ty-bg\- {
  background-color: var(--ty-bg-soft);
}

/* =================================================================
TEXT HIERARCHY UTILITIES
================================================================= */

/* Base text hierarchy - emphasis based, not semantic */
.ty-text {
  color: var(--ty-text) !important;
}

.ty-text\+ {
  color: var(--ty-text-mild) !important;
}

.ty-text\+\+ {
  color: var(--ty-text-strong) !important;
}

.ty-text- {
  color: var(--ty-text-soft) !important;
}

.ty-text-- {
  color: var(--ty-text-faint) !important;
}

/* =================================================================
SEMANTIC TEXT COLORS - 5-VARIANT SYSTEM
================================================================= */

/* Primary text colors with full 5-variant system */
.ty-text-primary\+\+ {
  color: var(--ty-color-primary-strong) !important;
}

.ty-text-primary\+ {
  color: var(--ty-color-primary-mild) !important;
}

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

.ty-text-primary- {
  color: var(--ty-color-primary-soft) !important;
}

.ty-text-primary-- {
  color: var(--ty-color-primary-faint) !important;
}

/* Secondary text colors */
.ty-text-secondary\+\+ {
  color: var(--ty-color-secondary-strong) !important;
}

.ty-text-secondary\+ {
  color: var(--ty-color-secondary-mild) !important;
}

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

.ty-text-secondary- {
  color: var(--ty-color-secondary-soft) !important;
}

.ty-text-secondary-- {
  color: var(--ty-color-secondary-faint) !important;
}

/* Success text colors */
.ty-text-success\+\+ {
  color: var(--ty-color-success-strong) !important;
}

.ty-text-success\+ {
  color: var(--ty-color-success-mild) !important;
}

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

.ty-text-success- {
  color: var(--ty-color-success-soft) !important;
}

.ty-text-success-- {
  color: var(--ty-color-success-faint) !important;
}

/* Danger text colors */
.ty-text-danger\+\+ {
  color: var(--ty-color-danger-strong) !important;
}

.ty-text-danger\+ {
  color: var(--ty-color-danger-mild) !important;
}

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

.ty-text-danger- {
  color: var(--ty-color-danger-soft) !important;
}

.ty-text-danger-- {
  color: var(--ty-color-danger-faint) !important;
}

/* Warning text colors */
.ty-text-warning\+\+ {
  color: var(--ty-color-warning-strong) !important;
}

.ty-text-warning\+ {
  color: var(--ty-color-warning-mild) !important;
}

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

.ty-text-warning- {
  color: var(--ty-color-warning-soft) !important;
}

.ty-text-warning-- {
  color: var(--ty-color-warning-faint) !important;
}

/* Neutral text colors */
.ty-text-neutral\+\+ {
  color: var(--ty-color-neutral-strong) !important;
}

.ty-text-neutral\+ {
  color: var(--ty-color-neutral-mild) !important;
}

.ty-text-neutral {
  color: var(--ty-color-neutral) !important;
}

.ty-text-neutral- {
  color: var(--ty-color-neutral-soft) !important;
}

.ty-text-neutral-- {
  color: var(--ty-color-neutral-faint) !important;
}

/* =================================================================
BORDER UTILITIES
================================================================= */

/* Base border colors with emphasis */
.ty-border {
  border-color: var(--ty-border) !important;
}

.ty-border\+ {
  border-color: var(--ty-border-mild) !important;
}

.ty-border\+\+ {
  border-color: var(--ty-border-strong) !important;
}

.ty-border- {
  border-color: var(--ty-border-soft);
}

.ty-border-- {
  border-color: var(--ty-border-faint);
}

/* Semantic border colors */
.ty-border-primary {
  border-color: var(--ty-border-primary);
}

.ty-border-secondary {
  border-color: var(--ty-border-secondary);
}

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

.ty-border-danger {
  border-color: var(--ty-border-danger);
}

.ty-border-warning {
  border-color: var(--ty-border-warning);
}

.ty-border-neutral {
  border-color: var(--ty-border-neutral);
}

/* =================================================================
COMPONENT UTILITIES
================================================================= */

/* Card/Panel utilities */
.ty-card {
  background-color: var(--ty-bg);
  color: var(--ty-color-neutral-mild);
}

.ty-card-elevated {
  background-color: var(--ty-bg-mild);
  box-shadow: var(--ty-shadow-md);
}

/* Input-like utilities for custom form elements */
.ty-input-bg {
  background-color: var(--ty-input-bg);
}

.ty-input-border {
  border-color: var(--ty-input-border);
}

.ty-input-focus {
  border-color: var(--ty-input-border-focus);
}

/* Modal/overlay utilities */
.ty-modal-bg {
  background-color: var(--ty-modal-bg);
}

.ty-modal-backdrop {
  background-color: var(--ty-modal-backdrop);
}


/* =================================================================
INTERACTIVE STATES
================================================================= */


.hover\:ty-bg-neutral--:hover {
  background-color: var(--ty-bg-neutral-faint);
}

.hover\:ty-bg-neutral-:hover {
  background-color: var(--ty-bg-neutral-soft);
}


.hover\:ty-bg-neutral:hover {
  background-color: var(--ty-bg-neutral);
}

.hover\:ty-bg-neutral\+:hover {
  background-color: var(--ty-bg-neutral-mild);
}

.hover\:ty-bg-neutral\+\+:hover {
  background-color: var(--ty-bg-neutral-strong);
}


.hover\:ty-bg-primary:hover {
  background-color: var(--ty-bg-primary);
}

.hover\:ty-bg-primary\+:hover {
  background-color: var(--ty-bg-primary-mild);
}

.hover\:ty-bg-secondary:hover {
  background-color: var(--ty-bg-secondary);
}

.hover\:ty-bg-secondary\+:hover {
  background-color: var(--ty-bg-secondary-mild);
}

.hover\:ty-bg-success:hover {
  background-color: var(--ty-bg-success);
}

.hover\:ty-bg-success\+:hover {
  background-color: var(--ty-bg-success-mild);
}

.hover\:ty-bg-danger:hover {
  background-color: var(--ty-bg-danger);
}

.hover\:ty-bg-danger\+:hover {
  background-color: var(--ty-bg-danger-mild);
}

.hover\:ty-bg-danger-:hover {
  background-color: var(--ty-bg-danger-soft);
}

/* Hover states for text colors */
.hover\:ty-text:hover {
  color: var(--ty-text);
}

.hover\:ty-text\+:hover {
  color: var(--ty-text-mild);
}

.hover\:ty-text\+\+:hover {
  color: var(--ty-text-strong);
}

.hover\:ty-text-:hover {
  color: var(--ty-text-soft);
}

.hover\:ty-text--:hover {
  color: var(--ty-text-faint);
}

/* Hover states for semantic text colors */
/* Primary text hover states */
.hover\:ty-text-primary\+\+:hover {
  color: var(--ty-color-primary-strong) !important;
}

.hover\:ty-text-primary\+:hover {
  color: var(--ty-color-primary-mild) !important;
}

.hover\:ty-text-primary:hover {
  color: var(--ty-color-primary) !important;
}

.hover\:ty-text-primary-:hover {
  color: var(--ty-color-primary-soft) !important;
}

.hover\:ty-text-primary--:hover {
  color: var(--ty-color-primary-faint) !important;
}

/* Secondary text hover states */
.hover\:ty-text-secondary\+\+:hover {
  color: var(--ty-color-secondary-strong) !important;
}

.hover\:ty-text-secondary\+:hover {
  color: var(--ty-color-secondary-mild) !important;
}

.hover\:ty-text-secondary:hover {
  color: var(--ty-color-secondary) !important;
}

.hover\:ty-text-secondary-:hover {
  color: var(--ty-color-secondary-soft) !important;
}

.hover\:ty-text-secondary--:hover {
  color: var(--ty-color-secondary-faint) !important;
}

/* Success text hover states */
.hover\:ty-text-success\+\+:hover {
  color: var(--ty-color-success-strong) !important;
}

.hover\:ty-text-success\+:hover {
  color: var(--ty-color-success-mild) !important;
}

.hover\:ty-text-success:hover {
  color: var(--ty-color-success) !important;
}

.hover\:ty-text-success-:hover {
  color: var(--ty-color-success-soft) !important;
}

.hover\:ty-text-success--:hover {
  color: var(--ty-color-success-faint) !important;
}

/* Danger text hover states */
.hover\:ty-text-danger\+\+:hover {
  color: var(--ty-color-danger-strong) !important;
}

.hover\:ty-text-danger\+:hover {
  color: var(--ty-color-danger-mild) !important;
}

.hover\:ty-text-danger:hover {
  color: var(--ty-color-danger) !important;
}

.hover\:ty-text-danger-:hover {
  color: var(--ty-color-danger-soft) !important;
}

.hover\:ty-text-danger--:hover {
  color: var(--ty-color-danger-faint) !important;
}

/* Warning text hover states */
.hover\:ty-text-warning\+\+:hover {
  color: var(--ty-color-warning-strong) !important;
}

.hover\:ty-text-warning\+:hover {
  color: var(--ty-color-warning-mild) !important;
}

.hover\:ty-text-warning:hover {
  color: var(--ty-color-warning) !important;
}

.hover\:ty-text-warning-:hover {
  color: var(--ty-color-warning-soft) !important;
}

.hover\:ty-text-warning--:hover {
  color: var(--ty-color-warning-faint) !important;
}

/* Neutral text hover states */
.hover\:ty-text-neutral\+\+:hover {
  color: var(--ty-color-neutral-strong) !important;
}

.hover\:ty-text-neutral+:hover {
  color: var(--ty-color-neutral-mild) !important;
}

.hover\:ty-text-neutral:hover {
  color: var(--ty-color-neutral) !important;
}

.hover\:ty-text-neutral-:hover {
  color: var(--ty-color-neutral-soft) !important;
}

.hover\:ty-text-neutral--:hover {
  color: var(--ty-color-neutral-faint) !important;
}

/* Hover states for borders */
/* Base border hover states */
.hover\:ty-border\+\+:hover {
  border-color: var(--ty-border-strong) !important;
}

.hover\:ty-border\+:hover {
  border-color: var(--ty-border-mild) !important;
}

.hover\:ty-border:hover {
  border-color: var(--ty-border) !important;
}

.hover\:ty-border-:hover {
  border-color: var(--ty-border-soft) !important;
}

.hover\:ty-border--:hover {
  border-color: var(--ty-border-faint) !important;
}

/* Semantic border hover states */
.hover\:ty-border-primary:hover {
  border-color: var(--ty-border-primary) !important;
}

.hover\:ty-border-secondary:hover {
  border-color: var(--ty-border-secondary) !important;
}

.hover\:ty-border-success:hover {
  border-color: var(--ty-border-success) !important;
}

.hover\:ty-border-danger:hover {
  border-color: var(--ty-border-danger) !important;
}

.hover\:ty-border-warning:hover {
  border-color: var(--ty-border-warning) !important;
}

.hover\:ty-border-neutral:hover {
  border-color: var(--ty-border-neutral) !important;
}

.focus\:ty-border\+\+:focus {
  border-color: var(--ty-border-strong) !important;
}

.focus\:ty-border+:focus {
  border-color: var(--ty-border-mild) !important;
}

.focus\:ty-border:focus {
  border-color: var(--ty-border) !important;
}

.focus\:ty-border-:focus {
  border-color: var(--ty-border-soft) !important;
}

.focus\:ty-border--:focus {
  border-color: var(--ty-border-faint) !important;
}

/* Semantic border focus states */
.focus\:ty-border-primary:focus {
  border-color: var(--ty-border-primary) !important;
}

.focus\:ty-border-secondary:focus {
  border-color: var(--ty-border-secondary) !important;
}

.focus\:ty-border-success:focus {
  border-color: var(--ty-border-success) !important;
}

.focus\:ty-border-danger:focus {
  border-color: var(--ty-border-danger) !important;
}

.focus\:ty-border-warning:focus {
  border-color: var(--ty-border-warning) !important;
}

.focus\:ty-border-neutral:focus {
  border-color: var(--ty-border-neutral) !important;
}

/* =================================================================
RESPONSIVE VARIANTS
================================================================= */

/* Small screens and up */
@media (min-width: 640px) {
  .sm\:ty-bg {
    background-color: var(--ty-bg);
  }

  .sm\:ty-bg-primary {
    background-color: var(--ty-bg-primary);
  }

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

/* Medium screens and up */
@media (min-width: 768px) {
  .md\:ty-bg {
    background-color: var(--ty-bg);
  }

  .md\:ty-bg-primary {
    background-color: var(--ty-bg-primary);
  }

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

/* Large screens and up */
@media (min-width: 1024px) {
  .lg\:ty-bg {
    background-color: var(--ty-bg);
  }

  .lg\:ty-bg-primary {
    background-color: var(--ty-bg-primary);
  }

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