/* ============================================================
Powerchef — Design tokens v0.2
Source de vérité : docs/powerchef_brand_guide.md
+ BRIEF_PHASE2_REFONDATION.md §2.1 (signalétique)
Règle stricte : 70% ivoire / 25% encre / 5% carmin (signal).
v0.2 : ajout palette signalétique chaude (action / warn / alert / ok).
============================================================ */
/* Polices via Google Fonts — à inclure dans le :
*/
:root {
/* ---------- Couleurs (mode clair par défaut) ---------- */
--pc-ivory: #FBF9F4;
--pc-ivory-warm: #F4EFE6; /* ivoire un cran plus chaud — fond panneaux visuels, surfaces "en retrait" */
--pc-ink: #0E1620;
--pc-carmin: #A32028;
--pc-ink-soft: #3A3A40;
--pc-ink-faint: #7A7A82;
--pc-border: #E8E2D4;
--pc-surface: #FFFFFF;
--pc-paper-card: #FFFFFF; /* fond des cartes et cadres visuels — distinct de --pc-surface pour permettre un blanc papier net sur fond ivoire */
--pc-carmin-deep: #7C181E;
--pc-carmin-soft: #F3DCDD;
/* ---------- Signalétique métier (palette chaude étendue, v0.2) ----------
Règle : un rôle = une paire (foreground + background pâle).
À utiliser pour signaux d'écart, statuts de données, callouts.
Aucune couleur froide. Le carmin reste le pivot de décision. */
/* Action neutre — CTAs secondaires, lien TOC actif, hover de structure */
--pc-action: var(--pc-ink);
/* Warn — sureffectif léger, attention, donnée fragile */
--pc-warn: #A0560A;
--pc-warn-bg: #FAF1E0;
/* Alert — sous-effectif marqué, blocage, état critique
(dérivé carmin, déjà existant, exposé sous des noms sémantiques) */
--pc-alert: var(--pc-carmin-deep);
--pc-alert-bg: var(--pc-carmin-soft);
/* OK — aligné, écart nul, donnée fraîche */
--pc-ok: #5A6B3E;
--pc-ok-bg: #EDEEDE;
/* Sémantiques v0.1 — conservés comme alias rétro-compatibles.
Préférer la palette signalétique ci-dessus pour les nouvelles UI. */
--pc-success: var(--pc-ok);
--pc-warning: var(--pc-warn);
--pc-error: var(--pc-alert);
--pc-info: var(--pc-ink-soft);
/* Couleur Sodexo — UNIQUEMENT en footer */
--pc-sodexo-blue: #0033A0;
/* ---------- Typographie ---------- */
--pc-font-display: 'Fraunces', Georgia, serif;
--pc-font-text: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
--pc-font-mono: 'JetBrains Mono', Menlo, Consolas, monospace;
--pc-fw-regular: 400;
--pc-fw-medium: 500;
--pc-fw-semibold: 600;
--pc-fw-bold: 700;
--pc-fs-xs: 0.75rem; /* 12px */
--pc-fs-sm: 0.875rem; /* 14px */
--pc-fs-base: 1rem; /* 16px */
--pc-fs-lg: 1.125rem; /* 18px */
--pc-fs-xl: 1.25rem; /* 20px */
--pc-fs-2xl: 1.5rem; /* 24px */
--pc-fs-3xl: 2rem; /* 32px */
--pc-fs-4xl: 2.75rem; /* 44px */
--pc-fs-5xl: 3.5rem; /* 56px */
--pc-lh-tight: 1.15;
--pc-lh-snug: 1.3;
--pc-lh-normal: 1.5;
--pc-lh-loose: 1.7;
--pc-tr-tighter: -0.02em;
--pc-tr-tight: -0.01em;
--pc-tr-normal: 0em;
--pc-tr-wide: 0.05em;
--pc-tr-wider: 0.1em;
/* ---------- Espacements (échelle 4) ---------- */
--pc-sp-0: 0;
--pc-sp-1: 0.25rem;
--pc-sp-2: 0.5rem;
--pc-sp-3: 0.75rem;
--pc-sp-4: 1rem;
--pc-sp-5: 1.25rem; /* 20px */
--pc-sp-6: 1.5rem;
--pc-sp-8: 2rem;
--pc-sp-12: 3rem;
--pc-sp-16: 4rem;
--pc-sp-24: 6rem;
/* ---------- Radius ---------- */
--pc-radius-sm: 4px;
--pc-radius-md: 8px;
--pc-radius-lg: 12px;
--pc-radius-xl: 16px;
--pc-radius-logo: 18%;
--pc-radius-full: 9999px;
/* ---------- Ombres (chaudes, jamais bleutées) ---------- */
--pc-shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.06);
--pc-shadow-md: 0 4px 12px rgba(60, 40, 20, 0.08), 0 1px 2px rgba(60, 40, 20, 0.04);
--pc-shadow-lg: 0 12px 32px rgba(60, 40, 20, 0.12), 0 2px 6px rgba(60, 40, 20, 0.06);
/* ---------- Motion (toujours < 300ms) ---------- */
--pc-dur-fast: 150ms;
--pc-dur-base: 200ms;
--pc-dur-slow: 300ms;
--pc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--pc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
/* ---------- Icônes (Lucide, stroke 1.75, deux tailles) ---------- */
--pc-icon-stroke: 1.75;
--pc-icon-sm: 16px;
--pc-icon-md: 20px;
/* ---------- Breakpoints (info — utilisés en media queries) ---------- */
--pc-bp-tablet: 640px;
--pc-bp-desktop: 1024px;
--pc-bp-wide: 1280px;
/* ---------- Layout / grille (v1 — Spec 09 Grid contract) ----------
Contrat de mise en page : un container unique, une grille 12 colonnes,
une échelle de mesure de lecture. Règle d'usage : STYLE_GUIDE.md §1bis. */
--pc-container-max: 1120px;
--pc-container-gutter: var(--pc-sp-6); /* 24px — desktop */
--pc-container-gutter-mobile: var(--pc-sp-4); /* 16px — mobile */
--pc-grid-columns: 12;
--pc-grid-gap: var(--pc-sp-6); /* 24px — desktop */
--pc-grid-gap-mobile: var(--pc-sp-4); /* 16px — mobile */
--pc-measure-narrow: 52ch;
--pc-measure-default: 64ch;
--pc-measure-wide: 72ch;
/* ---------- Aliases sémantiques ---------- */
--pc-bg: var(--pc-ivory);
--pc-fg: var(--pc-ink);
--pc-fg-muted: var(--pc-ink-soft);
--pc-fg-faint: var(--pc-ink-faint);
--pc-accent: var(--pc-carmin);
}
/* ============================================================
Mode sombre — activations possibles :
- `html[data-theme="dark"]` (toggle global + anti-flash, Phase 5)
- `:root.dark` (alias historique)
- `.pc-theme-dark` (scope local, démos light/dark côte-à-côte)
Fond : quasi-noir chaud (jamais bleuté).
============================================================ */
html[data-theme="dark"],
:root.dark,
.pc-theme-dark {
--pc-ivory: #1A1714;
--pc-ivory-warm: #1F1C18; /* surface "en retrait" en mode dark */
--pc-ink: #F2EADB;
--pc-carmin: #D43A44;
--pc-ink-soft: #A8A095;
--pc-ink-faint: #7A7165;
--pc-border: #2E2925;
--pc-surface: #23201C;
--pc-paper-card: #23201C; /* en dark, le fond carte rejoint --pc-surface (pas de "blanc papier") */
--pc-carmin-deep: #A32028;
--pc-carmin-soft: #3A1F22;
/* Signalétique métier — variantes mode sombre (foregrounds éclaircis,
backgrounds très foncés tirés vers la même teinte). */
--pc-action: var(--pc-ink);
--pc-warn: #E0A85A;
--pc-warn-bg: #2E2418;
--pc-alert: var(--pc-carmin);
--pc-alert-bg: var(--pc-carmin-soft);
--pc-ok: #9BB079;
--pc-ok-bg: #232A1B;
/* Alias rétro-compatibles v0.1 */
--pc-success: var(--pc-ok);
--pc-warning: var(--pc-warn);
--pc-error: var(--pc-alert);
--pc-info: var(--pc-ink-soft);
--pc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--pc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
--pc-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
}
/* ============================================================
Reset doux et bases globales
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
color-scheme: light;
}
html[data-theme="dark"] {
color-scheme: dark;
}
html, body {
margin: 0;
padding: 0;
background: var(--pc-bg);
color: var(--pc-fg);
font-family: var(--pc-font-text);
font-size: var(--pc-fs-base);
line-height: var(--pc-lh-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: background-color var(--pc-dur-base) var(--pc-ease-out),
color var(--pc-dur-base) var(--pc-ease-out);
}
h1, h2, h3, h4 {
font-family: var(--pc-font-display);
font-weight: var(--pc-fw-semibold);
letter-spacing: var(--pc-tr-tight);
line-height: var(--pc-lh-tight);
margin: 0;
font-variation-settings: 'opsz' 36;
}
h1 { font-size: var(--pc-fs-4xl); letter-spacing: var(--pc-tr-tighter); font-variation-settings: 'opsz' 96; }
h2 { font-size: var(--pc-fs-3xl); }
h3 { font-size: var(--pc-fs-2xl); }
h4 { font-size: var(--pc-fs-xl); }
code, kbd, samp, pre {
font-family: var(--pc-font-mono);
font-size: 0.95em;
letter-spacing: var(--pc-tr-wide);
}
a {
color: var(--pc-carmin);
text-decoration: none;
transition: opacity var(--pc-dur-fast) var(--pc-ease-out);
}
a:hover { opacity: 0.8; }
main p a,
main li a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
}
main p a:hover,
main li a:hover {
text-decoration-color: currentColor;
}
:focus-visible {
outline: 2px solid var(--pc-carmin);
outline-offset: 2px;
border-radius: var(--pc-radius-sm);
}
/* Accessibilité : respect du prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}