/* themes.css - Tokens et variables CSS pour les thèmes clair et sombre. * Toutes les couleurs du site passent par ces variables. * Le thème est sélectionné via l'attribut data-theme sur . */ :root { /* Espacement et rayons */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --gap-xs: 6px; --gap-sm: 10px; --gap-md: 16px; --gap-lg: 24px; --gap-xl: 36px; /* Typographie */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; /* Durations */ --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; /* Couleurs néon (utilisables en dark comme en light pour les accents) */ --neon-cyan: #22d3ee; --neon-magenta: #e879f9; --neon-purple: #a78bfa; --neon-pink: #f472b6; /* Dégradés */ --gradient-accent: linear-gradient(135deg, var(--neon-cyan) 0%, var(--neon-purple) 50%, var(--neon-magenta) 100%); --gradient-text: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta)); } /* Theme: dark (par défaut) */ :root, [data-theme="dark"] { --bg-base: #0b0d17; --bg-elevated: rgba(255, 255, 255, 0.04); --bg-card: rgba(255, 255, 255, 0.06); --bg-card-hover: rgba(255, 255, 255, 0.09); --bg-input: rgba(255, 255, 255, 0.05); --bg-chip: rgba(255, 255, 255, 0.08); --bg-sidebar: rgba(15, 18, 32, 0.55); --text-primary: #e7e9f3; --text-secondary: #a8aec4; --text-muted: #6f7591; --text-inverse: #0b0d17; --border-subtle: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.18); --border-accent: rgba(34, 211, 238, 0.5); --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-card-hover: 0 14px 40px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 0 1px rgba(34, 211, 238, 0.4), 0 0 24px rgba(168, 139, 250, 0.35); --backdrop-blur: 16px; --backdrop-sat: 180%; /* Blobs décoratifs */ --blob-1: radial-gradient(circle at center, rgba(34, 211, 238, 0.35), transparent 60%); --blob-2: radial-gradient(circle at center, rgba(232, 121, 249, 0.28), transparent 60%); --blob-3: radial-gradient(circle at center, rgba(168, 139, 250, 0.32), transparent 60%); --focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.45); /* Archive badge (yellow circle "Archived") - dark theme */ --archive-badge-bg: #facc15; --archive-badge-fg: #1a1d2e; --archive-badge-border: rgba(250, 204, 21, 0.9); } /* Theme: light */ [data-theme="light"] { --bg-base: #f3f4fa; --bg-elevated: rgba(255, 255, 255, 0.65); --bg-card: rgba(255, 255, 255, 0.6); --bg-card-hover: rgba(255, 255, 255, 0.78); --bg-input: rgba(255, 255, 255, 0.7); --bg-chip: rgba(15, 18, 32, 0.06); --bg-sidebar: rgba(255, 255, 255, 0.7); --text-primary: #1a1d2e; --text-secondary: #4a5067; --text-muted: #7a8099; --text-inverse: #ffffff; --border-subtle: rgba(15, 18, 32, 0.08); --border-strong: rgba(15, 18, 32, 0.18); --border-accent: rgba(168, 85, 247, 0.5); --shadow-card: 0 8px 24px rgba(15, 18, 32, 0.08); --shadow-card-hover: 0 14px 36px rgba(15, 18, 32, 0.15); --shadow-glow: 0 0 0 1px rgba(168, 85, 247, 0.35), 0 0 24px rgba(34, 211, 238, 0.25); --backdrop-blur: 16px; --backdrop-sat: 180%; --blob-1: radial-gradient(circle at center, rgba(34, 211, 238, 0.28), transparent 60%); --blob-2: radial-gradient(circle at center, rgba(232, 121, 249, 0.22), transparent 60%); --blob-3: radial-gradient(circle at center, rgba(168, 139, 250, 0.25), transparent 60%); --focus-ring: 0 0 0 3px rgba(168, 139, 250, 0.4); /* Archive badge (yellow circle "Archived") - light theme */ --archive-badge-bg: #facc15; --archive-badge-fg: #1a1d2e; --archive-badge-border: rgba(202, 138, 4, 0.6); }