/* ============================================================ styles/base.css — CrypView V2 Variables CSS, reset, typographie et layout de base. ============================================================ */ /* ── Variables ─────────────────────────────────────────────── */ :root { --bg: #070a0f; --panel: #0d1117; --border: #1c2333; --accent: #00ff88; --green: #00ff88; --red: #ff3d5a; --text: #e6edf3; --muted: #8b949e; --purple: #e040fb; --cyan: #00c8ff; --orange: #ff9900; --yellow: #f7c948; } /* ── Thème sombre (défaut) ──────────────────────────────────── */ /* Les variables :root ci-dessus constituent le thème dark natif. */ /* ── Thème clair ────────────────────────────────────────────── */ /* Appliqué via la classe .light-theme sur */ .light-theme { --bg: #f0f2f5; --bg2: #e8eaf0; /* ← ajout : utilisé par index.css section-preview */ --panel: #ffffff; --border: #d0d7e3; --accent: #005c30; /* ← assombri de #00a85a pour WCAG AA (6,83:1 sur #f0f2f5) */ --green: #005c30; /* ← assombri de #00a85a */ --red: #c4203c; /* ← assombri de #d4294a pour meilleur contraste */ --text: #0d1117; --muted: #4a5568; /* ← légèrement assombri de #57606a */ --dim: #c5ccd8; /* ← ajout : utilisé par index.css feat-num */ --purple: #6b21a8; /* ← assombri de #8b2fc9 pour WCAG AA */ --cyan: #0057a8; /* ← assombri de #0078c8 pour WCAG AA (6,52:1 sur blanc) */ --orange: #7d4200; /* ← assombri de #c26c00 pour WCAG AA sur fonds clairs */ --yellow: #8b5c00; /* ← assombri de #c08000 */ } /* Ajuste le body::before (scanlines) — invisible en light mode */ .light-theme body::before { background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.015) 2px, rgba(0, 0, 0, 0.015) 4px ); } /* Transition douce lors du changement de thème */ *, *::before, *::after { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease; } /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── Body ───────────────────────────────────────────────────── */ body { background: var(--bg); color: var(--text); font-family: 'Space Mono', monospace; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* Grille scanlines subtile */ body::before { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 255, 136, 0.012) 2px, rgba(0, 255, 136, 0.012) 4px ); pointer-events: none; z-index: 998; } /* ── Typographie ─────────────────────────────────────────────── */ button { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 6px 12px; font-family: 'Space Mono', monospace; font-size: 11px; border-radius: 4px; cursor: pointer; transition: all .15s; } button:hover { border-color: var(--accent); color: var(--accent); } /* ── Accessibilité ───────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── Toast container ─────────────────────────────────────────── */ #toast-container { position: fixed; bottom: 24px; right: 20px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }