From 732c10ed3446cf8537e6e018521dfc52a54a181a Mon Sep 17 00:00:00 2001
From: bastiensoret <bastiensoret@gmail.com>
Date: Fri, 20 Mar 2026 14:41:16 +0100
Subject: [PATCH 1/2] style(ui): migrate colors to CSS custom properties and
 improve accessibility

Replace all hardcoded color values with CSS custom properties (--color-* in popup,
--si-* in overlay) for maintainability. Add ARIA attributes (aria-hidden on decorative
SVGs, role="switch" on toggles, aria-label on overlays, aria-expanded on comment toggle).
Animate comment body with max-height transition instead of display:none. Sanitize
postsFlagged display and replace inline style manipulation with CSS classes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .claude/settings.json             |   2 +-
 CHANGELOG.md                      |  14 ++
 CLAUDE.md                         |  34 +++++
 src/content/ui/icons.js           |  28 ++--
 src/content/ui/overlay-manager.js |  13 +-
 src/popup/popup.css               | 169 +++++++++++++++--------
 src/popup/popup.html              |  25 ++--
 src/popup/popup.js                |  10 +-
 static/overlay.css                | 214 +++++++++++++++++-------------
 9 files changed, 324 insertions(+), 185 deletions(-)

diff --git a/.claude/settings.json b/.claude/settings.json
index f27d4bb..854d2bd 100644
--- a/.claude/settings.json
+++ b/.claude/settings.json
@@ -1,7 +1,7 @@
 {
   "permissions": {
     "allow": [
-      "Bash(ls -la c:/Users/BSOR/CascadeProjects/Cesar/*.png c:/Users/BSOR/CascadeProjects/Cesar/static/icons/ c:/Users/BSOR/CascadeProjects/Cesar/store-assets/)"
+
     ]
   }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2725a3c..ffa5860 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -48,6 +48,20 @@ All notable changes to César are documented here.
 - Popup fetches provider names from background instead of hardcoded map
 - Feed scanner replaced `setInterval` polling with MutationObserver-only + debounce
 - Unused imports removed from `build.js`
+- All hardcoded colors migrated to CSS custom properties (`--color-*` in popup, `--si-*` in overlay)
+- SVG icons annotated with `aria-hidden="true"` for screen readers
+- Popup toggles use `role="switch"` for correct ARIA semantics
+- Toggle wrappers changed from `<span>` to `<label>` for proper form association
+- Overlay `aria-label` set per state (analyzing, cleared, severity + confidence)
+- Comment toggle tracks `aria-expanded` state
+- Comment body animates via `max-height` transition instead of `display: none`
+- New `chevron` icon in icon set; inline arrow SVGs replaced with shared icon
+- Popup logo updated to shield-with-checkmark design
+- `postsFlagged` display sanitized with `Number() || 0` to prevent `undefined`
+- Popup save button feedback uses CSS class instead of inline `style.color`
+- Removed unused `.sourceit-explanation` and `.sourceit-reason-cleared` CSS rules
+- Overlay `will-change` removed (was causing unnecessary compositing layers)
+- Color System section added to CLAUDE.md
 
 ## [0.5.4] — 2026-03-15
 
diff --git a/CLAUDE.md b/CLAUDE.md
index 9353de2..5f593f8 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -36,6 +36,40 @@ into IIFE format in `dist/`. Static assets and `debug.js` are copied verbatim.
 - Chrome APIs are mocked in `tests/setup.js`
 - Focus testing on regex patterns and detection scoring logic
 
+## Color System (Dark Theme)
+All colors are managed via CSS custom properties in `popup.css` (prefix `--color-`) and `overlay.css` (prefix `--si-`).
+
+### Backgrounds
+- `#0c0c18` — darkest (popup body)
+- `#13132a` — cards/panels (popup header)
+- `#1a1a2e` → `#16213e` — overlay gradient
+
+### Text
+- `#e8e8ee` — primary
+- `#c0c0d0` — secondary
+- `#d0d0e0` — heading (popup logo, count)
+- `#9a9ab0` — muted (labels, descriptions)
+- `#606078` — tertiary (group labels)
+
+### Accents
+- `#7bc47b` — green (toggle on, success)
+- `#7bed9f` — bright green (overlay confirm, AI badge, copy success)
+- `#ff4757` — red (high severity border)
+- `#ff6b81` — soft red (high severity text, icon)
+- `#ff8a9c` — soft red (popup error text)
+- `#ffa502` — orange (medium severity border, warning)
+- `#ffbe76` — soft orange (medium severity text)
+- `#3742fa` — blue (low severity border)
+- `#AFA9EC` — purple (comment section accent)
+- `#2e7d32` — dark green (cleared overlay border)
+
+### Overlay utility
+- `#747d8c` — muted (dismiss, detail labels)
+- `#a4b0be` — subdued (analyzing text, base button)
+
+### Borders
+- `rgba(255,255,255,0.04)` to `rgba(255,255,255,0.1)` — subtle to strong
+
 ## Style
 - ESLint + Prettier enforced
 - Single quotes, trailing commas, 100 char width
diff --git a/src/content/ui/icons.js b/src/content/ui/icons.js
index 63033e2..3f290c1 100644
--- a/src/content/ui/icons.js
+++ b/src/content/ui/icons.js
@@ -1,21 +1,23 @@
 export const ICONS = {
   shield:
-    '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 1.5L2.5 4v4c0 3.5 2.5 5.5 5.5 7 3-1.5 5.5-3.5 5.5-7V4L8 1.5z"/></svg>',
+    '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M8 1.5L2.5 4v4c0 3.5 2.5 5.5 5.5 7 3-1.5 5.5-3.5 5.5-7V4L8 1.5z"/></svg>',
   alert:
-    '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2L1.5 13.5h13L8 2z"/><path d="M8 6.5v3M8 11.5v.5"/></svg>',
-  cpu: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="8" height="8" rx="1"/><path d="M6 1.5v2M10 1.5v2M6 12.5v2M10 12.5v2M1.5 6h2M1.5 10h2M12.5 6h2M12.5 10h2"/></svg>',
-  lock: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="7" width="10" height="7" rx="1.5"/><path d="M5.5 7V5a2.5 2.5 0 015 0v2"/></svg>',
-  link: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6.5 9.5a3 3 0 004.2.2l1.5-1.5a3 3 0 00-4.2-4.2l-.9.9"/><path d="M9.5 6.5a3 3 0 00-4.2-.2l-1.5 1.5a3 3 0 004.2 4.2l.9-.9"/></svg>',
+    '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M8 2L1.5 13.5h13L8 2z"/><path d="M8 6.5v3M8 11.5v.5"/></svg>',
+  cpu: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="4" y="4" width="8" height="8" rx="1"/><path d="M6 1.5v2M10 1.5v2M6 12.5v2M10 12.5v2M1.5 6h2M1.5 10h2M12.5 6h2M12.5 10h2"/></svg>',
+  lock: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="3" y="7" width="10" height="7" rx="1.5"/><path d="M5.5 7V5a2.5 2.5 0 015 0v2"/></svg>',
+  link: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6.5 9.5a3 3 0 004.2.2l1.5-1.5a3 3 0 00-4.2-4.2l-.9.9"/><path d="M9.5 6.5a3 3 0 00-4.2-.2l-1.5 1.5a3 3 0 004.2 4.2l.9-.9"/></svg>',
   check:
-    '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 8.5l3.5 3.5L13 4"/></svg>',
-  x: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4l8 8M12 4l-8 8"/></svg>',
+    '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M3 8.5l3.5 3.5L13 4"/></svg>',
+  x: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>',
   minus:
-    '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 8h10"/></svg>',
+    '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M3 8h10"/></svg>',
   loader:
-    '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v3M8 11v3M2 8h3M11 8h3" opacity="0.4"/><path d="M4 4l2 2" opacity="0.7"/><path d="M10 10l2 2" opacity="0.7"/></svg>',
-  box: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 5l6-3 6 3v6l-6 3-6-3V5z"/><path d="M2 5l6 3 6-3M8 8v6.5"/></svg>',
-  gate: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 14V4a2 2 0 012-2h8a2 2 0 012 2v10M6 14v-4h4v4M8 6.5v1"/></svg>',
+    '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M8 2v3M8 11v3M2 8h3M11 8h3" opacity="0.4"/><path d="M4 4l2 2" opacity="0.7"/><path d="M10 10l2 2" opacity="0.7"/></svg>',
+  box: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M2 5l6-3 6 3v6l-6 3-6-3V5z"/><path d="M2 5l6 3 6-3M8 8v6.5"/></svg>',
+  gate: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M2 14V4a2 2 0 012-2h8a2 2 0 012 2v10M6 14v-4h4v4M8 6.5v1"/></svg>',
   comment:
-    '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 3h12v8H6l-3 3v-3H2V3z"/></svg>',
-  copy: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="9" height="9" rx="1"/><path d="M5 11H3a1 1 0 01-1-1V3a1 1 0 011-1h7a1 1 0 011 1v2"/></svg>',
+    '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M2 3h12v8H6l-3 3v-3H2V3z"/></svg>',
+  copy: '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><rect x="5" y="5" width="9" height="9" rx="1"/><path d="M5 11H3a1 1 0 01-1-1V3a1 1 0 011-1h7a1 1 0 011 1v2"/></svg>',
+  chevron:
+    '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M4 6l4 4 4-4" stroke-linecap="round" stroke-linejoin="round"/></svg>',
 };
diff --git a/src/content/ui/overlay-manager.js b/src/content/ui/overlay-manager.js
index 23a1910..0e21057 100644
--- a/src/content/ui/overlay-manager.js
+++ b/src/content/ui/overlay-manager.js
@@ -6,6 +6,7 @@ import { escapeHTML } from '../../shared/sanitize.js';
 const POST_CONTENT_SEL = '.feed-shared-update-v2__content';
 
 const SEVERITY_LABELS = { high: 'HIGH', medium: 'MED', low: 'LOW' };
+const SEVERITY_ARIA = { high: 'High severity', medium: 'Medium severity', low: 'Low severity' };
 
 export class OverlayManager {
   /** Remove existing overlays and their event listeners */
@@ -22,6 +23,7 @@ export class OverlayManager {
 
     const overlay = document.createElement('div');
     overlay.className = 'sourceit-overlay sourceit-severity-medium';
+    overlay.setAttribute('aria-label', 'César — analyzing post');
     const ac = new AbortController();
     overlay._abortController = ac;
 
@@ -62,6 +64,7 @@ export class OverlayManager {
 
     const overlay = document.createElement('div');
     overlay.className = 'sourceit-overlay sourceit-cleared';
+    overlay.setAttribute('aria-label', 'César — post cleared');
     const ac = new AbortController();
     overlay._abortController = ac;
 
@@ -111,6 +114,7 @@ export class OverlayManager {
     const severity = confidence >= 70 ? 'high' : confidence >= 50 ? 'medium' : 'low';
     overlay.classList.add(`sourceit-severity-${severity}`);
     overlay.setAttribute('data-score', confidence);
+    overlay.setAttribute('aria-label', `César — ${SEVERITY_ARIA[severity]} detection, ${confidence}%`);
 
     const tpMatch = regexResult.matches.find((m) => m.axis === 'third-party');
     const ctaMatch = regexResult.matches.find((m) => m.axis === 'gating');
@@ -138,14 +142,14 @@ export class OverlayManager {
         </div>
         ${suggestedComment ? `
         <div class="sourceit-comment-draft sourceit-collapsed">
-          <button class="sourceit-comment-toggle">
+          <button class="sourceit-comment-toggle" aria-expanded="false">
             <span>${ICONS.comment} Comment with source</span>
-            <span class="sourceit-toggle-arrow"><svg viewBox="0 0 10 6" width="10" height="6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+            <span class="sourceit-toggle-arrow">${ICONS.chevron}</span>
           </button>
           <div class="sourceit-comment-body">
             <div class="sourceit-comment-text-row">
               <p class="sourceit-comment-text">${suggestedComment}</p>
-              <button class="sourceit-btn-copy" title="Copy">${ICONS.copy}</button>
+              <button class="sourceit-btn-copy" title="Copy" aria-label="Copy comment">${ICONS.copy}</button>
             </div>
             <button class="sourceit-btn sourceit-btn-post-comment">${ICONS.comment} Post comment</button>
           </div>
@@ -247,7 +251,8 @@ export class OverlayManager {
         (e) => {
           e.stopPropagation();
           const draft = overlay.querySelector('.sourceit-comment-draft');
-          draft.classList.toggle('sourceit-collapsed');
+          const isCollapsed = draft.classList.toggle('sourceit-collapsed');
+          commentToggle.setAttribute('aria-expanded', String(!isCollapsed));
         },
         opts
       );
diff --git a/src/popup/popup.css b/src/popup/popup.css
index a9e64ce..ef00dd8 100644
--- a/src/popup/popup.css
+++ b/src/popup/popup.css
@@ -1,26 +1,65 @@
+:root {
+  /* Background */
+  --color-bg-darkest: #0c0c18;
+  --color-bg-card: #13132a;
+  --color-bg-overlay: #1a1a2e;
+  /* Text */
+  --color-text-primary: #e8e8ee;
+  --color-text-secondary: #c0c0d0;
+  --color-text-tertiary: #606078;
+  --color-text-heading: #d0d0e0;
+  --color-text-muted: #9a9ab0;
+  /* Accent */
+  --color-green: #7bc47b;
+  --color-green-bright: #7bed9f;
+  --color-red: #ff4757;
+  --color-red-soft: #ff8a9c;
+  --color-orange: #ffa502;
+  --color-blue: #3742fa;
+  /* Borders */
+  --color-border-subtle: rgba(255,255,255,0.05);
+  --color-border-light: rgba(255,255,255,0.06);
+  --color-border-medium: rgba(255,255,255,0.07);
+  --color-border-strong: rgba(255,255,255,0.1);
+  /* Scrollbar */
+  --color-scrollbar: #2a2a40;
+  --color-scrollbar-hover: #3a3a55;
+  /* Focus */
+  --color-focus-ring: rgba(123, 196, 123, 0.5);
+  /* Hover */
+  --color-text-muted-hover: #a0a0b8;
+  /* Subtle backgrounds */
+  --color-bg-subtle: rgba(255,255,255,0.025);
+  /* Toggle */
+  --color-toggle-bg: rgba(255,255,255,0.08);
+  --color-toggle-active-bg: rgba(123,196,123,0.35);
+  --color-toggle-knob-off: #606078;
+  --color-toggle-knob-on: #7bc47b;
+}
+
 * { box-sizing: border-box; margin: 0; padding: 0; }
 
 body {
   width: 300px;
-  background: #0c0c18;
-  color: #e8e8ee;
+  background: var(--color-bg-darkest);
+  color: var(--color-text-primary);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   overflow-x: hidden;
   overflow-y: auto;
   font-size: 13px;
   scrollbar-width: thin;
-  scrollbar-color: #2a2a40 transparent;
+  scrollbar-color: var(--color-scrollbar) transparent;
 }
 
 body::-webkit-scrollbar { width: 6px; }
 body::-webkit-scrollbar-track { background: transparent; }
-body::-webkit-scrollbar-thumb { background: #2a2a40; border-radius: 3px; }
-body::-webkit-scrollbar-thumb:hover { background: #3a3a55; }
+body::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: 3px; }
+body::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-hover); }
 
 .header {
-  background: #13132a;
+  background: var(--color-bg-card);
   padding: 14px 20px;
-  border-bottom: 1px solid rgba(255,255,255,0.06);
+  border-bottom: 1px solid var(--color-border-light);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -35,13 +74,13 @@ body::-webkit-scrollbar-thumb:hover { background: #3a3a55; }
 .logo-icon {
   width: 22px;
   height: 22px;
-  color: #9a9ab0;
+  color: var(--color-text-muted);
 }
 
 .logo-text {
   font-size: 18px;
   font-weight: 600;
-  color: #d0d0e0;
+  color: var(--color-text-heading);
   letter-spacing: 0.02em;
 }
 
@@ -58,9 +97,9 @@ body::-webkit-scrollbar-thumb:hover { background: #3a3a55; }
   position: absolute;
   cursor: pointer;
   inset: 0;
-  background: rgba(255,255,255,0.08);
+  background: var(--color-toggle-bg);
   border-radius: 10px;
-  transition: 0.25s;
+  transition: background 0.25s;
 }
 
 .header-toggle-slider::before {
@@ -70,22 +109,22 @@ body::-webkit-scrollbar-thumb:hover { background: #3a3a55; }
   width: 14px;
   left: 3px;
   bottom: 3px;
-  background: #555;
+  background: var(--color-toggle-knob-off);
   border-radius: 50%;
-  transition: 0.25s;
+  transition: transform 0.25s, background 0.25s;
 }
 
 .header-toggle input:checked + .header-toggle-slider {
-  background: rgba(130,180,130,0.35);
+  background: var(--color-toggle-active-bg);
 }
 
 .header-toggle input:checked + .header-toggle-slider::before {
   transform: translateX(16px);
-  background: #7bed9f;
+  background: var(--color-toggle-knob-on);
 }
 
 .header-toggle input:focus-visible + .header-toggle-slider {
-  box-shadow: 0 0 0 2px rgba(123, 237, 159, 0.5);
+  box-shadow: 0 0 0 2px var(--color-focus-ring);
 }
 
 .main { padding: 16px 20px; }
@@ -95,28 +134,31 @@ body::-webkit-scrollbar-thumb:hover { background: #3a3a55; }
   align-items: center;
   justify-content: space-between;
   padding: 12px 14px;
-  background: rgba(255,255,255,0.025);
-  border: 1px solid rgba(255,255,255,0.05);
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border-subtle);
   border-radius: 10px;
   margin-bottom: 14px;
 }
 
 .parasite-label {
   font-size: 12px;
-  color: #9a9ab0;
+  color: var(--color-text-muted);
 }
 
 .parasite-value {
   font-size: 24px;
   font-weight: 600;
-  color: #d0d0e0;
+  color: var(--color-text-heading);
   line-height: 1;
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .web-search-section {
   padding: 12px 14px;
-  background: rgba(255,255,255,0.025);
-  border: 1px solid rgba(255,255,255,0.05);
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border-subtle);
   border-radius: 10px;
   margin-bottom: 14px;
 }
@@ -128,11 +170,11 @@ body::-webkit-scrollbar-thumb:hover { background: #3a3a55; }
   gap: 10px;
 }
 
-.toggle-label { font-size: 13px; color: #c0c0d0; }
+.toggle-label { font-size: 13px; color: var(--color-text-secondary); }
 
 .web-search-desc {
   font-size: 11px;
-  color: #9a9ab0;
+  color: var(--color-text-muted);
   margin-top: 6px;
   line-height: 1.5;
 }
@@ -150,9 +192,9 @@ body::-webkit-scrollbar-thumb:hover { background: #3a3a55; }
   position: absolute;
   cursor: pointer;
   inset: 0;
-  background: rgba(255,255,255,0.08);
+  background: var(--color-toggle-bg);
   border-radius: 10px;
-  transition: 0.25s;
+  transition: background 0.25s;
 }
 
 .toggle-slider::before {
@@ -162,46 +204,46 @@ body::-webkit-scrollbar-thumb:hover { background: #3a3a55; }
   width: 14px;
   left: 3px;
   bottom: 3px;
-  background: #555;
+  background: var(--color-toggle-knob-off);
   border-radius: 50%;
-  transition: 0.25s;
+  transition: transform 0.25s, background 0.25s;
 }
 
 .toggle input:checked + .toggle-slider {
-  background: rgba(130,180,130,0.35);
+  background: var(--color-toggle-active-bg);
 }
 
 .toggle input:checked + .toggle-slider::before {
   transform: translateX(16px);
-  background: #7bed9f;
+  background: var(--color-toggle-knob-on);
 }
 
 .toggle input:focus-visible + .toggle-slider {
-  box-shadow: 0 0 0 2px rgba(123, 237, 159, 0.5);
+  box-shadow: 0 0 0 2px var(--color-focus-ring);
 }
 
 .reveal-btn {
   width: 100%;
   background: none;
-  border: 1px solid rgba(255,255,255,0.05);
+  border: 1px solid var(--color-border-subtle);
   border-radius: 10px;
   padding: 10px 14px;
-  color: #9a9ab0;
+  color: var(--color-text-muted);
   font-size: 11px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  transition: all 0.15s;
+  transition: background 0.15s, color 0.15s;
   font-family: inherit;
 }
 
 .reveal-btn:hover {
-  background: rgba(255,255,255,0.025);
-  color: #a0a0b8;
+  background: var(--color-bg-subtle);
+  color: var(--color-text-muted-hover);
 }
 
-.reveal-btn:focus-visible { box-shadow: 0 0 0 2px rgba(123, 237, 159, 0.5); outline: none; }
+.reveal-btn:focus-visible { box-shadow: 0 0 0 2px var(--color-focus-ring); outline: none; }
 
 .reveal-arrow {
   transition: transform 0.25s;
@@ -219,7 +261,7 @@ body::-webkit-scrollbar-thumb:hover { background: #3a3a55; }
   transition: max-height 0.3s ease;
 }
 
-.reveal-content.open { max-height: 350px; }
+.reveal-content.open { max-height: 500px; }
 
 .reveal-inner {
   padding: 14px 0 0;
@@ -230,7 +272,7 @@ body::-webkit-scrollbar-thumb:hover { background: #3a3a55; }
 
 .group-label {
   font-size: 11px;
-  color: #9a9ab0;
+  color: var(--color-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.08em;
   margin-bottom: -2px;
@@ -239,10 +281,10 @@ body::-webkit-scrollbar-thumb:hover { background: #3a3a55; }
 .provider-select {
   width: 100%;
   background: rgba(255,255,255,0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239a9ab0'/%3E%3C/svg%3E") no-repeat right 10px center;
-  border: 1px solid rgba(255,255,255,0.07);
+  border: 1px solid var(--color-border-medium);
   border-radius: 8px;
   padding: 7px 28px 7px 10px;
-  color: #c0c0d0;
+  color: var(--color-text-secondary);
   font-size: 11px;
   outline: none;
   -webkit-appearance: none;
@@ -250,10 +292,10 @@ body::-webkit-scrollbar-thumb:hover { background: #3a3a55; }
 }
 
 .provider-select:focus-visible {
-  box-shadow: 0 0 0 2px rgba(123, 237, 159, 0.5);
+  box-shadow: 0 0 0 2px var(--color-focus-ring);
 }
 
-.provider-select option { background: #13132a; }
+.provider-select option { background: var(--color-bg-card); }
 
 .api-key-row { display: flex; gap: 6px; }
 
@@ -261,36 +303,42 @@ body::-webkit-scrollbar-thumb:hover { background: #3a3a55; }
   flex: 1;
   min-width: 0;
   background: rgba(255,255,255,0.04);
-  border: 1px solid rgba(255,255,255,0.07);
+  border: 1px solid var(--color-border-medium);
   border-radius: 8px;
   padding: 7px 10px;
-  color: #c0c0d0;
+  color: var(--color-text-secondary);
   font-size: 11px;
   font-family: 'Courier New', monospace;
   outline: none;
 }
 
 .api-key-input:focus-visible {
-  box-shadow: 0 0 0 2px rgba(123, 237, 159, 0.5);
+  box-shadow: 0 0 0 2px var(--color-focus-ring);
 }
 
 .api-key-btn {
   background: rgba(255,255,255,0.06);
-  border: 1px solid rgba(255,255,255,0.1);
+  border: 1px solid var(--color-border-strong);
   border-radius: 8px;
   padding: 7px 12px;
-  color: #9a9ab0;
+  color: var(--color-text-muted);
   font-size: 11px;
   font-weight: 600;
   cursor: pointer;
-  transition: all 0.15s;
+  transition: background 0.15s, color 0.15s;
   font-family: inherit;
 }
 
-.api-key-btn:hover { background: rgba(255,255,255,0.1); color: #c0c0d0; }
-.api-key-btn:focus-visible { box-shadow: 0 0 0 2px rgba(123, 237, 159, 0.5); outline: none; }
+.api-key-btn:hover { background: rgba(255,255,255,0.1); color: var(--color-text-secondary); }
+.api-key-btn:focus-visible { box-shadow: 0 0 0 2px var(--color-focus-ring); outline: none; }
+.api-key-btn-saved { color: var(--color-green); }
 
-.api-status { font-size: 11px; color: #808098; }
+.api-status { font-size: 11px; color: var(--color-text-muted); }
+.api-status-warning { color: var(--color-orange); }
+.api-status-success { color: var(--color-green); }
+.api-status-error { color: var(--color-red-soft); }
+
+.web-search-desc-error { color: var(--color-red-soft); }
 
 .setting-row {
   display: flex;
@@ -299,21 +347,26 @@ body::-webkit-scrollbar-thumb:hover { background: #3a3a55; }
   padding: 4px 0;
 }
 
-.setting-text { font-size: 12px; color: #808098; cursor: pointer; }
+.setting-text { font-size: 12px; color: var(--color-text-muted); cursor: pointer; }
 
 .footer {
   padding: 10px 20px;
-  border-top: 1px solid rgba(255,255,255,0.04);
+  border-top: 1px solid var(--color-border-subtle);
   text-align: center;
 }
 
 .footer-text {
   font-size: 11px;
   font-weight: 400;
-  color: #9a9ab0;
+  color: var(--color-text-muted);
   letter-spacing: 0.03em;
+  font-style: italic;
 }
 
-.api-status-success { color: #7bed9f; }
-.api-status-error { color: #ff8a9c; }
-.web-search-desc-error { color: #ff8a9c; }
+/* Respect reduced-motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    transition-duration: 0.01s !important;
+    animation-duration: 0.01s !important;
+  }
+}
diff --git a/src/popup/popup.html b/src/popup/popup.html
index e1d0636..580be48 100644
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -10,13 +10,14 @@
 
   <div class="header">
     <div class="header-left">
-      <svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-        <path d="M3 21h18M5 21V7l7-4 7 4v14M9 21v-6h6v6M9 9h.01M15 9h.01"/>
+      <svg class="logo-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
+        <path d="M8 1L3 3.5v3.3c0 2.9 2 4.5 5 5.7 3-1.2 5-2.8 5-5.7V3.5L8 1z"/>
+        <path d="M6 7.5l1.5 1.5L10 6"/>
       </svg>
       <span class="logo-text">César</span>
     </div>
     <label class="header-toggle" title="Toggle detection">
-      <input type="checkbox" id="toggle-active" checked aria-label="Toggle César detection">
+      <input type="checkbox" id="toggle-active" checked role="switch" aria-label="Toggle César detection">
       <span class="header-toggle-slider"></span>
     </label>
   </div>
@@ -32,7 +33,7 @@
       <div class="toggle-row">
         <span class="toggle-label">Web search</span>
         <label class="toggle">
-          <input type="checkbox" id="toggle-websearch" aria-label="Enable web search">
+          <input type="checkbox" id="toggle-websearch" role="switch" aria-label="Enable web search">
           <span class="toggle-slider"></span>
         </label>
       </div>
@@ -43,7 +44,7 @@
 
     <button class="reveal-btn" id="reveal-btn" aria-expanded="false" aria-controls="reveal-content">
       <span>Settings</span>
-      <span class="reveal-arrow"><svg viewBox="0 0 10 6" width="10" height="6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+      <span class="reveal-arrow" aria-hidden="true"><svg viewBox="0 0 16 16" width="10" height="6" fill="none"><path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
     </button>
 
     <div class="reveal-content" id="reveal-content">
@@ -63,24 +64,24 @@
           <input type="password" class="api-key-input" id="api-key-input" placeholder="Paste your API key" aria-label="API key">
           <button class="api-key-btn" id="api-key-save" aria-label="Save API key">OK</button>
         </div>
-        <div class="api-status" id="api-status">No API key — regex only</div>
+        <div class="api-status api-status-warning" id="api-status">No API key — regex only</div>
 
         <span class="group-label" role="heading" aria-level="3">Options</span>
 
         <div class="setting-row">
           <label class="setting-text" for="toggle-expand">Auto-expand posts</label>
-          <span class="toggle">
-            <input type="checkbox" id="toggle-expand" aria-label="Auto-expand flagged posts">
+          <label class="toggle">
+            <input type="checkbox" id="toggle-expand" role="switch" aria-label="Auto-expand flagged posts">
             <span class="toggle-slider"></span>
-          </span>
+          </label>
         </div>
 
         <div class="setting-row">
           <label class="setting-text" for="toggle-debug">Mode debug</label>
-          <span class="toggle">
-            <input type="checkbox" id="toggle-debug" aria-label="Debug mode">
+          <label class="toggle">
+            <input type="checkbox" id="toggle-debug" role="switch" aria-label="Debug mode">
             <span class="toggle-slider"></span>
-          </span>
+          </label>
         </div>
 
       </div>
diff --git a/src/popup/popup.js b/src/popup/popup.js
index 4744287..0a2a3f9 100644
--- a/src/popup/popup.js
+++ b/src/popup/popup.js
@@ -22,7 +22,7 @@ function updateApiStatus(key, providerSetting) {
   chrome.runtime.sendMessage({ type: 'cesar-get-providers' }, (resp) => {
     if (chrome.runtime.lastError || !resp) return;
     const match = resp.providers.find((p) => p.id === provider);
-    status.classList.remove('api-status-success', 'api-status-error');
+    status.classList.remove('api-status-success', 'api-status-error', 'api-status-warning');
     if (match) {
       status.textContent = `● ${match.name} — ${match.model}`;
       status.classList.add('api-status-success');
@@ -66,10 +66,10 @@ async function saveApiKey() {
   const saveBtn = document.getElementById('api-key-save');
   const origText = saveBtn.textContent;
   saveBtn.textContent = 'Saved';
-  saveBtn.style.color = '#7bed9f';
+  saveBtn.classList.add('api-key-btn-saved');
   setTimeout(() => {
     saveBtn.textContent = origText;
-    saveBtn.style.color = '';
+    saveBtn.classList.remove('api-key-btn-saved');
   }, 1500);
 }
 
@@ -90,7 +90,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     webSearch: false,
   };
 
-  document.getElementById('posts-flagged').textContent = stats.postsFlagged;
+  document.getElementById('posts-flagged').textContent = Number(stats.postsFlagged) || 0;
 
   document.getElementById('toggle-active').checked = settings.active;
   document.getElementById('toggle-debug').checked = settings.debug;
@@ -179,7 +179,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     if (changes.cesar_stats) {
       const newStats = changes.cesar_stats.newValue;
       if (newStats) {
-        document.getElementById('posts-flagged').textContent = newStats.postsFlagged;
+        document.getElementById('posts-flagged').textContent = Number(newStats.postsFlagged) || 0;
       }
     }
   });
diff --git a/static/overlay.css b/static/overlay.css
index 0328b9b..012d158 100644
--- a/static/overlay.css
+++ b/static/overlay.css
@@ -1,11 +1,11 @@
-/* César v0.4.5 — Dark blue compact overlay */
+/* César v0.7 — Dark blue compact overlay */
 
 .sourceit-overlay,
 .sourceit-overlay * {
   box-sizing: border-box;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 12px;
-  color: #f1f2f6;
+  color: var(--si-text-primary);
   font-weight: 400;
   line-height: 1.5;
   text-decoration: none;
@@ -13,13 +13,44 @@
 }
 
 .sourceit-overlay {
+  /* Design tokens — scoped to overlay to avoid polluting LinkedIn's :root */
+  /* Background */
+  --si-bg-overlay: #1a1a2e;
+  --si-bg-overlay-end: #16213e;
+  /* Text */
+  --si-text-primary: #e8e8ee;
+  --si-text-secondary: #c0c0d0;
+  --si-text-tertiary: #606078;
+  /* Accent */
+  --si-green: #7bc47b;
+  --si-green-bright: #7bed9f;
+  --si-red: #ff4757;
+  --si-red-soft: #ff6b81;
+  --si-orange: #ffa502;
+  --si-orange-soft: #ffbe76;
+  --si-blue: #3742fa;
+  --si-purple: #AFA9EC;
+  --si-purple-bg: rgba(127,119,221,0.08);
+  --si-purple-bg-hover: rgba(127,119,221,0.18);
+  /* Borders */
+  --si-border-subtle: rgba(255,255,255,0.04);
+  --si-border-light: rgba(255,255,255,0.06);
+  --si-border-medium: rgba(255,255,255,0.08);
+  --si-border-strong: rgba(255,255,255,0.1);
+  /* Focus */
+  --si-focus-ring: rgba(123, 196, 123, 0.5);
+  /* Cleared */
+  --si-green-dark: #2e7d32;
+  /* Misc */
+  --si-muted: #747d8c;
+  --si-subdued: #a4b0be;
+
   position: relative;
   z-index: 100;
   margin: 0 0 8px 0;
   padding: 0 16px;
   animation: sourceit-slideIn 0.3s ease-out backwards;
-  will-change: transform, opacity;
-  color: #f1f2f6;
+  color: var(--si-text-primary);
   font-size: 12px;
   text-align: left;
   letter-spacing: normal;
@@ -41,22 +72,22 @@
 }
 
 .sourceit-badge {
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  background: linear-gradient(135deg, var(--si-bg-overlay) 0%, var(--si-bg-overlay-end) 100%);
   border-radius: 8px;
-  border: 1px solid rgba(255,255,255,0.08);
+  border: 1px solid var(--si-border-medium);
   overflow: hidden;
 }
 
 .sourceit-severity-high .sourceit-badge {
-  border-left: 3px solid #ff4757;
+  border-left: 3px solid var(--si-red);
 }
 
 .sourceit-severity-medium .sourceit-badge {
-  border-left: 3px solid #ffa502;
+  border-left: 3px solid var(--si-orange);
 }
 
 .sourceit-severity-low .sourceit-badge {
-  border-left: 3px solid #3742fa;
+  border-left: 3px solid var(--si-blue);
 }
 
 .sourceit-badge-header {
@@ -64,14 +95,14 @@
   align-items: center;
   gap: 6px;
   padding: 8px 12px;
-  border-bottom: 1px solid rgba(255,255,255,0.06);
+  border-bottom: 1px solid var(--si-border-light);
 }
 
 .sourceit-icon {
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  color: #ff6b81;
+  color: var(--si-red-soft);
 }
 
 .sourceit-icon svg { width: 14px; height: 14px; }
@@ -79,26 +110,26 @@
 .sourceit-title {
   font-size: 12px;
   font-weight: 700;
-  color: #f1f2f6;
+  color: var(--si-text-primary);
   flex-grow: 1;
 }
 
 .sourceit-analyzing-text {
   font-size: 11px;
-  color: #a4b0be;
+  color: var(--si-subdued);
   flex: 1;
 }
 
 .sourceit-pending-explanation {
   font-size: 11px;
-  color: #a4b0be;
+  color: var(--si-subdued);
   margin: 0;
 }
 
 .sourceit-cleared-reason {
   display: block;
   font-size: 12px;
-  color: #c8d0da;
+  color: var(--si-text-secondary);
   padding: 4px 12px 8px;
   line-height: 1.4;
   word-wrap: break-word;
@@ -107,19 +138,14 @@
 .sourceit-reason-line {
   display: block;
   font-size: 12px;
-  color: #c8d0da;
+  color: var(--si-text-secondary);
   padding: 6px 12px;
-  border-top: 1px solid rgba(255,255,255,0.04);
-  border-bottom: 1px solid rgba(255,255,255,0.06);
+  border-top: 1px solid var(--si-border-subtle);
+  border-bottom: 1px solid var(--si-border-light);
   line-height: 1.4;
   word-wrap: break-word;
 }
 
-.sourceit-reason-cleared {
-  color: #c8d0da;
-  border-bottom: none;
-}
-
 .sourceit-score {
   font-size: 11px;
   font-weight: 600;
@@ -130,17 +156,17 @@
 
 .sourceit-severity-high .sourceit-score {
   background: rgba(255,71,87,0.2);
-  color: #ff6b81;
+  color: var(--si-red-soft);
 }
 
 .sourceit-severity-medium .sourceit-score {
   background: rgba(255,165,2,0.2);
-  color: #ffbe76;
+  color: var(--si-orange-soft);
 }
 
 .sourceit-severity-low .sourceit-score {
   background: rgba(255,255,255,0.08);
-  color: #dfe4ea;
+  color: var(--si-text-primary);
 }
 
 .sourceit-llm-badge {
@@ -148,8 +174,8 @@
   font-weight: 700;
   padding: 2px 6px;
   border-radius: 3px;
-  background: rgba(46,213,115,0.2);
-  color: #7bed9f;
+  background: rgba(123,196,123,0.2);
+  color: var(--si-green-bright);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
@@ -160,48 +186,42 @@
   padding: 2px 6px;
   border-radius: 3px;
   background: rgba(255,255,255,0.06);
-  color: #747d8c;
+  color: var(--si-muted);
   letter-spacing: 0.03em;
   white-space: nowrap;
 }
 
 .sourceit-no-ai-notice {
   font-size: 11px;
-  color: #606878;
+  color: var(--si-text-tertiary);
   margin-bottom: 8px;
   padding: 6px 8px;
   background: rgba(255,255,255,0.03);
   border-radius: 4px;
-  border-left: 2px solid #747d8c;
+  border-left: 2px solid var(--si-muted);
   line-height: 1.4;
 }
 
 .sourceit-dismiss {
   background: none;
   border: none;
-  color: #747d8c;
+  color: var(--si-muted);
   cursor: pointer;
   padding: 2px 4px;
   border-radius: 4px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  transition: all 0.15s;
+  transition: background 0.15s, color 0.15s;
 }
 
 .sourceit-dismiss svg { width: 12px; height: 12px; }
-.sourceit-dismiss:hover { background: rgba(255,255,255,0.1); color: #f1f2f6; }
+.sourceit-dismiss:hover { background: var(--si-border-strong); color: var(--si-text-primary); }
 
 .sourceit-badge-body {
   padding: 8px 12px 10px;
 }
 
-.sourceit-explanation {
-  font-size: 12px;
-  color: #c8d0da;
-  margin: 0 0 8px 0;
-}
-
 .sourceit-details {
   display: flex;
   flex-direction: column;
@@ -223,14 +243,14 @@
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  color: #747d8c;
+  color: var(--si-muted);
 }
 
 .sourceit-detail-icon svg { width: 11px; height: 11px; }
 
 .sourceit-detail-label {
   font-weight: 600;
-  color: #747d8c;
+  color: var(--si-muted);
   min-width: 50px;
   flex-shrink: 0;
   font-size: 11px;
@@ -239,26 +259,26 @@
 }
 
 .sourceit-detail-value {
-  color: #dfe4ea;
+  color: var(--si-text-primary);
   font-size: 11px;
 }
 
 /* ---- Collapsible comment ---- */
 .sourceit-comment-draft {
   margin-bottom: 8px;
-  border: 1px solid rgba(255,255,255,0.08);
+  border: 1px solid var(--si-border-medium);
   border-radius: 6px;
   overflow: hidden;
 }
 
 .sourceit-comment-toggle {
   width: 100%;
-  background: rgba(127,119,221,0.08);
+  background: var(--si-purple-bg);
   border: none;
   padding: 7px 10px;
   font-size: 11px;
   font-weight: 600;
-  color: #AFA9EC;
+  color: var(--si-purple);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -267,7 +287,7 @@
   transition: background 0.15s;
 }
 
-.sourceit-comment-toggle:hover { background: rgba(127,119,221,0.18); }
+.sourceit-comment-toggle:hover { background: var(--si-purple-bg-hover); }
 
 .sourceit-comment-toggle span {
   display: flex;
@@ -275,7 +295,7 @@
   gap: 5px;
 }
 
-.sourceit-comment-toggle svg { width: 12px; height: 12px; stroke: #AFA9EC; }
+.sourceit-comment-toggle svg { width: 12px; height: 12px; stroke: var(--si-purple); }
 
 .sourceit-toggle-arrow {
   display: flex;
@@ -290,10 +310,20 @@
 
 .sourceit-comment-body {
   padding: 8px 10px;
-  border-top: 1px solid rgba(255,255,255,0.06);
+  border-top: 1px solid var(--si-border-light);
+  max-height: 300px;
+  overflow: hidden;
+  transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.2s ease;
+  opacity: 1;
 }
 
-.sourceit-collapsed .sourceit-comment-body { display: none; }
+.sourceit-collapsed .sourceit-comment-body {
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  opacity: 0;
+  border-top-color: transparent;
+}
 
 .sourceit-comment-text-row {
   display: flex;
@@ -303,35 +333,35 @@
 
 .sourceit-comment-text {
   font-size: 11px;
-  color: #c8d0da;
+  color: var(--si-text-secondary);
   line-height: 1.5;
   margin: 0;
   flex: 1;
   user-select: text;
+  max-height: 150px;
+  overflow-y: auto;
 }
 
 .sourceit-btn-copy {
   background: none;
   border: none;
-  color: #747d8c;
+  color: var(--si-muted);
   cursor: pointer;
   padding: 2px 4px;
   border-radius: 4px;
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  transition: all 0.15s;
+  transition: color 0.15s, background 0.15s;
 }
 
 .sourceit-btn-copy svg { width: 12px; height: 12px; }
-.sourceit-btn-copy:hover { color: #AFA9EC; background: rgba(127,119,221,0.12); }
-
-.sourceit-comment-actions { margin-top: 8px; }
+.sourceit-btn-copy:hover { color: var(--si-purple); background: rgba(127,119,221,0.12); }
 
 .sourceit-badge-body .sourceit-btn.sourceit-btn-post-comment {
   background: rgba(127,119,221,0.15);
   border-color: rgba(127,119,221,0.35);
-  color: #AFA9EC;
+  color: var(--si-purple);
   width: 100%;
   justify-content: center;
   padding: 6px 14px;
@@ -340,7 +370,7 @@
 }
 
 .sourceit-badge-body .sourceit-btn.sourceit-btn-post-comment:hover { background: rgba(127,119,221,0.25); }
-.sourceit-btn-post-comment svg { stroke: #AFA9EC; }
+.sourceit-btn-post-comment svg { stroke: var(--si-purple); }
 
 /* ---- Action buttons ---- */
 .sourceit-actions {
@@ -354,11 +384,11 @@
   font-weight: 500;
   padding: 4px 10px;
   border-radius: 5px;
-  border: 1px solid rgba(255,255,255,0.1);
+  border: 1px solid var(--si-border-strong);
   background: rgba(255,255,255,0.04);
-  color: #a4b0be;
+  color: var(--si-subdued);
   cursor: pointer;
-  transition: all 0.15s;
+  transition: background 0.15s, color 0.15s;
   white-space: nowrap;
   display: flex;
   align-items: center;
@@ -366,33 +396,33 @@
 }
 
 .sourceit-btn svg { width: 12px; height: 12px; }
-.sourceit-btn:hover { background: rgba(255,255,255,0.08); color: #dfe4ea; }
+.sourceit-btn:hover { background: rgba(255,255,255,0.08); color: var(--si-text-primary); }
 
 .sourceit-btn-confirm {
-  border-color: rgba(46,213,115,0.25);
-  color: #7bed9f;
-  background: rgba(46,213,115,0.08);
+  border-color: rgba(123,196,123,0.25);
+  color: var(--si-green-bright);
+  background: rgba(123,196,123,0.08);
 }
 
-.sourceit-btn-confirm:hover { background: rgba(46,213,115,0.15); }
+.sourceit-btn-confirm:hover { background: rgba(123,196,123,0.15); }
 
 .sourceit-btn-partial {
   border-color: rgba(255,165,2,0.25);
-  color: #ffbe76;
+  color: var(--si-orange-soft);
   background: rgba(255,165,2,0.08);
 }
 
 .sourceit-btn-partial:hover { background: rgba(255,165,2,0.15); }
 
 .sourceit-btn-false {
-  border-color: rgba(255,255,255,0.08);
-  color: #747d8c;
+  border-color: var(--si-border-medium);
+  color: var(--si-muted);
 }
 
 .sourceit-actions .sourceit-btn.sourceit-btn-confirmed {
-  background: rgba(46,213,115,0.15);
-  border-color: rgba(46,213,115,0.3);
-  color: #7bed9f;
+  background: rgba(123,196,123,0.15);
+  border-color: rgba(123,196,123,0.3);
+  color: var(--si-green-bright);
   cursor: default;
 }
 
@@ -401,9 +431,9 @@
   pointer-events: none;
 }
 
-/* ---- Severity labels (colorblind-safe) ---- */
+/* ---- Severity labels ---- */
 .sourceit-severity-label {
-  font-size: 9px;
+  font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
@@ -413,17 +443,17 @@
 
 .sourceit-severity-high .sourceit-severity-label {
   background: rgba(255,71,87,0.15);
-  color: #ff6b81;
+  color: var(--si-red-soft);
 }
 
 .sourceit-severity-medium .sourceit-severity-label {
   background: rgba(255,165,2,0.15);
-  color: #ffbe76;
+  color: var(--si-orange-soft);
 }
 
 .sourceit-severity-low .sourceit-severity-label {
   background: rgba(255,255,255,0.06);
-  color: #dfe4ea;
+  color: var(--si-text-primary);
 }
 
 /* ---- Loader spin ---- */
@@ -441,16 +471,10 @@
   from {
     opacity: 0;
     transform: translateY(-6px);
-    max-height: 0;
-    margin-bottom: 0;
-    overflow: hidden;
   }
   to {
     opacity: 1;
     transform: translateY(0);
-    max-height: 500px;
-    margin-bottom: 8px;
-    overflow: hidden;
   }
 }
 
@@ -460,8 +484,8 @@
 }
 
 .sourceit-badge-cleared {
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-  border-left: 3px solid #2e7d32;
+  background: linear-gradient(135deg, var(--si-bg-overlay) 0%, var(--si-bg-overlay-end) 100%);
+  border-left: 3px solid var(--si-green-dark);
 }
 
 .sourceit-badge-cleared .sourceit-badge-header {
@@ -469,7 +493,7 @@
 }
 
 .sourceit-icon-cleared {
-  color: #7bed9f;
+  color: var(--si-green-bright);
 }
 
 [data-sourceit-flagged] { position: relative; }
@@ -487,22 +511,28 @@
   .sourceit-pending-score { animation: none; }
   .sourceit-icon-spin svg { animation: none; }
   .sourceit-cleared { transition: none; }
+  .sourceit-overlay.sourceit-hidden { transition: none; }
+  .sourceit-comment-body { transition: none; }
+  .sourceit-overlay *, .sourceit-overlay *::before, .sourceit-overlay *::after {
+    transition-duration: 0.01s !important;
+    animation-duration: 0.01s !important;
+  }
 }
 
 /* Faded cleared overlays should not be interactive */
 .sourceit-cleared-faded { opacity: 0.4; pointer-events: none; }
 
 /* Copy button success feedback */
-.sourceit-btn-copy-success { color: #7bed9f; }
+.sourceit-btn-copy-success { color: var(--si-green-bright); }
 
 /* Post comment button state feedback */
 .sourceit-btn-post-success {
-  color: #7bed9f;
-  border-color: rgba(46,213,115,0.3);
+  color: var(--si-green-bright);
+  border-color: rgba(123,196,123,0.3);
 }
 
 .sourceit-btn-post-fallback {
-  color: #ffbe76;
+  color: var(--si-orange-soft);
   border-color: rgba(255,165,2,0.3);
 }
 
@@ -526,6 +556,6 @@ body.theme--dark .sourceit-badge,
 .sourceit-btn-copy:focus-visible,
 .sourceit-comment-toggle:focus-visible,
 .sourceit-btn-post-comment:focus-visible {
-  box-shadow: 0 0 0 2px rgba(123, 237, 159, 0.5);
+  box-shadow: 0 0 0 2px var(--si-focus-ring);
   outline: none;
 }

From 74c4828d1f9dc5cd1103d4ca2072778fb466f237 Mon Sep 17 00:00:00 2001
From: bastiensoret <bastiensoret@gmail.com>
Date: Fri, 20 Mar 2026 14:55:39 +0100
Subject: [PATCH 2/2] docs(commit): bump version to 0.7.1 and add changelog for
 responsive/a11y fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Syncs manifest.json and package.json to 0.7.1 and documents the
CSS custom properties migration, accessibility improvements, and
visual polish changes shipped in 0.7.0→0.7.1.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md  | 10 ++++++++++
 manifest.json |  2 +-
 package.json  |  2 +-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2725a3c..20afe56 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 All notable changes to César are documented here.
 
+## [0.7.1] — 2026-03-20
+
+### Changed
+- All hardcoded color values migrated to CSS custom properties (`--color-*` in popup, `--si-*` in overlay) for maintainability
+- Decorative SVGs marked with `aria-hidden="true"`; toggle elements use `role="switch"`
+- Overlay root element receives `aria-label`; comment toggle uses `aria-expanded`
+- Comment body animates with `max-height` transition instead of `display:none` toggle
+- `postsFlagged` display sanitized; inline style manipulation replaced with CSS classes
+- Icon paths in manifest updated to `static/` directory
+
 ## [0.7.0] — 2026-03-20
 
 ### Added
diff --git a/manifest.json b/manifest.json
index 17deb95..0e06456 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "César — Give back to César",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Detects parasitic lead magnets on LinkedIn — posts that gate access to content the author didn't create.",
   "permissions": ["storage", "activeTab"],
   "host_permissions": [
diff --git a/package.json b/package.json
index ae8e8cc..136e72e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cesar-extension",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "private": true,
   "type": "module",
   "scripts": {