/* ========================================================================== Glibredecision — Mood / Ambiance System 4 moods: Peps (light), Zen (light), Chagrine (dark), Grave (dark) ========================================================================== */ /* -------------------------------------------------------------------------- Peps — Energique et chaleureux (Light) -------------------------------------------------------------------------- */ .mood-peps { --mood-bg: #ffffff; --mood-surface: #fffbf5; --mood-surface-hover: #fff5ea; --mood-text: #1a1a1a; --mood-text-muted: #6b6b6b; --mood-accent: #e85d26; --mood-accent-soft: #fff3ed; --mood-accent-text: #ffffff; --mood-border: #fde8d8; --mood-success: #22c55e; --mood-warning: #f59e0b; --mood-error: #ef4444; --mood-gradient: linear-gradient(135deg, #fff8f0 0%, #ffffff 100%); --mood-shadow: rgba(232, 93, 38, 0.08); --mood-status-prepa: #fed7aa; --mood-status-prepa-text: #9a3412; --mood-status-vote: #bfdbfe; --mood-status-vote-text: #1e40af; --mood-status-vigueur: #bbf7d0; --mood-status-vigueur-text: #166534; --mood-status-clos: #e5e7eb; --mood-status-clos-text: #374151; } /* -------------------------------------------------------------------------- Zen — Calme et serein (Light) -------------------------------------------------------------------------- */ .mood-zen { --mood-bg: #f8faf8; --mood-surface: #ffffff; --mood-surface-hover: #f0f7f2; --mood-text: #1a2e1a; --mood-text-muted: #5f7a5f; --mood-accent: #4a9e6f; --mood-accent-soft: #ecf5ef; --mood-accent-text: #ffffff; --mood-border: #d4e7d9; --mood-success: #34d399; --mood-warning: #fbbf24; --mood-error: #f87171; --mood-gradient: linear-gradient(135deg, #f0f7f2 0%, #f8faf8 100%); --mood-shadow: rgba(74, 158, 111, 0.08); --mood-status-prepa: #fde68a; --mood-status-prepa-text: #78350f; --mood-status-vote: #a7f3d0; --mood-status-vote-text: #065f46; --mood-status-vigueur: #bbf7d0; --mood-status-vigueur-text: #166534; --mood-status-clos: #d1d5db; --mood-status-clos-text: #374151; } /* -------------------------------------------------------------------------- Chagrine — Profond et subtil (Dark) -------------------------------------------------------------------------- */ .mood-chagrine { --mood-bg: #1a1625; --mood-surface: #231e30; --mood-surface-hover: #2d2640; --mood-text: #e8e0f0; --mood-text-muted: #9b8fb5; --mood-accent: #9b7fd4; --mood-accent-soft: #2d2640; --mood-accent-text: #ffffff; --mood-border: #342d45; --mood-success: #6ee7b7; --mood-warning: #fcd34d; --mood-error: #fca5a5; --mood-gradient: linear-gradient(135deg, #1a1625 0%, #231e30 100%); --mood-shadow: rgba(155, 127, 212, 0.12); --mood-status-prepa: #4c1d95; --mood-status-prepa-text: #ddd6fe; --mood-status-vote: #312e81; --mood-status-vote-text: #c7d2fe; --mood-status-vigueur: #064e3b; --mood-status-vigueur-text: #a7f3d0; --mood-status-clos: #2d2640; --mood-status-clos-text: #9b8fb5; } /* -------------------------------------------------------------------------- Grave — Serieux et solennel (Dark) -------------------------------------------------------------------------- */ .mood-grave { --mood-bg: #141518; --mood-surface: #1c1d21; --mood-surface-hover: #262420; --mood-text: #e5e5e0; --mood-text-muted: #8a8a85; --mood-accent: #d4a545; --mood-accent-soft: #262420; --mood-accent-text: #141518; --mood-border: #2a2b30; --mood-success: #86efac; --mood-warning: #fde68a; --mood-error: #fca5a5; --mood-gradient: linear-gradient(135deg, #141518 0%, #1c1d21 100%); --mood-shadow: rgba(212, 165, 69, 0.10); --mood-status-prepa: #78350f; --mood-status-prepa-text: #fde68a; --mood-status-vote: #1e3a5f; --mood-status-vote-text: #93c5fd; --mood-status-vigueur: #14532d; --mood-status-vigueur-text: #86efac; --mood-status-clos: #27272a; --mood-status-clos-text: #a1a1aa; } /* ========================================================================== Base Utilities ========================================================================== */ /* Transition all mood changes smoothly */ body { transition: background-color 0.3s ease, color 0.3s ease; } /* Status labels — clickable pill style */ .status-pill { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; user-select: none; } .status-pill:hover { filter: brightness(0.92); transform: scale(1.05); } .status-pill.active { ring: 2px; ring-offset: 2px; } .status-prepa { background: var(--mood-status-prepa); color: var(--mood-status-prepa-text); } .status-vote { background: var(--mood-status-vote); color: var(--mood-status-vote-text); } .status-vigueur { background: var(--mood-status-vigueur); color: var(--mood-status-vigueur-text); } .status-clos { background: var(--mood-status-clos); color: var(--mood-status-clos-text); }