/* ============================================================================ * Ultime Quest — PALETTE CANONIQUE (couleurs + tokens communs) * * SOURCE UNIQUE partagée : servie par play.* et chargée par le www en HTTP * cross-origin (). Ne contient QUE des * variables : aucun @font-face, aucun layout, aucun décor (::before/::after). * * Cette palette porte TOUS les tokens de thème partagés play↔www : * - polices : --font-body, --font-ui, --font-mono, --font-display * - couleurs : --bg, --surface, --card, --border, --fg, --fg-muted, * --accent, --accent-soft, --success, --danger, --wine, --gold-glow * - typographie: --theme-leading (interlignage), --theme-tracking (letter-spacing) * - blocs récit (PWA) : --b-*-bg / --b-*-fg * La TAILLE de police (knob --ui-font-size sur ) vit dans les CSS de * structure (main.css / styles.css) car elle s'applique à la racine. * * sélectionne la palette. 11 ambiances : * theme-forge : 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-donjon-clair : pierre claire, ardoise, cuivre (petit frère clair) * theme-saga : bois sombre, cuir tanné, bronze, lichen * theme-pirate : or doublon, vin rouge, bois goudronné * theme-pirate-clair : parchemin solaire, or doublon, vin (petit frère clair) * theme-futuriste : néon cyan, rose magenta, nuit cyberpunk (monospace) * theme-clair : parchemin clair universel, sépia * theme-lisibilite-clair : lisibilité max clair (Atkinson Hyperlegible) * theme-lisibilite-sombre: lisibilité max foncé (Atkinson Hyperlegible) * ============================================================================ */ /* Tokens communs à toutes les ambiances (polices, rayons, typo par défaut). */ body { --font-body: 'Merriweather', Georgia, 'Times New Roman', serif; --font-display: 'Cinzel', Georgia, serif; --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'Consolas', monospace; --radius: 12px; --radius-sm: 8px; /* Typographie par défaut (surchargée par certains thèmes ci-dessous). */ --theme-leading: 1.6; --theme-tracking: 0; /* Échelle typographique UNIQUE (en rem → dérive de la base ). Tous les * font-size de l'UI doivent piocher ici : un seul jeu de tailles, cohérent * partout, qui scale ensemble avec le knob de taille. */ --fs-2xs: 0.65rem; --fs-xs: 0.72rem; --fs-sm: 0.82rem; --fs-md: 0.92rem; --fs-base: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.35rem; --fs-2xl: 1.6rem; --fs-3xl: 2rem; --fs-4xl: 2.6rem; --fs-5xl: 3.6rem; --fs-6xl: 4.2rem; } /* ---- THEME-FORGE — charbon + braise + acier ----------------------------- */ body.theme-forge { --bg: #100c0a; --surface: #1d1612; --card: #261d18; --border: #3a2c22; --fg: #e8e1d3; --fg-muted: #9a8d7d; --accent: #e0903a; --accent-soft: rgba(224, 144, 58, 0.16); --success: #5cb0a1; --danger: #e0533f; --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: #a8967a; --accent: #d4a857; --accent-soft: rgba(212, 168, 87, 0.15); --success: #7caa52; --danger: #c5462f; --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: #8b96ac; --accent: #d39a4a; --accent-soft: rgba(192, 138, 62, 0.14); --success: #6db58e; --danger: #cf5560; --wine: #c43a58; --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-DONJON-CLAIR — pierre claire + ardoise + cuivre (petit frère) - */ body.theme-donjon-clair { --bg: #eceff5; --surface: #dfe5ee; --card: #f6f8fb; --border: #aab6c8; --fg: #1b232f; --fg-muted: #586577; --accent: #95611f; --accent-soft: rgba(149, 97, 31, 0.13); --success: #2f7d57; --danger: #a3303a; --wine: #6c2030; --gold-glow: rgba(149, 97, 31, 0.3); --shadow: 0 6px 24px rgba(30, 40, 60, 0.16); --shadow-sm: 0 2px 8px rgba(30, 40, 60, 0.09); --theme-leading: 1.62; --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; } /* ---- THEME-SAGA — bois sombre + bronze + lichen ------------------------- */ body.theme-saga { --bg: #1b1812; --surface: #25201a; --card: #2a241c; --border: #463c2e; --fg: #e3d8c0; --fg-muted: #a09076; --accent: #bd8c4c; --accent-soft: rgba(156, 116, 64, 0.16); --success: #82a84a; --danger: #c5432f; --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-PIRATE — or doublon + vin rouge + bois goudronné ------------- * Inspiré de l'aventure « Les Brumes de Sang et d'Or ». Palette flibustière : * fond charbon, accent or doublon, danger vin de la Jamaïque, bordures bois. */ body.theme-pirate { --bg: #09090a; --surface: #161618; --card: #1f1f21; --border: #3a2a1d; --fg: #f5f1e8; --fg-muted: #c9c2b4; --accent: #d2a44a; --accent-soft: rgba(200, 154, 60, 0.16); --success: #80a84a; --danger: #c43a5a; --wine: #cc1530; --gold-glow: rgba(212, 160, 23, 0.55); --shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(200, 154, 60, 0.05); --shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.4); --font-body: Georgia, 'Times New Roman', serif; --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: #3a2024; --b-combat-fg: #f0a7a8; --b-end-bg: #1a3030; --b-end-fg: #a3e0e0; } /* ---- THEME-PIRATE-CLAIR — parchemin solaire + or doublon + vin (petit frère) */ body.theme-pirate-clair { --bg: #f3e7cf; --surface: #ecdcbd; --card: #f9f1dc; --border: #c7ad7e; --fg: #2b2113; --fg-muted: #6e5c3c; --accent: #8a5e16; --accent-soft: rgba(138, 94, 22, 0.14); --success: #4f7a2a; --danger: #962542; --wine: #8b1e3f; --gold-glow: rgba(138, 94, 22, 0.35); --shadow: 0 6px 24px rgba(60, 40, 15, 0.18); --shadow-sm: 0 2px 8px rgba(60, 40, 15, 0.1); --theme-leading: 1.62; --font-body: Georgia, 'Times New Roman', serif; --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; } /* ---- THEME-FUTURISTE — néon cyan + rose magenta + nuit cyberpunk -------- * Inspiré de l'aventure « Le Mystère de la Fréquence Fantôme ». Palette * synthwave : nuit bleutée, accent cyan néon, danger rose magenta, monospace. */ body.theme-futuriste { --bg: #0a0e1a; --surface: #131829; --card: #1a2138; --border: #2a3458; --fg: #d8f0ff; --fg-muted: #8aa6c4; --accent: #00d2ff; --accent-soft: rgba(0, 210, 255, 0.16); --success: #00ff88; --danger: #ff3b6b; --wine: #b8003e; --gold-glow: rgba(0, 210, 255, 0.55); --shadow: 0 8px 28px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 210, 255, 0.06); --shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.5); --font-body: 'Courier New', ui-monospace, monospace; --theme-leading: 1.62; --theme-tracking: 0.01em; --b-start-bg: #0e2a35; --b-start-fg: #8ce5ff; --b-para-bg: #1a2a45; --b-para-fg: #a0bce0; --b-choice-bg: #1a2f3a; --b-choice-fg: #7fdfff; --b-effect-bg: #2a1a45; --b-effect-fg: #c2a7ff; --b-dice-bg: #3a1a3a; --b-dice-fg: #ff8cc2; --b-skill-bg: #1a3a2a; --b-skill-fg: #8cffb8; --b-combat-bg: #3a1024; --b-combat-fg: #ff7aa3; --b-end-bg: #0e3540; --b-end-fg: #8ce5ff; } /* ---- THEME-CLAIR — parchemin clair universel ---------------------------- */ body.theme-clair { --bg: #f5efe0; --surface: #ede4ce; --card: #e3d8be; --border: #c4b896; --fg: #29251c; --fg-muted: #5f553f; --accent: #7a4a14; --accent-soft: rgba(138, 90, 31, 0.13); --success: #36702f; --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); --theme-leading: 1.62; --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; } /* ---- THEME-LISIBILITE-CLAIR — lisibilité maximale, clair (Atkinson) ------ * Police haute lisibilité (Atkinson Hyperlegible), contraste fort, interligne * et inter-lettrage aérés. Pensé pour la dyslexie / basse vision. */ body.theme-lisibilite-clair { --bg: #ffffff; --surface: #f0f1f3; --card: #ffffff; --border: #5c5c5c; --fg: #111111; --fg-muted: #3a3a3a; --accent: #14489e; --accent-soft: rgba(20, 72, 158, 0.10); --success: #1a6b2e; --danger: #b3261e; --wine: #b3261e; --gold-glow: rgba(20, 72, 158, 0.35); --shadow: 0 4px 18px rgba(0, 0, 0, 0.12); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08); --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif; --font-display: 'Atkinson Hyperlegible', system-ui, sans-serif; --font-ui: 'Atkinson Hyperlegible', system-ui, sans-serif; --theme-leading: 1.8; --theme-tracking: 0.01em; --b-start-bg: #d7f0d4; --b-start-fg: #13401a; --b-para-bg: #d6e2f6; --b-para-fg: #16306e; --b-choice-bg: #f3e2bd; --b-choice-fg: #5a3f10; --b-effect-bg: #e6dbf3; --b-effect-fg: #3a1f6e; --b-dice-bg: #f6d8e4; --b-dice-fg: #6e1640; --b-skill-bg: #e7ecbf; --b-skill-fg: #3f4410; --b-combat-bg: #f6d6cc; --b-combat-fg: #6e2410; --b-end-bg: #cfe9ec; --b-end-fg: #114448; } /* ---- THEME-LISIBILITE-SOMBRE — lisibilité maximale, foncé (Atkinson) ----- */ body.theme-lisibilite-sombre { --bg: #0d0d0f; --surface: #1b1b1f; --card: #161618; --border: #7a7a82; --fg: #f6f6f8; --fg-muted: #c2c2c8; --accent: #7fb2ff; --accent-soft: rgba(127, 178, 255, 0.14); --success: #6fe08a; --danger: #ff8079; --wine: #ff8079; --gold-glow: rgba(127, 178, 255, 0.4); --shadow: 0 8px 28px rgba(0, 0, 0, 0.7); --shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.5); --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif; --font-display: 'Atkinson Hyperlegible', system-ui, sans-serif; --font-ui: 'Atkinson Hyperlegible', system-ui, sans-serif; --theme-leading: 1.8; --theme-tracking: 0.01em; --b-start-bg: #16352c; --b-start-fg: #aef0cf; --b-para-bg: #1a2a48; --b-para-fg: #b8d0f5; --b-choice-bg: #3a2c14; --b-choice-fg: #f0cf94; --b-effect-bg: #2a2348; --b-effect-fg: #cbb8f5; --b-dice-bg: #3f1f42; --b-dice-fg: #f0a8d4; --b-skill-bg: #283a16; --b-skill-fg: #cfe89a; --b-combat-bg: #421c24; --b-combat-fg: #f5a8ae; --b-end-bg: #123842; --b-end-fg: #a8e0ee; }