/* ───────────────────────────────────────────────────────────── * forge-three Builder — forge component tokens + app theme * Dark by default (matches in index.php). * ───────────────────────────────────────────────────────────── */ :root { /* base palette */ --bg: #0d0d16; --surface: #12121f; --surface-elevated: #161625; --border: #26263a; --text: #dddddd; --text-muted: #8899aa; --accent: #7ab8ff; --accent-deep: #1f3a5f; --danger: #f66; /* forge aliases */ --color-bg: var(--bg); --color-text: var(--text); --color-text-muted: var(--text-muted); --color-text-secondary: var(--text-muted); --color-text-on-card: var(--text); --color-surface-card: var(--surface); --color-surface-input: var(--surface); --color-surface-elevated: var(--surface-elevated); --color_text_light: var(--text); --color_text_dark: var(--bg); --border-color: var(--border); --panel-bg: var(--surface); --panel-bg-secondary: var(--surface-elevated); --color-accent: var(--accent); --color_primary: var(--accent); --color-primary: var(--accent); --accent-color: var(--accent); --color-btn-bg: var(--accent-deep); --color-btn-text: #cde7ff; /* forge component tokens (used components: button, loader, popup, toast, tabs, auth-transitive) */ --forge-button-bg: var(--color-btn-bg); --forge-button-hover-bg: #2c5480; --forge-button-text: var(--color-btn-text); --forge-button-hover-glow: 0 0 12px rgba(122, 184, 255, 0.25); --forge-loader-color: var(--accent); --forge-loader-track: var(--surface-elevated); --forge-loader-text: var(--text-muted); --forge-search-height: 2.5rem; --form_input_background_color: var(--surface-elevated); --form_input_border_color: var(--border); --form_input_color: var(--text); --forge-popup-bg: var(--surface); --forge-popup-heading-bg: var(--surface-elevated); --forge-toast-success: #2e7d5b; --forge-auth-card-bg: var(--surface); --forge-auth-card-border: var(--border); --forge-auth-link-hover-opacity: 0.8; --forge-auth-title-color: var(--text); --forge-auth-canvas-bg: var(--bg); --color_menu_background: var(--surface); --color_menu_btn: var(--accent); --forge-option-selected-bg: var(--accent-deep); --forge-option-selected-text: #cde7ff; --forge-option-hover-text: var(--text); --forge-checkbox-border: var(--border); --forge-checkbox-checked-bg: var(--accent-deep); --forge-checkbox-checked-text: #cde7ff; --forge-toggle-checked-bg: var(--accent-deep); --forge-toggle-slider-bg: var(--surface-elevated); --forge-toggle-unchecked-bg: var(--surface-elevated); --forge-tabs-active-bg: var(--accent-deep); --forge-tabs-active-text: #cde7ff; /* spacing / radius scale (rem) */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; } body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; font-size: 0.875rem; }