/* ========================================================= TV12 THEME — IRON --------------------------------------------------------- Visual theme only. This file contains: - colors - gradients - shadows - radii - glow effects Layout and component styling belongs in app.css or page-specific CSS files. ========================================================= */ /* ========================================================= BACKGROUNDS ========================================================= */ :root { --theme-bg: #070b0f; --theme-bg-secondary: #0d1318; --theme-panel: #111a20; --theme-panel-secondary: #162129; --theme-input: #0d1318; --theme-input-focus: #101a20; --theme-grid: #090f14; } /* ========================================================= BORDERS ========================================================= */ :root { --theme-border: #26343d; --theme-border-light: #354650; --theme-border-strong: #465963; } /* ========================================================= TEXT ========================================================= */ :root { --theme-text: #e9f1f5; --theme-text-secondary: #a9b8c0; --theme-text-muted: #71828c; --theme-text-disabled: #4f5d64; --theme-text-placeholder: #586a75; } /* ========================================================= PRIMARY / REACTOR ========================================================= */ :root { --theme-primary: #00d9ff; --theme-primary-hover: #33e1ff; --theme-primary-dark: #00a9c7; --theme-primary-soft: rgba(0, 217, 255, 0.15); --theme-primary-glow: rgba(0, 217, 255, 0.35); } /* ========================================================= SUCCESS ========================================================= */ :root { --theme-success: #63d99a; --theme-success-hover: #8ce8b4; --theme-success-soft: rgba(99, 217, 154, 0.15); --theme-success-glow: rgba(99, 217, 154, 0.25); } /* ========================================================= WARNING / AMBER ========================================================= */ :root { --theme-warning: #ff9d2e; --theme-warning-hover: #ffb04d; --theme-warning-soft: rgba(255, 157, 46, 0.15); --theme-warning-glow: rgba(255, 157, 46, 0.25); } /* ========================================================= DANGER ========================================================= */ :root { --theme-danger: #920606; --theme-danger-hover: #730505; --theme-danger-soft: rgba(146, 6, 6, 0.15); --theme-danger-glow: rgba(146, 6, 6, 0.25); --theme-danger-border: #8b2c2c; --theme-danger-border-hover: #b84a50; } /* ========================================================= INFO ========================================================= */ :root { --theme-info: #8ddceb; --theme-info-hover: #a8e7f2; --theme-info-soft: rgba(0, 217, 255, 0.08); } /* ========================================================= PROGRAM TYPES ========================================================= */ :root { --theme-file: #8ddceb; --theme-file-soft: rgba(0, 217, 255, 0.08); --theme-file-border: rgba(0, 217, 255, 0.25); --theme-hybrid: #a4cbd5; --theme-hybrid-soft: rgba(80, 160, 190, 0.10); --theme-hybrid-border: rgba(80, 160, 190, 0.28); --theme-live: #ff9da3; --theme-live-soft: rgba(239, 91, 99, 0.10); --theme-live-border: rgba(239, 91, 99, 0.35); --theme-virtual: #c2b3ee; --theme-virtual-soft: rgba(130, 100, 200, 0.10); --theme-virtual-border: rgba(130, 100, 200, 0.30); } /* ========================================================= BUTTONS ========================================================= */ :root { --theme-gradient-button: linear-gradient( 180deg, #1b2a33, #10181d ); --theme-gradient-button-hover: linear-gradient( 180deg, #172d38, #0c171d ); --theme-gradient-primary: linear-gradient( 180deg, #1b4a57, #10313a ); --theme-gradient-primary-hover: linear-gradient( 180deg, #216273, #12404c ); --theme-gradient-danger: linear-gradient( 180deg, #4a1619, #280c0e ); --theme-gradient-danger-hover: linear-gradient( 180deg, #701d21, #3c0d10 ); } /* ========================================================= COMPONENT GRADIENTS ========================================================= */ :root { --theme-gradient-page: radial-gradient( circle at 50% 0%, #16242d 0%, #070b0f 55% ); --theme-gradient-topbar: linear-gradient( 180deg, #111a20, #0d1318 ); --theme-gradient-sidebar: linear-gradient( 180deg, #111a20, #090e13 ); --theme-gradient-panel: linear-gradient( 145deg, rgba(17, 26, 32, 0.98), rgba(8, 12, 15, 0.98) ); --theme-gradient-stat: linear-gradient( 145deg, rgba(22, 33, 41, 0.96), rgba(10, 15, 19, 0.98) ); --theme-gradient-modal: linear-gradient( 145deg, rgba(22, 33, 41, 0.99), rgba(8, 12, 15, 0.99) ); --theme-gradient-table-header: linear-gradient( 180deg, #17232c, #10181e ); --theme-gradient-time-ruler: linear-gradient( 180deg, #121c24, #0b1117 ); } /* ========================================================= SHADOWS ========================================================= */ :root { --theme-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.45); --theme-shadow-button: 0 4px 12px rgba(0, 0, 0, 0.30); --theme-shadow-topbar: 0 4px 18px rgba(0, 0, 0, 0.45); --theme-shadow-sidebar: 8px 0 30px rgba(0, 0, 0, 0.35); --theme-shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.65); --theme-shadow-glow: 0 0 12px var(--theme-primary-glow); } /* ========================================================= EFFECTS ========================================================= */ :root { --theme-card-radius: 10px; --theme-button-radius: 5px; --theme-badge-radius: 4px; --theme-highlight-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035); --theme-input-focus-ring: 0 0 0 2px rgba(0, 217, 255, 0.10), 0 0 8px rgba(0, 217, 255, 0.12); --theme-accent-glow: 0 0 8px rgba(0, 217, 255, 0.20); } /* ========================================================= STATUS ========================================================= */ :root { --theme-status-active: var(--theme-success); --theme-status-passive: var(--theme-text-muted); --theme-status-pending: var(--theme-warning); --theme-status-error: var(--theme-danger); } /* ========================================================= TABLE / GRID ========================================================= */ :root { --theme-table-row-border: rgba(38, 52, 61, 0.55); --theme-table-row-hover: rgba(0, 217, 255, 0.025); --theme-grid-border: rgba(38, 52, 61, 0.70); } /* ========================================================= SIDEBAR STATES ========================================================= */ :root { --theme-nav-hover: linear-gradient( 90deg, rgba(0, 217, 255, 0.10), rgba(0, 217, 255, 0.025) ); --theme-nav-active: linear-gradient( 90deg, rgba(0, 217, 255, 0.16), rgba(0, 217, 255, 0.035) ); --theme-nav-active-shadow: inset 0 0 18px rgba(0, 217, 255, 0.035); } /* ========================================================= SCROLLBARS ========================================================= */ :root { --theme-scrollbar-track: #080d12; --theme-scrollbar-thumb: #26343d; --theme-scrollbar-thumb-hover: #354650; } /* ========================================================= MISCELLANEOUS ========================================================= */ :root { --theme-overlay: rgba(0, 0, 0, 0.72); --theme-badge-bg: rgba(0, 217, 255, 0.08); --theme-badge-border: rgba(0, 217, 255, 0.25); --theme-error-bg: rgba(146, 6, 6, 0.12); --theme-error-border: rgba(180, 55, 55, 0.45); }