/* ============================================================ Qorz — Theme tokens (tenant qorz.io) ============================================================ Override conditionnel. Activé via . Porté depuis Qorz_design_model/Qorz Design System.html. Doctrine : un tenant = une charte, posée à l'onboarding, immuable côté client. Cf. [[feedback-theme-per-tenant-immutable]]. Organisation : 1. Palette canonique Qorz (fond crème + accents oklch) 2. Typographie (Inter Tight + JetBrains Mono) 3. Surfaces & ink (mappées sur les --bg/--surface/--fg Qorz) 4. Override des tokens shell (--brand-primary, --service-a, --service-b…) pour que les composants existants se ré-habillent automatiquement. ============================================================ */ :root[data-tenant-theme="qorz"] { /* ─── 1. Palette Qorz ─────────────────────────────────────── */ --bg: #F6F3EC; --bg-2: #FBF9F3; --surface: #FFFFFF; --surface-2: #F1ECE1; --hair: #E0DACA; --hair-2: #C9C0AC; --fg: #1A1B1F; --fg-2: #3E4046; --fg-3: #6B6E76; --fg-4: #A0A4AC; --c-terracotta: oklch(58% 0.16 45); --c-terracotta-dim: oklch(78% 0.10 45); --c-blue: oklch(48% 0.10 200); --c-blue-dim: oklch(78% 0.05 200); --c-amber: oklch(70% 0.14 75); --c-amber-dim: oklch(82% 0.08 75); --c-sage: oklch(58% 0.09 145); --c-sage-dim: oklch(82% 0.05 145); --c-plum: oklch(42% 0.10 340); --c-plum-dim: oklch(78% 0.04 340); --c-red: oklch(54% 0.16 25); --c-red-dim: oklch(85% 0.06 25); /* ─── 2. Typographie Qorz ──────────────────────────────────── */ --f-sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ─── 3. Mapping vers les surfaces canoniques du shell ─────── */ /* Réécrit les variables consommées par les composants existants pour qu'ils se ré-habillent automatiquement sans toucher leur CSS. */ --surface: var(--bg-2); --surface-2: #F1ECE1; --border: var(--hair); --text: var(--fg); --text-muted: var(--fg-3); /* ─── 4. Override des tokens brand ARIA ────────────────────── */ /* Les composants existants (boutons, links, header) lisent --brand-primary / --brand-secondary. On les ré-aiguille vers la palette Qorz pour ne rien casser. */ --brand-primary: var(--c-terracotta); --brand-primary-dark: oklch(48% 0.16 45); --brand-secondary: var(--c-blue); --brand-secondary-dark: oklch(38% 0.10 200); /* Navigation Qorz : ne pas hériter du navy ARIA historique. */ --nav-bg: #25231F; --nav-bg-hover: #332D26; --nav-bg-active: #4A332B; --nav-fg: #F6F3EC; --nav-fg-muted: #C9C0AC; --nav-fg-active: #FFFFFF; --nav-accent: var(--brand-primary); /* Services / périmètres génériques. */ --service-a: var(--c-sage); --service-a-light: var(--c-sage-dim); --service-a-dark: oklch(48% 0.09 145); --service-b: var(--c-amber); --service-b-light: var(--c-amber-dim); --service-b-dark: oklch(58% 0.14 75); } /* ─── Body & masthead inspirations design model ─────────────── */ :root[data-tenant-theme="qorz"] body { background: #E8E3D6; color: var(--fg); font-family: var(--f-sans); font-feature-settings: "ss01" 1, "cv11" 1; -webkit-font-smoothing: antialiased; } /* "Sheet" centrale inspirée du Design System.html — appliquée uniquement aux pages marketing/landing (.qorz-sheet). Les écrans métier conservent leur layout app-shell standard. */ :root[data-tenant-theme="qorz"] .qorz-sheet { max-width: 1180px; margin: 0 auto; background: radial-gradient(ellipse 1600px 900px at 10% -6%, color-mix(in oklch, var(--c-terracotta) 9%, transparent), transparent 55%), radial-gradient(ellipse 1400px 900px at 96% 104%, color-mix(in oklch, var(--c-amber) 6%, transparent), transparent 60%), linear-gradient(165deg, #FBF9F3 0%, #F6F3EC 45%, #F0EBDD 100%); border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); min-height: 100vh; } :root[data-tenant-theme="qorz"] .qorz-masthead { padding: 72px 80px 40px; border-bottom: 1px solid var(--hair); display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; } :root[data-tenant-theme="qorz"] .qorz-masthead .lockup { display: flex; align-items: center; gap: 18px; } :root[data-tenant-theme="qorz"] .qorz-masthead .mark { width: 52px; height: 52px; flex: none; } :root[data-tenant-theme="qorz"] .qorz-masthead h1 { margin: 0; font-size: 44px; font-weight: 500; letter-spacing: -0.022em; } :root[data-tenant-theme="qorz"] .qorz-eyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-3); } /* Cards utilitaires (port direct du design system) */ :root[data-tenant-theme="qorz"] .qorz-card { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 24px; } :root[data-tenant-theme="qorz"] .qorz-card--terra { border-color: var(--c-terracotta-dim); } :root[data-tenant-theme="qorz"] .qorz-card--sage { border-color: var(--c-sage-dim); } :root[data-tenant-theme="qorz"] .qorz-card--amber { border-color: var(--c-amber-dim); }