/* ============================================================================ * Ultime Quest — thèmes * * Architecture : sélectionne la palette. 5 ambiances * fantasy interchangeables + un mode clair "parchemin". * * theme-forge (défaut) : charbon, braise rouge, acier bleuté, or chaud * theme-grimoire : cuir sombre, parchemin brûlé, or patiné * theme-donjon : nuit profonde, pierre humide, torche cuivre * theme-saga : bois sombre, cuir tanné, bronze, lichen * theme-clair : parchemin clair universel, sépia * * Variables exposées : --bg, --surface, --card, --border, --fg, --fg-muted, * --accent, --accent-soft, --success, --danger, --wine, --gold-glow, * --shadow, --shadow-sm, --font-body, --font-ui, --font-mono, --radius, * --radius-sm, plus les couleurs de badges debug (--b-*). * ============================================================================ */ /* Police de corps littéraire (titres = Cinzel, défini dans main.css). * Si l'utilisateur place ce WOFF2 dans /adventure/fonts/, il est utilisé. * Sinon font-display:swap → fallback Georgia immédiat. */ @font-face { font-family: 'EB Garamond'; src: url('fonts/eb-garamond-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'EB Garamond'; src: url('fonts/eb-garamond-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'EB Garamond'; src: url('fonts/eb-garamond-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Tokens communs à toutes les ambiances (rayons, fontes UI/mono, etc.) */ body { --font-body: 'EB Garamond', Georgia, 'Times New Roman', serif; --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'Consolas', monospace; --radius: 12px; --radius-sm: 8px; } /* ---- THEME-FORGE — charbon + braise + acier ----------------------------- */ body.theme-forge { --bg: #100c0a; --surface: #1d1612; --card: #261d18; --border: #3a2c22; --fg: #e8e1d3; --fg-muted: #8c8073; --accent: #e0903a; --accent-soft: rgba(224, 144, 58, 0.16); --success: #4a9c8e; --danger: #c93a28; --wine: #7a2b2b; --gold-glow: rgba(224, 144, 58, 0.5); --shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 140, 60, 0.04); --shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.4); --b-start-bg: #2a3a2a; --b-start-fg: #b3e0a3; --b-para-bg: #2a3045; --b-para-fg: #a7b8e0; --b-choice-bg: #3a322a; --b-choice-fg: #e8b478; --b-effect-bg: #2d2a3a; --b-effect-fg: #c2a7e0; --b-dice-bg: #3a2a3a; --b-dice-fg: #e0a7c2; --b-skill-bg: #3a3a2a; --b-skill-fg: #d8e0a3; --b-combat-bg: #4a201a; --b-combat-fg: #f2a89a; --b-end-bg: #1a3030; --b-end-fg: #a3e0e0; } /* ---- THEME-GRIMOIRE — cuir + parchemin brûlé + or patiné ---------------- */ body.theme-grimoire { --bg: #1a1410; --surface: #251b14; --card: #2e221a; --border: #46362a; --fg: #ead7b0; --fg-muted: #968563; --accent: #d4a857; --accent-soft: rgba(212, 168, 87, 0.15); --success: #6b9a4a; --danger: #a83423; --wine: #6c2424; --gold-glow: rgba(212, 168, 87, 0.6); --shadow: 0 6px 24px rgba(0, 0, 0, 0.5); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --b-start-bg: #2a3a2a; --b-start-fg: #b3e0a3; --b-para-bg: #2a3045; --b-para-fg: #a7b8e0; --b-choice-bg: #3a322a; --b-choice-fg: #e0c7a3; --b-effect-bg: #2d2a3a; --b-effect-fg: #c2a7e0; --b-dice-bg: #3a2a3a; --b-dice-fg: #e0a7c2; --b-skill-bg: #3a3a2a; --b-skill-fg: #d8e0a3; --b-combat-bg: #3a2a2a; --b-combat-fg: #e0a7a3; --b-end-bg: #1a3030; --b-end-fg: #a3e0e0; } /* ---- THEME-DONJON — nuit profonde + pierre + torche --------------------- */ body.theme-donjon { --bg: #0c1118; --surface: #141d2a; --card: #182231; --border: #2a3a55; --fg: #d8dce8; --fg-muted: #7a8499; --accent: #c08a3e; --accent-soft: rgba(192, 138, 62, 0.14); --success: #6db58e; --danger: #b03a40; --wine: #6c2030; --gold-glow: rgba(192, 138, 62, 0.5); --shadow: 0 8px 28px rgba(0, 0, 0, 0.6); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45); --b-start-bg: #1f3530; --b-start-fg: #a6e0c8; --b-para-bg: #1f2a45; --b-para-fg: #a7bce0; --b-choice-bg: #382b1a; --b-choice-fg: #e0c08a; --b-effect-bg: #25243a; --b-effect-fg: #b8a8e0; --b-dice-bg: #3a2540; --b-dice-fg: #d0a0d8; --b-skill-bg: #2f3a1f; --b-skill-fg: #c5d68a; --b-combat-bg: #3a1f24; --b-combat-fg: #e0a0a8; --b-end-bg: #1a2f3a; --b-end-fg: #a0c8e0; } /* ---- THEME-SAGA — bois sombre + bronze + lichen ------------------------- */ body.theme-saga { --bg: #1b1812; --surface: #25201a; --card: #2a241c; --border: #463c2e; --fg: #e3d8c0; --fg-muted: #8e8166; --accent: #9c7440; --accent-soft: rgba(156, 116, 64, 0.16); --success: #6b8e3a; --danger: #a83323; --wine: #5a2424; --gold-glow: rgba(156, 116, 64, 0.55); --shadow: 0 6px 22px rgba(0, 0, 0, 0.5); --shadow-sm: 0 2px 9px rgba(0, 0, 0, 0.35); --b-start-bg: #2a3a2a; --b-start-fg: #b3e0a3; --b-para-bg: #2a3045; --b-para-fg: #a7b8e0; --b-choice-bg: #3a322a; --b-choice-fg: #e0c7a3; --b-effect-bg: #2d2a3a; --b-effect-fg: #c2a7e0; --b-dice-bg: #3a2a3a; --b-dice-fg: #e0a7c2; --b-skill-bg: #3a3a2a; --b-skill-fg: #d8e0a3; --b-combat-bg: #3a2a2a; --b-combat-fg: #e0a7a3; --b-end-bg: #1a3030; --b-end-fg: #a3e0e0; } /* ---- THEME-CLAIR — parchemin clair universel ---------------------------- */ body.theme-clair { --bg: #f5efe0; --surface: #ede4ce; --card: #e3d8be; --border: #c4b896; --fg: #29251c; --fg-muted: #6b6049; --accent: #8a5a1f; --accent-soft: rgba(138, 90, 31, 0.13); --success: #3f7e3f; --danger: #9e3a26; --wine: #6c2424; --gold-glow: rgba(138, 90, 31, 0.35); --shadow: 0 6px 24px rgba(70, 50, 20, 0.18); --shadow-sm: 0 2px 8px rgba(70, 50, 20, 0.1); --b-start-bg: #d2e8cf; --b-start-fg: #1f4a1f; --b-para-bg: #d4dceb; --b-para-fg: #1f2e5a; --b-choice-bg: #e8d8b8; --b-choice-fg: #5a3f1a; --b-effect-bg: #dcd0e8; --b-effect-fg: #3a1f5a; --b-dice-bg: #ebd0dc; --b-dice-fg: #5a1f3a; --b-skill-bg: #e0e2bc; --b-skill-fg: #4a4a1a; --b-combat-bg: #ebcfc6; --b-combat-fg: #5a2a1a; --b-end-bg: #c8dee0; --b-end-fg: #1a4a4a; } /* Texture parchemin : multiply en clair (taches discrètes), overlay sinon. */ body.theme-clair::before { opacity: 0.07; mix-blend-mode: multiply; } /* Touche signature de la forge : très faibles particules d'étincelles * en superposition sur le fond. Désactivées si reduced-motion. */ body.theme-forge::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 18% 30%, rgba(224, 144, 58, 0.05) 0%, transparent 28%), radial-gradient(circle at 82% 70%, rgba(201, 58, 40, 0.04) 0%, transparent 32%); mix-blend-mode: screen; } @media (prefers-reduced-motion: reduce) { body.theme-forge::after { display: none; } }