/* * theme.css — Corpus Write design tokens (single source of truth). * * Two themes are stored here. LIGHT is the default (applies with no attribute). * To switch later, set — a toggle just flips that * attribute; nothing else needs to change once components use these var()s. * * Near-duplicate colours from across the app have been consolidated into the * semantic tokens below (see the migration note at the bottom). */ :root { /* ---- surfaces ---- */ --bg: #FFFFFF; /* page background */ --surface: #F5F5F5; /* panels, cards, sections (light grey) */ --surface-alt: #E9E9E9; /* insets, map placeholder, hover fills */ /* ---- text ---- */ --text: #000000; /* primary text, dividers */ --text-secondary:#333333; /* body / editorial text */ --text-muted: #666666; /* labels, captions, disabled */ /* ---- lines ---- */ --border: #BEBEBE; /* borders, hairlines, inactive outlines */ --border-strong: #000000; /* the dotted/dashed nav rules */ /* ---- accents (theme-independent) ---- */ --accent: #3553BC; /* city / brand blue (per-city override) */ --on-accent: #FFFFFF; /* text on accent / dark buttons */ --danger: #DC2626; /* delete / error (was #FF0000 #E23B3B …)*/ --success: #2EA84F; /* confirm / valid (was #4CAF50 …) */ --warning: #FBBF24; /* warnings (was #E2A23B …) */ /* ---- effects (frosted floating panels) ---- */ --panel-bg: rgba(245,245,245,0.55); --panel-blur: blur(22px) saturate(180%); --panel-shadow: 0 6px 24px rgba(0,0,0,0.28); --panel-hairline:1px solid rgba(255,255,255,0.35); /* veil used to dim/hide inactive items (project cards, etc.) */ --overlay: rgba(245,245,245,0.72); --font-sans: 'Manrope', sans-serif; --font-serif: 'Merriweather', serif; } /* ---- DARK theme (kept for a future toggle) ---- */ :root[data-theme="dark"] { --bg: #1A1A1A; --surface: #262626; --surface-alt: #2A2A2A; --text: #F5F5F5; --text-secondary:#CCCCCC; --text-muted: #9A9A9A; --border: #5E5E5E; --border-strong: #F5F5F5; --accent: #3553BC; --on-accent: #FFFFFF; --danger: #E23B3B; --success: #2EA84F; --warning: #FBBF24; --panel-bg: rgba(38,38,38,0.62); --panel-shadow: 0 6px 24px rgba(0,0,0,0.45); --panel-hairline:1px solid rgba(255,255,255,0.10); --overlay: rgba(26,26,26,0.62); } /* * CONSOLIDATION (old → token): * #FFF #FFFFFF .............................. --bg / --on-accent * #F5F5F5 ................................... --surface * #E9E9E9 #DDD #D1D5DB #CCC ................. --surface-alt * #000 #000000 ............................. --text / --border-strong * #333 #333333 ............................. --text-secondary * TEXT grey → #666 #666666 #888 #999 #9A9A9A #A9A9A9 ... --text-muted * LINE grey → #5E5E5E #BEBEBE ............................ --border * (these two stay SEPARATE — #5E5E5E is borders/bg, the #8xx/#9xx are text) * #3553BC .................................. --accent * #FF0000 #DC2626 #E23B3B #DC3545 #BE1010 #B91C1C #7F1D1D .. --danger * #4CAF50 #2EA84F .......................... --success * #FBBF24 #E2A23B .......................... --warning */ /* ========================================================================= * REUSABLE COMPONENT STYLES (the "remember this style" patterns) * ========================================================================= */ /* Dashed "+" add button — used for every add affordance across the app */ .corpus-add { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--border); background: transparent; color: var(--text-muted); font-family: var(--font-sans); font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; } .corpus-add:hover { border-color: var(--text); color: var(--text); } /* Segmented toggle (Draw/Pick/Edit · Basic/Detailed · …): sliding black pill */ .corpus-toggle { position: relative; display: inline-flex; padding: 4px; background: rgba(255,255,255,0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 4px 16px rgba(0,0,0,0.25); } .corpus-toggle > .seg { position: relative; z-index: 1; text-align: center; cursor: pointer; padding: 5px 16px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--text-muted); transition: color .2s; } .corpus-toggle > .seg.active { color: #fff; } .corpus-toggle > .pill { position: absolute; top: 4px; bottom: 4px; z-index: 0; background: #000; transition: left .3s cubic-bezier(.34,1.45,.6,1); } /* Frosted floating window — near-clear white + heavy blur (panels, popovers) */ .corpus-frost { background: rgba(255,255,255,0.50); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,0.40); box-shadow: 0 6px 24px rgba(0,0,0,0.22); } /* Dashed-line slider: 4px black dashes (4,4), black 10×10 square thumb */ .corpus-range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; background: transparent; cursor: pointer; } .corpus-range::-webkit-slider-runnable-track { height: 2px; border: none; background: #000; } .corpus-range::-moz-range-track { height: 2px; border: none; background: #000; } .corpus-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 10px; background: #000; border: none; border-radius: 50%; margin-top: -4px; } .corpus-range::-moz-range-thumb { width: 10px; height: 10px; background: #000; border: none; border-radius: 50%; } /* White-filled SVG icons (Chevron.svg etc.) → recolour per theme without editing the asset */ img[src*="Chevron.svg"] { filter: brightness(0); } /* light: black */ :root[data-theme="dark"] img[src*="Chevron.svg"] { filter: brightness(0) invert(1); } /* dark: white */