:root { /* ── Socle neutre · teinte par défaut = BLANC (clair, gris/blanc) ── Plus de beige : le clair par défaut est blanc/gris neutre. Chaque teinte (data-tone) redéfinit cette rampe plus bas. */ --sc-paper: #FFFFFF; --sc-surface: #FFFFFF; --sc-surface-2: #F4F5F7; --sc-ink: #0B0A08; --sc-text: #14161A; --sc-text-muted: #5B6470; --sc-text-subtle: #8A929E; --sc-border: #E9EBEF; --sc-border-strong: #DCDFE5; --sc-on-ink: #FFFFFF; /* texte sur encre (pill noire) */ /* Couleur primaire par tenant (surchargée a l'execution). Reste un ACCENT (pills, coches, états actifs, petites icônes, filets) : jamais un aplat de fond. */ --sc-primary: #F6AA1B; --sc-primary-ink: #2A1D00; /* texte sur primaire claire (recalculé par luminance au runtime) */ --sc-primary-hover: color-mix(in oklab, var(--sc-primary), black 10%); --sc-primary-weak: color-mix(in oklab, var(--sc-primary), white 82%); /* Teintes categorie (pastels desatures) */ --sc-tint-rose: #FBECE9; --sc-tint-rose-ink: #B4523E; --sc-tint-blue: #E9F0FB; --sc-tint-blue-ink: #2F6FEB; --sc-tint-amber: #FBF3E1; --sc-tint-amber-ink: #9A6C12; --sc-tint-mint: #E9F5EC; --sc-tint-mint-ink: #1E7A4D; --sc-tint-lilac: #F1EDFB; --sc-tint-lilac-ink: #6D45B7; /* Semantique */ --sc-success: #1E7A4D; --sc-success-weak: #E9F3EE; --sc-warning: #B7791F; --sc-warning-weak: #FBF1E0; --sc-danger: #C0392B; --sc-danger-weak: #FBECEA; /* Rayons (style tres arrondi / bento) */ --sc-r-sm: 10px; --sc-r-lg: 22px; --sc-r-xl: 26px; --sc-r-pill: 999px; /* Typographie (aucune serif) */ --sc-font-display: "Clash Display", "Bricolage Grotesque", system-ui, sans-serif; --sc-font-sans: "Inter", "Satoshi", system-ui, -apple-system, sans-serif; --sc-font-mono: "JetBrains Mono", ui-monospace, monospace; /* Espacement */ --sc-gap: 16px; --sc-pad-card: 22px; } /* ══════════════════════════════════════════════════════════════════ TEINTES DE SURFACE (branding.surface_tone) · rampes neutres curées AA Réglées par le super admin ET le propriétaire, jamais côté public. Posées via [data-tone] sur (light-mode gère la structure clair/sombre). Seules les définitions de teintes portent des hex : les composants n'utilisent que les tokens. La primaire du tenant reste un accent (jamais un fond). ══════════════════════════════════════════════════════════════════ */ /* ── CLAIRES (texte foncé) ── */ body[data-tone="blanc"] { --sc-paper:#FFFFFF; --sc-surface:#FFFFFF; --sc-surface-2:#F4F5F7; --sc-border:#E9EBEF; --sc-border-strong:#DCDFE5; --sc-ink:#0B0A08; --sc-text:#14161A; --sc-text-muted:#5B6470; --sc-text-subtle:#8A929E; --sc-on-ink:#FFFFFF; } body[data-tone="brume"] { --sc-paper:#F4F6F8; --sc-surface:#FFFFFF; --sc-surface-2:#EAEDF1; --sc-border:#DFE3E9; --sc-border-strong:#CFD5DD; --sc-ink:#12141A; --sc-text:#1B1E24; --sc-text-muted:#565E6B; --sc-text-subtle:#858D99; --sc-on-ink:#F4F6F8; } body[data-tone="ivoire"] { --sc-paper:#F5F2EC; --sc-surface:#FFFFFF; --sc-surface-2:#EFE9E0; --sc-border:#E4DDD1; --sc-border-strong:#D6CDBE; --sc-ink:#1A1712; --sc-text:#241F18; --sc-text-muted:#6B6357; --sc-text-subtle:#9A9184; --sc-on-ink:#F5F2EC; } /* ── SOMBRES (texte clair) ── */ body[data-tone="nuit"] { --sc-paper:#0C0D10; --sc-surface:#16181D; --sc-surface-2:#1E2127; --sc-border:#2A2E36; --sc-border-strong:#363B45; --sc-ink:#F5F7FA; --sc-text:#E8EBEF; --sc-text-muted:#A2AAB6; --sc-text-subtle:#757D8A; --sc-on-ink:#0C0D10; } body[data-tone="encre"] { --sc-paper:#000000; --sc-surface:#0B0C0E; --sc-surface-2:#141619; --sc-border:#23262C; --sc-border-strong:#30343B; --sc-ink:#FFFFFF; --sc-text:#F0F2F5; --sc-text-muted:#9AA2AE; --sc-text-subtle:#6E7682; --sc-on-ink:#000000; } /* Import polices (repo : Fontshare pour Clash Display / Satoshi ; sandbox CSP : Google Fonts pour Bricolage Grotesque / Inter) */ /* @import url('https://api.fontshare.com/v2/css?f[]=clash-display@600,700&f[]=satoshi@400,500,700&display=swap'); */ /* @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700&family=Inter:wght@400;500;600&display=swap'); */