/* ============================================================
   THEME UTILITIES - Helper classes for theme-aware styling
   ============================================================
   Use these utility classes in HTML for quick theming without
   writing custom CSS. Follow the naming convention:
   
   .t-{property}-{variant}
   
   Examples:
   - .t-bg-surface-1  → background: var(--surface-1)
   - .t-text-primary  → color: var(--text-primary)
   - .t-border        → border-color: var(--border-default)
   ============================================================ */

/* ============================================================
   BACKGROUND UTILITIES
   ============================================================ */
.t-bg-surface-1 { background-color: var(--surface-1) !important; }
.t-bg-surface-2 { background-color: var(--surface-2) !important; }
.t-bg-surface-3 { background-color: var(--surface-3) !important; }
.t-bg-surface-4 { background-color: var(--surface-4) !important; }
.t-bg-surface-5 { background-color: var(--surface-5) !important; }
.t-bg-surface-6 { background-color: var(--surface-6) !important; }
.t-bg-surface-7 { background-color: var(--surface-7) !important; }
.t-bg-surface-8 { background-color: var(--surface-8) !important; }
.t-bg-surface-inset { background-color: var(--surface-inset) !important; }
.t-bg-surface-modal { background-color: var(--surface-modal) !important; }
.t-bg-surface-elevated { background-color: var(--surface-elevated) !important; }

.t-bg-primary { background-color: var(--color-primary) !important; }
.t-bg-primary-subtle { background-color: var(--color-primary-subtle) !important; }
.t-bg-success { background-color: var(--color-success-bg) !important; }
.t-bg-danger { background-color: var(--color-danger-bg) !important; }
.t-bg-warning { background-color: var(--color-warning-bg) !important; }
.t-bg-info { background-color: var(--color-info-bg) !important; }

.t-bg-card { background-color: var(--card-bg) !important; }
.t-bg-panel { background-color: var(--panel-bg) !important; }
.t-bg-input { background-color: var(--input-bg) !important; }
.t-bg-nav { background-color: var(--nav-bg) !important; }
.t-bg-modal { background-color: var(--modal-bg) !important; }
.t-bg-overlay { background-color: var(--overlay-bg) !important; }
.t-bg-tooltip { background-color: var(--tooltip-bg) !important; }
.t-bg-popover { background-color: var(--popover-bg) !important; }

/* ============================================================
   TEXT COLOR UTILITIES
   ============================================================ */
.t-text-primary { color: var(--text-primary) !important; }
.t-text-secondary { color: var(--text-secondary) !important; }
.t-text-tertiary { color: var(--text-tertiary) !important; }
.t-text-quaternary { color: var(--text-quaternary) !important; }
.t-text-muted { color: var(--text-muted) !important; }
.t-text-disabled { color: var(--text-disabled) !important; }
.t-text-inverse { color: var(--text-inverse) !important; }
.t-text-on-primary { color: var(--text-on-primary) !important; }
.t-text-light-gray { color: var(--text-light-gray) !important; }
.t-text-subheader { color: var(--text-subheader) !important; }

.t-text-success { color: var(--color-success) !important; }
.t-text-danger { color: var(--color-danger) !important; }
.t-text-error { color: var(--color-error) !important; }
.t-text-warning { color: var(--color-warning) !important; }
.t-text-info { color: var(--color-info) !important; }
.t-text-buy { color: var(--color-buy) !important; }
.t-text-sell { color: var(--color-sell) !important; }
.t-text-accent { color: var(--color-primary) !important; }
.t-text-bullish { color: var(--color-bullish) !important; }
.t-text-bearish { color: var(--color-bearish) !important; }
.t-text-neutral { color: var(--color-neutral) !important; }
.t-text-teal { color: var(--color-accent-teal) !important; }

/* ============================================================
   BORDER UTILITIES
   ============================================================ */
.t-border { border-color: var(--border-default) !important; }
.t-border-subtle { border-color: var(--border-subtle) !important; }
.t-border-input { border-color: var(--border-input) !important; }
.t-border-hover { border-color: var(--border-hover) !important; }
.t-border-focus { border-color: var(--border-focus) !important; }
.t-border-strong { border-color: var(--border-strong) !important; }
.t-border-grid { border-color: var(--border-grid) !important; }
.t-border-error { border-color: var(--color-error-border) !important; }
.t-border-top { border-top: 1px solid var(--border-default) !important; }
.t-border-bottom { border-bottom: 1px solid var(--border-default) !important; }
.t-border-left { border-left: 1px solid var(--border-default) !important; }
.t-border-right { border-right: 1px solid var(--border-default) !important; }
.t-border-top-subtle { border-top: 1px solid var(--border-subtle) !important; }
.t-border-bottom-subtle { border-bottom: 1px solid var(--border-subtle) !important; }

/* ============================================================
   SHADOW UTILITIES
   ============================================================ */
.t-shadow-xs { box-shadow: var(--shadow-xs) !important; }
.t-shadow-sm { box-shadow: var(--shadow-sm) !important; }
.t-shadow-md { box-shadow: var(--shadow-md) !important; }
.t-shadow-lg { box-shadow: var(--shadow-lg) !important; }
.t-shadow-xl { box-shadow: var(--shadow-xl) !important; }
.t-shadow-2xl { box-shadow: var(--shadow-2xl) !important; }
.t-shadow-card { box-shadow: var(--shadow-card) !important; }
.t-shadow-modal { box-shadow: var(--shadow-modal) !important; }
.t-shadow-dropdown { box-shadow: var(--shadow-dropdown) !important; }
.t-shadow-none { box-shadow: none !important; }

/* ============================================================
   GRADIENT UTILITIES
   ============================================================ */
.t-gradient-nav { background: var(--gradient-nav) !important; }
.t-gradient-section { background: var(--gradient-header) !important; }
.t-gradient-divider { background: var(--gradient-headers-bg) !important; }
.t-gradient-menu { background: var(--gradient-menu) !important; }
.t-gradient-subtle { background: var(--gradient-subtle) !important; }

/* ============================================================
   TRADING-SPECIFIC UTILITIES
   ============================================================ */
.t-buy { color: var(--color-buy) !important; }
.t-sell { color: var(--color-sell) !important; }
.t-buy-bg { background-color: var(--color-buy-bg) !important; }
.t-sell-bg { background-color: var(--color-sell-bg) !important; }
.t-buy-solid-bg { background-color: var(--color-buy) !important; }
.t-sell-solid-bg { background-color: var(--color-sell) !important; }
.t-profit { color: var(--color-success) !important; }
.t-loss { color: var(--color-danger) !important; }
.t-bullish { color: var(--color-bullish) !important; }
.t-bearish { color: var(--color-bearish) !important; }
.t-neutral { color: var(--color-neutral) !important; }

/* ============================================================
   BADGE UTILITIES
   ============================================================ */
.t-badge-success { background-color: var(--badge-success-bg); color: var(--badge-success-text); }
.t-badge-danger { background-color: var(--badge-danger-bg); color: var(--badge-danger-text); }
.t-badge-warning { background-color: var(--badge-warning-bg); color: var(--badge-warning-text); }
.t-badge-info { background-color: var(--badge-info-bg); color: var(--badge-info-text); }
.t-badge-neutral { background-color: var(--badge-neutral-bg); color: var(--badge-neutral-text); }

/* ============================================================
   CHART/DATA VISUALIZATION UTILITIES
   ============================================================ */
.t-chart-bg { background-color: var(--chart-bg) !important; }
.t-chart-label { color: var(--chart-label) !important; }

/* ============================================================
   LOADING/SKELETON UTILITIES
   ============================================================ */
.t-skeleton { background-color: var(--skeleton-base) !important; }

/* ============================================================
   VISIBILITY UTILITIES (Theme-specific show/hide)
   ============================================================ */
.t-dark-only { display: block; }
.t-light-only { display: none; }

[data-theme="light"] .t-dark-only { display: none; }
[data-theme="light"] .t-light-only { display: block; }

/* Inline variants */
.t-dark-only-inline { display: inline; }
.t-light-only-inline { display: none; }

[data-theme="light"] .t-dark-only-inline { display: none; }
[data-theme="light"] .t-light-only-inline { display: inline; }

/* Flex variants */
.t-dark-only-flex { display: flex; }
.t-light-only-flex { display: none; }

[data-theme="light"] .t-dark-only-flex { display: none; }
[data-theme="light"] .t-light-only-flex { display: flex; }