/* ========================================================================== Variables-3918405726RCW.css PolisForge Control Center - Complete Design System Color Palette: White + Dark Green Corporate Architecture Zero Dependencies - Pure CSS Custom Properties ========================================================================== */ :root { /* ----------------------------------------------------------------------- CORE COLOR SYSTEM Background: Warm architectural whites Accent: Dark green spectrum ----------------------------------------------------------------------- */ --bg-primary: #f7f5f2; --bg-secondary: #edeae6; --bg-tertiary: #e3dfda; --bg-elevated: #ffffff; --bg-surface: #f0ede9; --text-primary: #1a2e22; --text-secondary: #5a6e62; --text-tertiary: #8a9a92; --text-inverse: #f7f5f2; /* Dark Green Accent Spectrum */ --accent-primary: #1a4d2e; --accent-secondary: #236b3e; --accent-tertiary: #143d23; --accent-hover: #2d8a4f; --accent-muted: #0e2a18; --accent-glow: rgba(26, 77, 46, 0.4); --accent-glow-strong: rgba(35, 107, 62, 0.6); --accent-glow-subtle: rgba(26, 77, 46, 0.15); /* Glassmorphism Tokens */ --glass-bg: rgba(26, 77, 46, 0.04); --glass-bg-hover: rgba(26, 77, 46, 0.07); --glass-border: rgba(26, 77, 46, 0.12); --glass-border-hover: rgba(26, 77, 46, 0.22); --glass-shadow: rgba(0, 0, 0, 0.08); --glass-blur: 20px; /* Semantic Colors */ --success: #1a7a3e; --success-light: rgba(26, 122, 62, 0.15); --warning: #b8651e; --warning-light: rgba(184, 101, 30, 0.15); --danger: #c42028; --danger-hover: #a01b22; --danger-light: rgba(196, 32, 40, 0.15); --info: #2a6f8e; --info-light: rgba(42, 111, 142, 0.15); /* Department Colors */ --dept-hr: #2a6f8e; --dept-mods: #b8651e; --dept-support: #1a7a3e; --dept-dev: #1a4d2e; /* ----------------------------------------------------------------------- TYPOGRAPHY SYSTEM Primary: Playfair Display (headings, display text) Body: Georgia (body copy, UI text) ----------------------------------------------------------------------- */ --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: Georgia, 'Palatino Linotype', 'Book Antiqua', serif; --font-mono: 'Courier New', Courier, monospace; /* Fluid Typography Scale - clamp(min, preferred, max) */ --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem); --text-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.925rem); --text-base: clamp(0.925rem, 0.85rem + 0.4vw, 1.1rem); --text-lg: clamp(1.15rem, 0.95rem + 1vw, 1.6rem); --text-xl: clamp(1.4rem, 1rem + 2vw, 2.3rem); --text-2xl: clamp(1.8rem, 1rem + 4vw, 3.5rem); --text-3xl: clamp(2.4rem, 1.2rem + 6vw, 5rem); --text-hero: clamp(3rem, 1rem + 10vw, 8.5rem); /* Letter Spacing */ --tracking-tight: -0.03em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.12em; --tracking-widest: 0.2em; /* Line Heights */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.75; /* ----------------------------------------------------------------------- FLUID SPACING SCALE ----------------------------------------------------------------------- */ --space-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem); --space-sm: clamp(0.5rem, 0.4rem + 0.5vw, 1rem); --space-md: clamp(1rem, 0.8rem + 1vw, 2rem); --space-lg: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); --space-xl: clamp(2.5rem, 1.5rem + 5vw, 6rem); --space-2xl: clamp(4rem, 2.5rem + 7.5vw, 10rem); /* ----------------------------------------------------------------------- EASING CURVES Organic, physics-inspired motion ----------------------------------------------------------------------- */ /* Smooth Easings */ --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-snappy: cubic-bezier(0.2, 0.0, 0.0, 1); --ease-bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Dramatic Easings */ --ease-anticipate: cubic-bezier(0.68, -0.6, 0.32, 1.6); --ease-overshoot: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-whiplash: cubic-bezier(0.9, 0, 0.1, 1); /* Physics Easings */ --ease-gravity: cubic-bezier(0.55, 0.055, 0.675, 0.19); --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); /* ----------------------------------------------------------------------- TIMING SCALE ----------------------------------------------------------------------- */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-normal: 350ms; --duration-slow: 500ms; --duration-dramatic: 1000ms; --duration-cinematic: 1500ms; /* ----------------------------------------------------------------------- LAYERED SHADOWS 3-4 layers per level, varying opacity for depth ----------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.05), 0 12px 32px rgba(0, 0, 0, 0.04), 0 0 8px rgba(26, 77, 46, 0.06); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.06), 0 24px 56px rgba(0, 0, 0, 0.05), 0 0 16px rgba(26, 77, 46, 0.08); --shadow-glow: 0 0 12px rgba(26, 77, 46, 0.3), 0 0 24px rgba(26, 77, 46, 0.15), 0 0 48px rgba(26, 77, 46, 0.08); --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 2px 8px rgba(0, 0, 0, 0.2); /* ----------------------------------------------------------------------- ORGANIC BORDER RADIUS Asymmetric, blob-like shapes ----------------------------------------------------------------------- */ --radius-organic-1: 63% 37% 54% 46% / 55% 48% 52% 45%; --radius-organic-2: 42% 58% 37% 63% / 48% 62% 38% 52%; --radius-organic-3: 55% 45% 60% 40% / 42% 58% 42% 58%; --radius-organic-4: 38% 62% 45% 55% / 60% 40% 55% 45%; /* Subtle organic for UI elements */ --radius-panel: 14px 18px 16px 20px; --radius-button: 26px 22px 28px 24px; --radius-input: 6px 10px 8px 12px; --radius-badge: 18px 14px 16px 20px; --radius-card: 20px 16px 22px 18px; /* ----------------------------------------------------------------------- Z-INDEX SCALE ----------------------------------------------------------------------- */ --z-canvas: 0; --z-content: 1; --z-header: 100; --z-dropdown: 200; --z-modal-overlay: 1000; --z-modal: 1010; --z-toast: 2000; --z-cursor: 9999; /* ----------------------------------------------------------------------- TRANSITIONS Pre-composed transition shorthand ----------------------------------------------------------------------- */ --transition-fast: all var(--duration-fast) var(--ease-smooth); --transition-normal: all var(--duration-normal) var(--ease-smooth); --transition-slow: all var(--duration-slow) var(--ease-smooth); --transition-color: color var(--duration-fast) var(--ease-smooth), background-color var(--duration-fast) var(--ease-smooth), border-color var(--duration-fast) var(--ease-smooth); }