/* ============================================================================ tokens.css — single source of truth for colour across the whole app. Four AMBIANCES (themes), selected by (set by the teacher in the Espace enseignant, applied on every page via core/theme.js + the no-flash boot snippet): • (default / "calme") — doux, faible stimulation [:root] • "chaleur" — chaleureux, rond, accueillant • "energie" — vif, joueur, haute énergie • "focus" — sombre, salle obscure / projection Couleurs en oklch : accents à clarté/chroma partagés, seule la teinte change, pour des palettes toujours harmonieuses. Picto tiles stay light in every ambiance (--tile) so ARASAAC pictograms keep maximum legibility. MIGRATION BRIDGE: the redesign component layer (core/system.css) uses the new names below (--ink, --line, --joy, --good, --tile, --accent-2…). Pages not yet ported still reference the OLD names (--text, --border, --bg-color, --surface2, --orange, --card-bg, the --blue/--purple/… palette). Both are defined here, the old ones as var() of the new — so the app renders correctly all through the page-by-page migration. The static palette block goes away once the organizer is ported. ============================================================================ */ /* ---------- Default = Calme (doux, faible stimulation) ---------- */ :root { --bg: oklch(0.972 0.008 95); --surface: oklch(0.995 0.004 95); --surface-2: oklch(0.948 0.010 95); --ink: oklch(0.315 0.018 260); --ink-2: oklch(0.520 0.016 260); --line: oklch(0.892 0.010 95); --accent: oklch(0.620 0.058 195); /* sauge-teal apaisé */ --accent-ink: oklch(0.985 0.004 195); --accent-2: oklch(0.640 0.058 40); /* argile douce */ --joy: oklch(0.760 0.090 75); /* ambre tamisé — mise en évidence */ --good: oklch(0.660 0.072 150); /* vert choisi */ --tile: #ffffff; /* tuile picto — toujours claire */ --shadow-sm: 0 1px 2px oklch(0.3 0.02 260 / 0.06), 0 2px 6px oklch(0.3 0.02 260 / 0.05); --shadow-md: 0 6px 18px oklch(0.3 0.02 260 / 0.08), 0 1px 3px oklch(0.3 0.02 260 / 0.06); --shadow-lg: 0 18px 48px oklch(0.3 0.02 260 / 0.14); --ring: oklch(0.620 0.058 195 / 0.45); --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px; --ease: cubic-bezier(.34,1.3,.5,1); /* ---------- migration bridge: old names -> new system ---------- */ --text: var(--ink); --text-muted: var(--ink-2); --muted: var(--ink-2); --border: var(--line); --surface2: var(--surface-2); --surface-3: var(--surface-2); --orange: var(--accent); --accent-hover: var(--joy); --highlight: color-mix(in oklab, var(--joy) 70%, transparent); --bg-color: var(--bg); --text-color: var(--ink); --primary-color: var(--accent); --accent-color: var(--accent); --button-bg: var(--surface-2); --button-border: var(--line); --highlight-color: var(--highlight); --sidebar-bg: var(--surface-2); --card-bg: var(--surface-2); --success-color: var(--good); --danger-color: var(--danger); /* VTS category coding (one sense, one colour) */ --cat-visible: var(--accent); --cat-sens: var(--accent-2); --cat-reward: var(--good); /* static palette + feedback — used by the not-yet-ported organizer/editor. Removed once those pages adopt core/system.css. */ --danger: #e63946; --shape-active: #22d3ee; --blue: #60a5fa; --blue-dk: #2563eb; --purple: #a78bfa; --green: #34d399; --yellow: #fbbf24; --pink: #f472b6; --teal: #2dd4bf; } /* ---------- Chaleur (chaleureux, rond, accueillant) ---------- */ [data-theme="chaleur"] { --bg: oklch(0.962 0.020 72); --surface: oklch(0.992 0.012 72); --surface-2: oklch(0.940 0.024 70); --ink: oklch(0.330 0.030 45); --ink-2: oklch(0.520 0.034 50); --line: oklch(0.890 0.022 70); --accent: oklch(0.620 0.118 42); /* terracotta */ --accent-ink: oklch(0.992 0.010 70); --accent-2: oklch(0.700 0.110 78); /* ambre */ --joy: oklch(0.720 0.130 62); --good: oklch(0.625 0.100 142); --ring: oklch(0.620 0.118 42 / 0.42); } /* ---------- Énergie (vif, joueur, haute énergie) ---------- */ [data-theme="energie"] { --bg: oklch(0.972 0.018 230); --surface: oklch(0.998 0.006 230); --surface-2: oklch(0.945 0.026 250); --ink: oklch(0.300 0.040 265); --ink-2: oklch(0.500 0.040 265); --line: oklch(0.890 0.024 250); --accent: oklch(0.600 0.165 255); /* bleu électrique */ --accent-ink: oklch(0.995 0.006 255); --accent-2: oklch(0.640 0.175 350); /* magenta */ --joy: oklch(0.780 0.155 92); /* jaune vif */ --good: oklch(0.680 0.155 150); --ring: oklch(0.600 0.165 255 / 0.5); } /* ---------- Focus (sombre, salle obscure / projection) ---------- */ [data-theme="focus"] { --bg: oklch(0.205 0.022 262); --surface: oklch(0.262 0.022 262); --surface-2: oklch(0.305 0.022 262); --ink: oklch(0.962 0.010 262); --ink-2: oklch(0.745 0.018 262); --line: oklch(0.360 0.020 262); --accent: oklch(0.720 0.105 222); --accent-ink: oklch(0.205 0.022 262); --accent-2: oklch(0.740 0.095 300); --joy: oklch(0.815 0.120 82); --good: oklch(0.745 0.105 152); --tile: oklch(0.965 0.004 95); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4); --shadow-md: 0 8px 22px oklch(0 0 0 / 0.45); --shadow-lg: 0 20px 56px oklch(0 0 0 / 0.55); --ring: oklch(0.720 0.105 222 / 0.5); }