/* css/hostome-tokens.css Source canonique UNIQUE de tous les tokens de design (variables --*), base ET --ui-*, thème clair et sombre. Mission ELIMINATE_APP_CSS_DEPENDENCY_FROM_ALL_PRODUCTION_PAGES. Etendu le 2026-07-27 : ce fichier ne contenait jusqu'ici que les variables --ui-* (cf. historique ci-dessous). Il contient desormais AUSSI les tokens de base (--bg, --surface, --t1..t4, --line, --shadow-*, --accent*, --blue/ --green/--purple/--rose, alias --ms-*) copies verbatim depuis app.css L1-85 (root + [data-theme="dark"]), strictement inchanges caractere pres. Ces tokens de base etaient jusqu'ici dupliques individuellement dans certaines feuilles de page (book.css, avant cette mission) faute d'un emplacement central — c'est exactement la classe de dette que cette mission ferme : plus aucune page ne doit dupliquer ces tokens, toutes doivent charger ce fichier. Ordre de chargement requis sur toute page : css/hostome-tokens.css css/hostome-ui.css css/pages/.css (le cas echeant) ===== Historique (partie --ui-*, inchangee) ===== Cree le 2026-07-18, a partir de HOSTOME_UI_DESIGN_TOKENS_PROVENANCE_AND_AUTONOMY_AUDIT. Les memes declarations --ui-* restent, a ce jour, egalement dans app.css (bloc "UI DESIGN SYSTEM") pour compatibilite ascendante avec les pages n'ayant pas encore ete migrees hors de app.css au moment de cette mission - ce doublon disparait definitivement avec la suppression de app.css. */ /* ===== Tokens de base (app.css L1-85, copie verbatim) ===== */ :root { /* Surfaces */ --bg: #F4F4F6; --bg-soft: #ECECEF; --surface: #FFFFFF; --surface-2: #FAFAFB; --surface-3: #F4F4F6; /* Lignes & ombres */ --line: rgba(12, 12, 16, 0.07); --line-strong: rgba(12, 12, 16, 0.12); --shadow-1: 0 1px 0 rgba(12,12,16,0.04), 0 1px 2px rgba(12,12,16,0.04); --shadow-2: 0 1px 0 rgba(12,12,16,0.04), 0 8px 24px -10px rgba(12,12,16,0.12); --shadow-pop: 0 4px 14px -2px rgba(12,12,16,0.18), 0 1px 2px rgba(12,12,16,0.08); /* Texte */ --t1: #0C0C10; --t2: #46464C; --t3: #76767E; --t4: #A6A6AE; /* ── Hostome canonical interactive primary (mission GLOBAL-UI-DARK-THEME) ── ONE source for the brand/interactive colour, light + dark. Every generic primary (buttons, links, active nav, selected tabs, focus, toggles, chips, add controls) resolves from here. Semantic colours (--green, --rose, --purple, --hostome-warning*) are NOT part of this and stay. */ --hostome-primary: #01378B; --hostome-primary-hover: #012A6B; --hostome-primary-soft: rgba(1, 55, 139, 0.10); --hostome-primary-contrast: #FFFFFF; --hostome-primary-rgb: 1, 55, 139; --hostome-deep: #09204D; --hostome-focus: var(--hostome-primary); --hostome-link: var(--hostome-primary); /* Sidebar / nav selected surface — light = solid dark pill (unchanged) */ --hostome-selected-bg: var(--t1); --hostome-selected-fg: #FFFFFF; --hostome-selected-border: var(--t1); /* No-photo / placeholder surfaces — a deep, visibly-blue tone in BOTH themes. Never the bright primary (#6EA8FF) as a large solid fill. */ --hostome-placeholder-bg: linear-gradient(135deg, #2D6FA3 0%, #09204D 100%); --hostome-placeholder-fg: #E8F1FF; /* Accent — now the canonical Hostome primary (was orange #F5874D). Kept as an alias so the ~existing var(--accent*) call sites follow the one token source instead of a per-page fork. */ --accent-rgb: var(--hostome-primary-rgb); --accent: var(--hostome-primary); --accent-2: var(--hostome-primary-hover); --accent-soft: var(--hostome-primary-soft); --accent-ring: rgba(1, 55, 139, 0.24); /* Status */ --blue: #3478F6; --blue-soft: #EAF1FE; --green: #1E9E5F; --green-soft: #E6F6EE; --purple: #7B5CF6; --purple-soft: #EFEAFD; --rose: #E0457B; --rose-soft: #FCE9F0; /* Semantic WARNING — amber. Distinct from the (now blue) brand primary. Same values as css/admin-support-theme.css so customer + internal share one warning language. */ --hostome-warning: #F59E0B; --hostome-warning-fg: #92400E; --hostome-warning-bg: #FEF3C7; --hostome-warning-border: #FDE68A; /* Aliases compat (ancien systeme --ms-*) */ --ms-bg: var(--bg); --ms-surface: var(--surface); --ms-surface-2: var(--surface-3); --ms-border: var(--line-strong); --ms-border-light: var(--line); --ms-text-1: var(--t1); --ms-text-2: var(--t2); --ms-text-3: var(--t3); --ms-blue: var(--blue); --ms-blue-bg: var(--blue-soft); --ms-green: var(--green); --ms-orange: var(--accent); --ms-red: var(--rose); --ms-list-panel-width: 320px; } [data-theme="dark"] { /* Dark surfaces — mission GLOBAL-UI-DARK-THEME re-diagnostic: the previous dark values were legible but too FLAT (cards/inputs/dividers blended into the near-black background). Surfaces stepped up slightly, borders and muted text lifted so blocks/fields/sections detach clearly. */ --bg: #08080A; --bg-soft: #101014; --surface: #1A1A20; --surface-2: #212129; --surface-3: #2C2C36; --line: rgba(255, 255, 255, 0.12); --line-strong: rgba(255, 255, 255, 0.22); --shadow-1: 0 1px 0 rgba(255,255,255,0.02), 0 1px 2px rgba(0,0,0,0.5); --shadow-2: 0 1px 0 rgba(255,255,255,0.02), 0 8px 24px -10px rgba(0,0,0,0.6); --shadow-pop: 0 4px 14px -2px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5); --t1: #FAFAFB; --t2: #CDCDD4; --t3: #9BA0AC; --t4: #6E6E7A; /* Hostome canonical primary — dark: materially lighter than #01378B so it reads against the near-black surfaces (operator dark-mode finding). */ --hostome-primary: #7CB2FF; --hostome-primary-hover: #9AC4FF; --hostome-primary-soft: rgba(124, 178, 255, 0.16); --hostome-primary-contrast: #0A1524; --hostome-primary-rgb: 124, 178, 255; --hostome-deep: #12335F; /* Selected nav — a clearly perceptible blue-tinted surface + a solid accent edge bar + bright text. Unmistakable without a bright electric fill. */ --hostome-selected-bg: rgba(124, 178, 255, 0.20); --hostome-selected-fg: #EAF2FF; --hostome-selected-border: var(--hostome-primary); --hostome-placeholder-bg: linear-gradient(135deg, #3A82BE 0%, #1B3350 100%); --hostome-placeholder-fg: #EAF2FF; --accent-soft: var(--hostome-primary-soft); --accent-ring: rgba(124, 178, 255, 0.55); --hostome-warning: #F5B44C; --hostome-warning-fg: #FBBF5C; --hostome-warning-bg: rgba(245, 158, 11, 0.16); --hostome-warning-border: rgba(245, 158, 11, 0.40); --blue: #6CA6FF; --blue-soft: rgba(108, 166, 255, 0.18); --green: #3BC683; --green-soft: rgba(59, 198, 131, 0.18); --purple: #9881FF; --purple-soft: rgba(152, 129, 255, 0.18); --rose: #F46796; --rose-soft: rgba(244, 103, 150, 0.18); } /* ===== Tokens --ui-* (inchange depuis 2026-07-18) ===== */ /* --- app.css L30414-30451 (copie verbatim) --- */ /* Design tokens ----------------------------------------------------------- */ :root { /* --ui-color-primary follows --accent (which is the canonical Hostome primary on the operator product, and the page's own warm palette on the guest/booking surfaces that define their own --accent). */ --ui-color-primary: var(--accent); --ui-color-primary-hover: var(--accent-2); --ui-color-primary-contrast: var(--hostome-primary-contrast); --ui-color-danger: var(--rose); --ui-color-danger-hover: #c73564; --ui-bg-page: var(--bg); --ui-bg-page-soft: var(--bg-soft); --ui-bg-card: var(--surface); --ui-bg-muted: var(--surface-2); --ui-bg-control: var(--surface); --ui-border: var(--line); --ui-border-strong: var(--line-strong); --ui-text: var(--t1); --ui-text-muted: var(--t3); --ui-radius-xs: 8px; --ui-radius-sm: 10px; --ui-radius-md: 12px; --ui-radius-lg: 14px; --ui-radius-xl: 16px; --ui-shadow-sm: var(--shadow-1); --ui-shadow-md: var(--shadow-2); --ui-shadow-pop: var(--shadow-pop); --ui-space-1: 4px; --ui-space-2: 8px; --ui-space-3: 12px; --ui-space-4: 16px; --ui-space-5: 20px; --ui-space-6: 24px; --ui-font-xs: 11px; --ui-font-sm: 12.5px; --ui-font-md: 13.5px; --ui-font-lg: 16px; --ui-font-xl: 22px; --ui-button-height: 38px; --ui-back-size: 38px; --ui-transition: 0.15s ease; } /* --- app.css L30453-30455 (copie verbatim) --- */ [data-theme="dark"] { --ui-color-danger-hover: #f05689; } /* --- app.css L30797-30801 (copie verbatim, isolee de son bloc @media d'origine qui contient aussi des composants non copies ici) --- */ @media (max-width: 760px) { :root { --ui-button-height: 40px; --ui-back-size: 38px; } }