/* * KTech Theme - Design Tokens * * The --theme-* custom properties below are FALLBACKS only. The real * values are injected at runtime by theme_render_css_vars() (core, * config.inc.php), which is echoed in AFTER this stylesheet - * so any admin-configured Theme Customizer color/font/radius/shadow * always wins. Never hardcode a color where a --theme-* var applies. * * --kt-* tokens are theme-owned extensions with no customizer * equivalent (gradients, glass surfaces, supporting grays, motion * timing) - free to design without breaking customizer compatibility. */ :root { /* Core customizer-driven tokens (fallbacks) */ --theme-primary: #a8102b; --theme-secondary: #12131a; --theme-header-bg: #ffffff; --theme-footer-bg: #14151b; --theme-text: #383a40; --theme-link: #a8102b; --theme-button: #a8102b; --theme-heading-font: 'Poppins', sans-serif; --theme-body-font: 'Inter', sans-serif; --theme-topbar-bg: #0c0d11; --theme-radius: 0.9rem; --theme-radius-sm: 0.5rem; --theme-shadow: 0 1rem 2.5rem rgba(10, 10, 15, 0.12); --theme-shadow-sm: 0 0.35rem 1rem rgba(10, 10, 15, 0.08); /* Supporting palette (theme-owned) */ --kt-white: #ffffff; --kt-black: #0c0d11; --kt-gray-900: #1b1d24; --kt-gray-700: #4a4d57; --kt-gray-500: #7a7e8a; --kt-gray-200: #e7e8ec; --kt-gray-100: #f4f5f8; --kt-gray-50: #fafafb; /* Red gradient system built from the live primary color */ --kt-primary-rgb: 168, 16, 43; --kt-gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, #6c0a1b 100%); --kt-gradient-dark: linear-gradient(160deg, #17181f 0%, #0a0a0d 100%); --kt-gradient-radial: radial-gradient(circle at 30% 20%, rgba(var(--kt-primary-rgb), 0.35), transparent 60%); /* Glassmorphism surfaces */ --kt-glass-bg: rgba(255, 255, 255, 0.72); --kt-glass-bg-dark: rgba(12, 13, 17, 0.6); --kt-glass-border: rgba(255, 255, 255, 0.35); --kt-glass-blur: saturate(180%) blur(18px); /* Elevation */ --kt-shadow-lg: 0 1.5rem 3.5rem rgba(10, 10, 15, 0.18); --kt-shadow-glow: 0 0.75rem 2rem rgba(var(--kt-primary-rgb), 0.28); /* Radii derived from customizer radius */ --kt-radius-lg: calc(var(--theme-radius) * 1.6); --kt-radius-pill: 999px; /* Motion */ --kt-ease: cubic-bezier(0.16, 1, 0.3, 1); --kt-transition: all 0.25s var(--kt-ease); --kt-transition-slow: all 0.5s var(--kt-ease); /* Layout */ --kt-header-h: 84px; --kt-header-h-sm: 64px; --kt-container-pad: clamp(1rem, 4vw, 2.5rem); } @media (prefers-reduced-motion: reduce) { :root { --kt-transition: none; --kt-transition-slow: none; } }