/* ===================================================================== JOG · V3b Design System · Tokens Version 2.0.0 · 2026-04-24 · Rewrite from zero Esthétique apps 4/5/6 · Brown #c4704b + Teal #2a4858 + Earth warmth Light (default) + Dark via [data-theme="dark"] on Sans UI (Plus Jakarta Sans) + Mono data (IBM Plex Mono) Mobile-first · WCAG AA · Keyboard-first ===================================================================== */ /* ---------- Fonts (self-hosted, GDPR-safe) ---------- */ @font-face { font-family: "Jakarta"; src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Jakarta"; src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* ==================================================================== LIGHT THEME (default) ==================================================================== */ :root { /* Color scheme explicit (sans ça, Safari/Chrome rendent les native form controls — — avec le system appearance macOS/Windows, pas le theme de la page. Résultat : check- boxes apparaissent en carrés noirs si le system est en dark mode mais la page en light. Déclaration ici = form controls suivent le theme V3b piloté par [data-theme]). */ color-scheme: light; /* ---------- COLOR · Brand (brown + teal apps 4/5/6) ---------- */ --color-accent: #c4704b; --color-accent-hover: #a85d3d; --color-accent-active: #8f4e33; --color-accent-soft: #fef7f4; --color-accent-border: #F5D6CF; --color-accent-strong: #a85d3d; /* AA-safe white text, use for small button text */ --color-primary: #2a4858; --color-primary-hover: #16333f; --color-primary-active: #0f2731; --color-primary-soft: #e9eff2; --color-primary-border: #b9cdd6; /* ---------- COLOR · Surfaces (earth paper, app6) ---------- */ --color-bg: #fafaf7; --color-bg-soft: #f4f3ee; --color-bg-muted: #f0ebe5; --color-bg-elevated: #ffffff; --color-bg-inverted: #1e293b; /* ---------- COLOR · Foreground ---------- */ --color-fg: #1e293b; --color-fg-muted: #475569; --color-fg-subtle: #64748b; --color-fg-faint: #94a3b8; --color-fg-on-accent: #ffffff; --color-fg-on-primary: #ffffff; --color-fg-on-inverted: #fafaf7; /* ---------- COLOR · Borders ---------- */ --color-border: #e2e8f0; --color-border-strong: #cbd5e1; --color-border-soft: #e5e0da; --color-border-focus: #c4704b; /* ---------- COLOR · Status (semantic) ---------- */ --color-success: #059669; --color-success-hover: #047857; --color-success-soft: #d1fae5; --color-success-border: #a7f3d0; --color-success-fg: #065f46; --color-warning: #E07A3C; --color-warning-hover: #c86a2c; --color-warning-soft: #fef3c7; --color-warning-border: #fed7aa; --color-warning-fg: #92400e; --color-error: #C8503C; --color-error-hover: #a8422f; --color-error-soft: #fef2f2; --color-error-border: #fecaca; --color-error-fg: #991b1b; --color-info: #2563eb; --color-info-hover: #1d4ed8; --color-info-soft: #dbeafe; --color-info-border: #93c5fd; --color-info-fg: #1e40af; /* ---------- SPACING (hybride 4+8px) ---------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ---------- TYPOGRAPHY ---------- */ --font-sans: "Jakarta", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Sizes : body 14px, inputs 16px (évite zoom iOS), fluid clamp pour gros titres */ --text-micro: 0.6875rem; /* 11px — badges, labels */ --text-caption: 0.75rem; /* 12px — meta, helpers */ --text-body: 0.875rem; /* 14px — body default */ --text-input: 1rem; /* 16px — inputs (iOS zoom prevention) */ --text-h3: 1rem; /* 16px */ --text-h2: clamp(1.125rem, 0.9rem + 1vw, 1.25rem); /* 18→20px fluid */ --text-h1: clamp(1.5rem, 1.1rem + 1.8vw, 1.75rem); /* 24→28px fluid */ --text-display: clamp(1.75rem, 1.2rem + 2.5vw, 2.25rem); /* 28→36px fluid */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.5; --lh-loose: 1.75; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; /* ---------- RADIUS (audit apps 4/5/6 : 10px dominant 16×) ---------- */ --r-sm: 0.25rem; /* 4px — tight badges, dots */ --r-md: 0.5rem; /* 8px — buttons, inputs */ --r-lg: 0.625rem; /* 10px — audit dominant, cards */ --r-xl: 0.75rem; /* 12px — larger cards, modals */ --r-2xl: 1rem; /* 16px — hero cards */ --r-pill: 9999px; /* pills, avatars */ /* ---------- SHADOWS (earth warm, teinté brown) ---------- */ --shadow-xs: 0 1px 1px rgba(68, 42, 24, .03); --shadow-sm: 0 1px 2px rgba(68, 42, 24, .05), 0 1px 3px rgba(68, 42, 24, .04); --shadow-md: 0 4px 12px rgba(68, 42, 24, .08), 0 2px 4px rgba(68, 42, 24, .04); --shadow-lg: 0 12px 32px rgba(68, 42, 24, .14), 0 4px 8px rgba(68, 42, 24, .06); --shadow-xl: 0 20px 60px rgba(68, 42, 24, .22), 0 8px 16px rgba(68, 42, 24, .08); --shadow-focus: 0 0 0 3px rgba(196, 112, 75, .22); --shadow-focus-error: 0 0 0 3px rgba(200, 80, 60, .28); /* ---------- Z-INDEX scale ---------- */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-dropdown: 900; --z-popover: 950; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200; --z-tooltip: 1300; /* ---------- CHART palette (semantic-aligned apps 4/5/6) ---------- */ --chart-1: #c4704b; /* brown accent */ --chart-2: #2a4858; /* teal primary */ --chart-3: #059669; /* green emerald */ --chart-4: #E07A3C; /* amber warm */ --chart-5: #C8503C; /* red warm */ --chart-6: #2563eb; /* blue info */ --chart-7: #8a7e72; /* brown muted */ --chart-8: #475569; /* slate */ --chart-9: #b0a89e; /* earth muted */ --chart-10: #16333f; /* teal dark */ /* ---------- DATA-* BTP (OKLCH, gardés de Phase B) ---------- */ --data-carbon-low: oklch(68% 0.11 152); /* vert bas carbone */ --data-carbon-mid: oklch(82% 0.12 90); /* jaune mid */ --data-carbon-high: oklch(60% 0.17 40); /* orange haut */ --data-carbon-extreme: oklch(48% 0.20 25); /* rouge extrême */ --data-bio-plant: oklch(68% 0.13 135); /* végétal */ --data-bio-animal: oklch(72% 0.09 75); /* animal */ --data-bio-mineral: oklch(65% 0.04 250); /* minéral */ --data-bio-synthetic: oklch(58% 0.10 310); /* synthétique */ --data-origin-fr: oklch(50% 0.16 255); /* France */ --data-origin-eu: oklch(65% 0.15 85); /* UE */ --data-origin-world: oklch(55% 0.08 30); /* Monde */ --data-circular-low: oklch(55% 0.02 85); /* basse */ --data-circular-mid: oklch(65% 0.10 155); /* moyenne */ --data-circular-high: oklch(68% 0.16 155); /* haute */ /* ---------- TAP targets (mobile WCAG 2.5.5) ---------- */ --tap-min: 44px; /* hauteur minimum touch target (WCAG AA) */ --tap-comfy: 48px; /* confort tablette/phone */ /* ---------- TRANSITIONS ---------- */ --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; /* ---------- LAYOUT containers (mobile-first breakpoints) ---------- */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; } /* ==================================================================== DARK THEME — chart + data-* overrides (+luminosité pour dark bg) ==================================================================== */ [data-theme="dark"] { --chart-1: #e08a62; --chart-2: #71a0b7; --chart-3: #34d399; --chart-4: #f1a672; --chart-5: #ed7a66; --chart-6: #60a5fa; --chart-7: #a69788; --chart-8: #8591a0; --chart-9: #c5baad; --chart-10: #4a6976; --data-carbon-low: oklch(72% 0.14 152); --data-carbon-mid: oklch(78% 0.14 90); --data-carbon-high: oklch(66% 0.18 40); --data-carbon-extreme: oklch(60% 0.20 25); --data-bio-plant: oklch(72% 0.15 135); --data-bio-animal: oklch(76% 0.11 75); --data-bio-mineral: oklch(70% 0.05 250); --data-bio-synthetic: oklch(66% 0.12 310); --data-origin-fr: oklch(62% 0.18 255); --data-origin-eu: oklch(72% 0.16 85); --data-origin-world: oklch(62% 0.09 30); --data-circular-low: oklch(62% 0.03 85); --data-circular-mid: oklch(70% 0.12 155); --data-circular-high: oklch(74% 0.17 155); } /* ==================================================================== REDUCED MOTION (a11y) ==================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } } /* ==================================================================== DARK THEME via [data-theme="dark"] on ==================================================================== */ [data-theme="dark"] { color-scheme: dark; /* native form controls suivent le theme V3b */ --color-accent: #e08a62; --color-accent-hover: #ed9a74; --color-accent-active: #f1a687; --color-accent-soft: rgba(224, 138, 98, .12); --color-accent-border: rgba(224, 138, 98, .32); --color-accent-strong: #ed9a74; --color-primary: #5a8498; --color-primary-hover: #71a0b7; --color-primary-active: #8ab4c6; --color-primary-soft: rgba(90, 132, 152, .14); --color-primary-border: rgba(90, 132, 152, .32); --color-bg: #15191f; --color-bg-soft: #1b2028; --color-bg-muted: #21272f; --color-bg-elevated: #1e2530; --color-bg-inverted: #f5f0eb; --color-fg: #e8ecf0; --color-fg-muted: #b4bcc6; --color-fg-subtle: #8591a0; --color-fg-faint: #55616e; --color-fg-on-accent: #15191f; --color-fg-on-primary: #ffffff; --color-fg-on-inverted: #15191f; --color-border: #2c333d; --color-border-strong: #3b4450; --color-border-soft: #242a33; --color-border-focus: #e08a62; --color-success: #34d399; --color-success-hover: #10b981; --color-success-soft: rgba(52, 211, 153, .14); --color-success-border: rgba(52, 211, 153, .32); --color-success-fg: #6ee7b7; --color-warning: #f1a672; --color-warning-hover: #E07A3C; --color-warning-soft: rgba(241, 166, 114, .14); --color-warning-border: rgba(241, 166, 114, .32); --color-warning-fg: #fbbf9a; --color-error: #ed7a66; --color-error-hover: #db6654; --color-error-soft: rgba(237, 122, 102, .14); --color-error-border: rgba(237, 122, 102, .32); --color-error-fg: #f5a896; --color-info: #60a5fa; --color-info-hover: #93c5fd; --color-info-soft: rgba(96, 165, 250, .14); --color-info-border: rgba(96, 165, 250, .32); --color-info-fg: #93c5fd; /* ---------- SHADOWS dark (plus prononcées pour séparation) ---------- */ --shadow-xs: 0 1px 1px rgba(0, 0, 0, .4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3); --shadow-md: 0 4px 12px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .35); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .65), 0 4px 8px rgba(0, 0, 0, .4); --shadow-xl: 0 20px 60px rgba(0, 0, 0, .75), 0 8px 16px rgba(0, 0, 0, .5); --shadow-focus: 0 0 0 3px rgba(224, 138, 98, .42); --shadow-focus-error: 0 0 0 3px rgba(237, 122, 102, .45); }