/** * CoreTalent Design Tokens v1.0 * Centralized CSS custom properties for the entire application. * * USAGE: This file is @imported at the top of global.css. * All tokens are available via var(--ct-*) in any CSS file. * * NOTE: Regra 14 — CSS var() is PROHIBITED in JS inline styles. * Always use hex literals (#RRGGBB) in JavaScript. */ :root { /* ═══════════════════════════════════════════ COLORS — Brand Palette ═══════════════════════════════════════════ */ /* Primary Accent */ --ct-cyan: #00d1e0; --ct-cyan-hover: #00e0f0; --ct-cyan-dark: #00b8c6; --ct-cyan-glow: rgba(0, 209, 224, 0.4); /* Semantic Status */ --ct-success: #2ecc71; --ct-success-dark: #27ae60; --ct-danger: #e74c3c; --ct-danger-dark: #c0392b; --ct-warning: #f0ad4e; --ct-warning-alt: #f39c12; --ct-info: #3498db; /* Extended Palette */ --ct-purple: #9b59b6; --ct-purple-light: #a78bfa; --ct-yellow: #f1c40f; --ct-emerald: #10b981; --ct-gray: #95a5a6; --ct-gray-light: #bdc3c7; /* Application Status Colors (shift_applications terminal states) */ --ct-no-show: #e17055; --ct-sick: #fdcb6e; --ct-replaced: #6c5ce7; --ct-early-departure: #fd79a8; --ct-corrected: #e67e22; /* ═══════════════════════════════════════════ BACKGROUNDS ═══════════════════════════════════════════ */ --ct-bg-deep: #001014; --ct-bg-main: #001a1f; --ct-bg-sidebar: #012A32; --ct-bg-dark: #0a0a0f; --ct-bg-card: rgba(1, 42, 50, 0.7); --ct-bg-modal: #1a1a2e; /* Glass Surfaces */ --ct-glass-bg: rgba(255, 255, 255, 0.03); --ct-glass-bg-hover: rgba(255, 255, 255, 0.05); --ct-glass-bg-active: rgba(255, 255, 255, 0.08); /* ═══════════════════════════════════════════ TEXT ═══════════════════════════════════════════ */ --ct-text-primary: #ffffff; --ct-text-secondary: rgba(255, 255, 255, 0.6); --ct-text-muted: rgba(255, 255, 255, 0.4); --ct-text-faint: rgba(255, 255, 255, 0.3); /* ═══════════════════════════════════════════ BORDERS ═══════════════════════════════════════════ */ --ct-border: rgba(255, 255, 255, 0.05); --ct-border-light: rgba(255, 255, 255, 0.08); --ct-border-medium: rgba(255, 255, 255, 0.1); --ct-border-strong: rgba(255, 255, 255, 0.2); --ct-border-cyan: rgba(0, 209, 224, 0.15); --ct-border-cyan-focus: rgba(0, 209, 224, 0.3); /* ═══════════════════════════════════════════ STATUS BACKGROUNDS (translucent chips) ═══════════════════════════════════════════ */ --ct-success-bg: rgba(46, 204, 113, 0.12); --ct-success-border: rgba(46, 204, 113, 0.3); --ct-danger-bg: rgba(231, 76, 60, 0.12); --ct-danger-border: rgba(231, 76, 60, 0.3); --ct-warning-bg: rgba(240, 173, 78, 0.12); --ct-warning-border: rgba(240, 173, 78, 0.3); --ct-cyan-bg: rgba(0, 209, 224, 0.12); --ct-cyan-border: rgba(0, 209, 224, 0.3); --ct-purple-bg: rgba(155, 89, 182, 0.15); /* ═══════════════════════════════════════════ TYPOGRAPHY ═══════════════════════════════════════════ */ --ct-font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Font Sizes (rem scale) */ --ct-font-2xs: 0.65rem; /* 10.4px */ --ct-font-xs: 0.75rem; /* 12px */ --ct-font-sm: 0.8rem; /* 12.8px */ --ct-font-base: 0.85rem; /* 13.6px */ --ct-font-md: 0.95rem; /* 15.2px */ --ct-font-lg: 1.1rem; /* 17.6px */ --ct-font-xl: 1.3rem; /* 20.8px */ --ct-font-2xl: 1.5rem; /* 24px */ --ct-font-3xl: 2rem; /* 32px */ /* Font Weights */ --ct-weight-normal: 400; --ct-weight-medium: 500; --ct-weight-bold: 700; --ct-weight-black: 900; /* ═══════════════════════════════════════════ SPACING ═══════════════════════════════════════════ */ --ct-space-2xs: 2px; --ct-space-xs: 4px; --ct-space-sm: 8px; --ct-space-md: 12px; --ct-space-lg: 16px; --ct-space-xl: 20px; --ct-space-2xl: 24px; --ct-space-3xl: 32px; --ct-space-4xl: 40px; /* ═══════════════════════════════════════════ GOLDEN RATIO SPACING (φ = 1.618) Scale: each step = previous × 1.618 ═══════════════════════════════════════════ */ --ct-phi-3xs: 5px; /* 8 ÷ 1.618 */ --ct-phi-2xs: 8px; /* base */ --ct-phi-xs: 13px; /* 8 × 1.618 */ --ct-phi-sm: 21px; /* 13 × 1.618 */ --ct-phi-md: 34px; /* 21 × 1.618 */ --ct-phi-lg: 55px; /* 34 × 1.618 */ /* ═══════════════════════════════════════════ BORDER RADIUS ═══════════════════════════════════════════ */ --ct-radius-xs: 4px; --ct-radius-sm: 6px; --ct-radius-btn: 8px; /* UI Standard: 6-8px for ALL buttons */ --ct-radius-md: 8px; --ct-radius-lg: 12px; --ct-radius-xl: 16px; --ct-radius-2xl: 20px; --ct-radius-card: 20px; /* Standard: cards, modals, panels */ --ct-radius-pill: 50px; --ct-radius-circle: 50%; /* ═══════════════════════════════════════════ SHADOWS ═══════════════════════════════════════════ */ --ct-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --ct-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --ct-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4); --ct-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5); --ct-shadow-glow: 0 0 20px rgba(0, 209, 224, 0.15); --ct-shadow-glow-strong: 0 0 30px rgba(0, 209, 224, 0.25); /* ═══════════════════════════════════════════ GLASS (Glassmorphism System) ═══════════════════════════════════════════ */ --ct-glass-blur: blur(10px); --ct-glass-blur-strong: blur(15px); --ct-glass-card: rgba(0, 20, 25, 0.7); --ct-glass-card-border: rgba(0, 209, 224, 0.15); --ct-glass-card-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 209, 224, 0.02); --ct-glass-modal: linear-gradient(165deg, rgba(2, 30, 35, 0.98), rgba(0, 15, 18, 1)); --ct-glass-overlay: rgba(0, 8, 10, 0.85); /* ═══════════════════════════════════════════ TRANSITIONS ═══════════════════════════════════════════ */ --ct-transition-fast: 0.2s ease; --ct-transition-normal: 0.3s ease; --ct-transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1); --ct-transition-spring: 0.6s cubic-bezier(0.16, 1, 0.3, 1); /* ═══════════════════════════════════════════ BREAKPOINTS (reference only — use in @media) 480px → mobile 768px → tablet 1024px → desktop 1280px → wide ═══════════════════════════════════════════ */ /* ═══════════════════════════════════════════ Z-INDEX SCALE (v6.3 — Visual Audit consolidation) Layering contract (low → high): content → dropdown → sticky → sidebar → header → drawer → console → overlay → modal-backdrop → modal → toast → cropper ═══════════════════════════════════════════ */ --ct-z-dropdown: 100; --ct-z-sticky: 500; --ct-z-sidebar: 800; /* .sidebar base (matches existing global.css:163) */ --ct-z-overlay: 900; --ct-z-header: 1100; /* .header-wrapper sticky — above sidebar, below drawers */ --ct-z-drawer: 1050; /* right-edge tabs (.ct-fs-tab), slide-outs */ --ct-z-console: 1080; /* floating consoles (bulk bars, deploy console) */ --ct-z-modal-backdrop: 9000; --ct-z-modal: 9001; --ct-z-toast: 9999; --ct-z-cropper: 10050; /* image cropper — ABOVE toast (was 2147483647 !important) */ }