/* * PrecisionLaw Color Palettes * Global CSS color system using CSS custom properties * * To change palettes, update the :root selector to use a different palette class */ /* ========================================== PALETTE DEFINITIONS ========================================== */ /* 1. The Digital Blueprint (Modern & Tech) */ .palette-digital-blueprint { --color-primary: #002082; /* Deep Space Blue - Base/Background */ --color-secondary: #3057E1; /* Bright Luminous Blue - Primary Line Work */ --color-accent: #00F7FF; /* Electric Cyan - Accent/Highlight */ --color-text: #E5F3FD; /* Tech White/Grey - Annotation/Text */ --color-neutral: #B6B6B6; /* Material Grey - Structural Components */ } /* 2. Modern Architectural (Neutral & Sophisticated) */ .palette-modern-architectural { --color-primary: #1A2E49; /* Space Cadet Blue - Deep Blue */ --color-secondary: #549DAE; /* Cadet Blue - Desaturated Blue-Green */ --color-accent: #6B609E; /* Deep Blue-Gray - Shadow/Detail */ --color-text: #B6B6B6; /* Philippine Silver - White-Space/Light Gray */ --color-neutral: #F1E6C9; /* Warm Cream - Accent/Notes */ } /* 3. Modern Ink on Paper (High Contrast) */ .palette-modern-ink { --color-primary: #023047; /* Navy Blue - Base */ --color-secondary: #219EBC; /* Azure Blue - Primary Lines */ --color-accent: #8ECAE6; /* Sky Blue - Details */ --color-text: #FFFFFF; /* Clean White - Background */ --color-neutral: #FB8500; /* Punchy Orange - Highlighting Key Areas */ } /* 4. Monochromatic Blueprint */ .palette-monochromatic { --color-primary: #293241; /* Midnight Blue */ --color-secondary: #3d5a80; /* Slate Blue */ --color-accent: #98c1d9; /* Medium Blue */ --color-text: #e0fbfc; /* Off-White */ --color-neutral: #ee6c4d; /* Accent Red */ } /* ========================================== ACTIVE PALETTE Change the class here to switch palettes globally ========================================== */ :root { /* Default palette - Change this class to switch palettes */ /* Options: palette-digital-blueprint, palette-modern-architectural, palette-modern-ink, palette-monochromatic */ } /* Apply Digital Blueprint as default */ :root, body { --color-primary: #002082; --color-secondary: #3057E1; --color-accent: #00F7FF; --color-text: #E5F3FD; --color-neutral: #B6B6B6; } /* ========================================== PALETTE UTILITY CLASSES Apply these to specific elements for palette overrides ========================================== */ /* Background colors */ .bg-primary { background-color: var(--color-primary) !important; } .bg-secondary { background-color: var(--color-secondary) !important; } .bg-accent { background-color: var(--color-accent) !important; } .bg-text { background-color: var(--color-text) !important; } .bg-neutral { background-color: var(--color-neutral) !important; } /* Text colors */ .text-primary { color: var(--color-primary) !important; } .text-secondary { color: var(--color-secondary) !important; } .text-accent { color: var(--color-accent) !important; } .text-text { color: var(--color-text) !important; } .text-neutral { color: var(--color-neutral) !important; } /* Border colors */ .border-primary { border-color: var(--color-primary) !important; } .border-secondary { border-color: var(--color-secondary) !important; } .border-accent { border-color: var(--color-accent) !important; } .border-text { border-color: var(--color-text) !important; } .border-neutral { border-color: var(--color-neutral) !important; } /* ========================================== USAGE EXAMPLES ========================================== */ /* To use in your CSS: background-color: var(--color-primary); color: var(--color-text); border: 2px solid var(--color-accent); To switch palettes globally: 1. Change the CSS variables in the :root selector above 2. Or add a class to the body tag: To test different palettes: - Add class="palette-digital-blueprint" to body - Add class="palette-modern-architectural" to body - Add class="palette-modern-ink" to body - Add class="palette-monochromatic" to body */