/* * Morandi palette: low-saturation, grey-leaning hues on a warm neutral ground, * after Giorgio Morandi's still lifes. Every colour carries some of the same * grey, which is what keeps the page quiet enough to read a diff or a findings * table in. The muting is deliberate but the contrast is not: every text and * badge colour below clears WCAG AA (4.5:1) against both the page and the card * background it can sit on, in both themes. * * :root is the dark theme; [data-theme="light"] overrides it. js/app.js sets * data-theme on from localStorage, falling back to prefers-color-scheme. */ :root { /* Warm charcoal rather than black: a neutral grey ground reads as a hole in the screen next to these hues. */ --bg-primary: #22201e; --bg-secondary: #2a2725; --bg-card: rgba(48, 45, 42, 0.88); --bg-card-hover: rgba(60, 56, 52, 0.75); --border-color: rgba(233, 228, 220, 0.10); --border-focus: rgba(157, 181, 177, 0.55); --text-primary: #e9e4dc; --text-secondary: #aba49b; --text-muted: #8a827a; --accent: #9db5b1; /* dusty eucalyptus */ --accent-hover: #b2c6c2; --accent-light: rgba(157, 181, 177, 0.16); --accent-ring: rgba(157, 181, 177, 0.22); --accent-edge: rgba(157, 181, 177, 0.28); --accent-glow: rgba(157, 181, 177, 0.18); --on-accent: #22201e; /* dark ink on a light accent */ --success: #a3bc96; /* sage */ --success-bg: rgba(163, 188, 150, 0.14); --success-edge: rgba(163, 188, 150, 0.28); --warning: #d6b27c; /* ochre */ --warning-bg: rgba(214, 178, 124, 0.14); --warning-edge: rgba(214, 178, 124, 0.30); --danger: #d79a92; /* faded terracotta */ --danger-bg: rgba(215, 154, 146, 0.14); --danger-edge: rgba(215, 154, 146, 0.32); --brand-from: #7d8f8b; /* the brand tile is the one place with a wash */ --brand-to: #9a8e88; --on-brand: #f4f1ec; --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.22); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.30); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.38); --shadow-accent: 0 4px 12px rgba(0, 0, 0, 0.28); } [data-theme="light"] { /* Unbleached linen, not white. The hues are the same family as the dark theme, taken deeper so they still clear AA on a pale ground. */ --bg-primary: #ebe7e0; --bg-secondary: #f6f3ee; --bg-card: rgba(251, 249, 246, 0.96); --bg-card-hover: rgba(243, 239, 233, 0.92); --border-color: rgba(51, 48, 44, 0.12); --border-focus: rgba(76, 103, 100, 0.55); --text-primary: #33302c; --text-secondary: #635c55; --text-muted: #7a7269; --accent: #4c6764; --accent-hover: #3d5451; --accent-light: rgba(76, 103, 100, 0.10); --accent-ring: rgba(76, 103, 100, 0.18); --accent-edge: rgba(76, 103, 100, 0.26); --accent-glow: rgba(76, 103, 100, 0.22); --on-accent: #fbf9f6; --success: #4e6746; --success-bg: rgba(78, 103, 70, 0.10); --success-edge: rgba(78, 103, 70, 0.24); --warning: #7c5c2c; --warning-bg: rgba(124, 92, 44, 0.10); --warning-edge: rgba(124, 92, 44, 0.26); --danger: #8b4f49; --danger-bg: rgba(139, 79, 73, 0.10); --danger-edge: rgba(139, 79, 73, 0.28); --brand-from: #6f827e; --brand-to: #8d817b; --on-brand: #fbf9f6; --shadow-sm: 0 2px 8px rgba(51, 48, 44, 0.06); --shadow-md: 0 8px 24px rgba(51, 48, 44, 0.08); --shadow-lg: 0 16px 40px rgba(51, 48, 44, 0.10); --shadow-accent: 0 4px 12px rgba(51, 48, 44, 0.14); } * { box-sizing: border-box; margin: 0; padding: 0; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } body { font-family: var(--font-sans); background-color: var(--bg-primary); color: var(--text-primary); min-height: 100vh; display: flex; flex-direction: column; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Layout */ .app-container { max-width: 1100px; margin: 0 auto; padding: 24px 20px 48px; width: 100%; flex: 1; } /* Header */ header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .brand-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--brand-from), var(--brand-to)); display: flex; align-items: center; justify-content: center; color: var(--on-brand); font-weight: 700; font-size: 20px; box-shadow: var(--shadow-accent); } .brand-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; } .brand-sub { font-size: 12px; color: var(--text-secondary); font-weight: 500; } .header-controls { display: flex; align-items: center; gap: 10px; } .btn-icon { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); width: 38px; height: 38px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; text-decoration: none; } .btn-icon:hover { color: var(--text-primary); border-color: var(--border-focus); background: var(--bg-card-hover); } /* Language picker — same chrome as .btn-icon, but sized to its content and kept a native