/* ============================================================ SHEQ PORTAL โ€” RJ McLeod 00 ยท TOKENS & FOUNDATIONS Engineering & AutoCAD RAG System (Full-Border / High-Vis Spec) ============================================================ */ :root { /* ========================================================== BRAND IDENTITY โ€” RJ McLEOD (Plant Yellow & High Contrast Black) ========================================================== */ --rjm-yellow: #FFCC00; /* Primary Machinery Yellow */ --rjm-yellow-bright: #FFD633; --rjm-yellow-deep: #E5B800; --rjm-yellow-dim: rgba(255, 204, 0, 0.16); --rjm-yellow-border: rgba(255, 204, 0, 0.50); /* "Ink" variants -- for yellow used as flat text (callout numbers, category tags) rather than a border/button/background. Full-bright yellow text reads fine on the dark panels below, but is nearly invisible on the light theme's white cards, so light mode swaps these for a dark gold with real contrast; dark mode keeps the regular brights. */ --rjm-yellow-ink: var(--rjm-yellow); --rjm-yellow-ink-deep: var(--rjm-yellow-deep); --rjm-black: #0A0A0A; --rjm-charcoal: #141619; --rjm-slate: #1E2228; /* ========================================================== ACCENT -- the everyday "selected / primary" colour: active buttons, tabs, badges, primary buttons, highlight lines and hover tints all read these. Default = RJM yellow with black text. Colour schemes (css/24-schemes.css, picked from the cog menu) override them. ========================================================== */ --accent-fill: var(--rjm-yellow); --accent-fill-hover: var(--rjm-yellow-bright); --accent-on-fill: #000000; --accent-line: var(--rjm-yellow); --accent-line-soft: var(--rjm-yellow-border); --accent-dim: var(--rjm-yellow-dim); /* Page title bar (index.html .page-title-badge) */ --title-fill: var(--rjm-yellow); --title-ink: #000000; --title-border: #000000; --title-edge: #000000; --title-edge-w: 1px; /* ========================================================== SURFACES & CONTAINERS (Dark Mode Default) ========================================================== */ --cad-bg: #0B0D0F; /* CAD workspace */ --cad-panel: #13161A; /* Primary card surface */ --cad-subpanel: #1C2026; /* Elevated section / card header */ --cad-hover: #252B35; /* Inverted Surfaces (For headers/navbars that stay black in both themes) */ --surface-inverted: #141619; --text-on-inverted: #FFFFFF; /* Precision Linework */ --cad-border-subtle: #252B35; --cad-border: #363D4A; --cad-border-bold: #555E6F; --cad-line: 2px solid var(--cad-border); --cad-line-heavy: 3px solid var(--cad-border-bold); /* Semantic Typography Colors */ --text-primary: #FFFFFF; --text-secondary: #C5CBD5; --text-muted: #7E8899; --text-inverse: #0A0A0A; /* ========================================================== AUTOCAD RAG REPORTING & LAYER ACCENTS ========================================================== */ --rag-red: #FF2A2A; --rag-red-dim: rgba(255, 42, 42, 0.16); --border-rag-red: 2px solid var(--rag-red); --rag-amber: #FFB700; --rag-amber-dim: rgba(255, 183, 0, 0.18); --border-rag-amber: 2px solid var(--rag-amber); --rag-green: #00E676; --rag-green-dim: rgba(0, 230, 118, 0.16); --border-rag-green: 2px solid var(--rag-green); --cad-cyan: #00E5FF; --cad-cyan-dim: rgba(0, 229, 255, 0.14); --border-cad-cyan: 2px solid var(--cad-cyan); --cad-magenta: #FF3399; --cad-violet: #8B5CF6; --cad-violet-dim: rgba(139, 92, 246, 0.18); --cad-blue: #3B82F6; --cad-blue-dim: rgba(59, 130, 246, 0.16); /* Hatched Warning Patterns */ --hatch-red: repeating-linear-gradient(45deg, var(--rag-red-dim), var(--rag-red-dim) 4px, transparent 4px, transparent 10px); --hatch-amber: repeating-linear-gradient(45deg, var(--rag-amber-dim), var(--rag-amber-dim) 4px, transparent 4px, transparent 10px); --hatch-green: repeating-linear-gradient(45deg, var(--rag-green-dim), var(--rag-green-dim) 4px, transparent 4px, transparent 10px); --hatch-yellow: repeating-linear-gradient(45deg, var(--rjm-yellow-dim), var(--rjm-yellow-dim) 4px, transparent 4px, transparent 10px); /* ========================================================== TYPOGRAPHY & GEOMETRY ========================================================== */ --font-display: 'Segoe UI Semibold', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-mono: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --radius-none: 0px; --radius-xs: 1px; --radius-sm: 2px; --radius-md: 4px; --radius-pill: 999px; --topnav-h: 64px; --sidebar-w: 260px; /* Elevation (CAD HUD Linework) */ --shadow-hud: 0 4px 0px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--cad-border); --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.9), 0 0 0 2px var(--accent-line); /* Legacy Aliases (Strict True-Value Mappings) */ --c-black: #000000; --c-white: #FFFFFF; --c-yellow: var(--rjm-yellow); --c-yellow-dim: var(--rjm-yellow-dim); --status-red: var(--rag-red); --status-amber: var(--rag-amber); --status-green: var(--rag-green); --status-info: var(--cad-cyan); } /* ============================================================ LIGHT THEME โ€” "SITE DRAWING / HARD-HAT SPEC" ============================================================ */ [data-theme="light"] { /* Surfaces */ --cad-bg: #E9ECEF; /* Engineering drafting sheet */ --cad-panel: #FFFFFF; /* White card surface */ --cad-subpanel: #DEE2E6; /* Light structural header / contrast zone */ --cad-hover: #CED4DA; /* Inverted Surfaces (Black accents remain black on light) */ --surface-inverted: #141619; --text-on-inverted: #FFFFFF; /* High-Contrast Linework */ --cad-border-subtle: #ADB5BD; --cad-border: #141619; /* Solid structural ink line */ --cad-border-bold: #000000; /* Typography */ --text-primary: #0D1117; --text-secondary: #2B3036; --text-muted: #555E6F; --text-inverse: #FFFFFF; /* High-Vis Contrast Adjustments for Light Surfaces */ --rjm-yellow-dim: rgba(217, 160, 0, 0.28); /* Boosted for white paper legibility */ --rjm-yellow-ink: #8A6D00; /* Dark gold -- full-bright yellow text is unreadable on white */ --rjm-yellow-ink-deep: #6B5400; --rag-red: #D90429; --rag-red-dim: rgba(217, 4, 41, 0.16); --rag-amber: #F59E0B; /* true amber -- #D97706 read as brown */ --rag-amber-dim: rgba(245, 158, 11, 0.18); --rag-green: #059669; --rag-green-dim: rgba(5, 150, 105, 0.18); --cad-cyan: #0284C7; --cad-cyan-dim: rgba(2, 132, 199, 0.16); --cad-violet: #7C3AED; --cad-violet-dim: rgba(124, 58, 237, 0.16); --cad-blue: #1D4ED8; --cad-blue-dim: rgba(29, 78, 216, 0.16); /* Shadows remain hard-edged; modal framing in the accent line */ --shadow-hud: 0 4px 0px var(--cad-border), 0 0 0 1px var(--cad-border); --shadow-modal: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--accent-line); } /* ============================================================ GLOBAL BASE RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--cad-bg); color: var(--text-primary); font-family: var(--font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }