/* ========================================================= AKIWI DESIGN SYSTEM — DESIGN TOKENS Pour Akimedia · CMS Akiwi · Modernisation 2026 ========================================================= Tous les tokens sont exposés en variables CSS pour pouvoir être consommés par Tailwind, du CSS vanilla ou n'importe quel composant. Le mode dark est activé par [data-theme="dark"] sur . ========================================================= */ :root { /* ---------- COULEURS — Surface (warm neutrals, base stone) ---------- */ --color-bg: #FAFAF9; /* fond app */ --color-bg-subtle: #F5F5F4; /* zones secondaires, rails */ --color-surface: #FFFFFF; /* cards, panels */ --color-surface-hover: #FAFAF9; --color-surface-sunken: #F5F5F4; /* inputs au repos, code blocks */ --color-overlay: rgba(28, 25, 23, 0.45); --color-border: #E7E5E4; --color-border-strong: #D6D3D1; --color-border-focus: #EA580C; /* ---------- COULEURS — Texte ---------- */ --color-text: #1C1917; /* primary */ --color-text-muted: #57534E; /* secondary / labels */ --color-text-subtle: #78716C; /* hint, helper */ --color-text-disabled: #A8A29E; --color-text-inverse: #FAFAF9; --color-text-link: #C2410C; --color-text-on-primary: #FFFFFF; /* ---------- COULEURS — Brand & action ---------- */ /* Primary (orange — couleur d'action principale) */ --color-primary-50: #FFF7ED; --color-primary-100: #FFEDD5; --color-primary-200: #FED7AA; --color-primary-300: #FDBA74; --color-primary-400: #FB923C; --color-primary-500: #F97316; --color-primary-600: #EA580C; /* base */ --color-primary-700: #C2410C; --color-primary-800: #9A3412; --color-primary-900: #7C2D12; /* Signature green — référence au trait du logo Akimedia */ --color-signature-300: #BEF264; --color-signature-400: #A3E635; --color-signature-500: #84CC16; /* base */ --color-signature-600: #65A30D; --color-signature-700: #4D7C0F; /* ---------- COULEURS — Sémantique ---------- */ --color-success-bg: #ECFCCB; --color-success-fg: #4D7C0F; --color-success-border: #BEF264; --color-success-solid: #65A30D; --color-info-bg: #DBEAFE; --color-info-fg: #1D4ED8; --color-info-border: #BFDBFE; --color-info-solid: #2563EB; --color-warn-bg: #FEF3C7; --color-warn-fg: #B45309; --color-warn-border: #FDE68A; --color-warn-solid: #D97706; --color-danger-bg: #FEE2E2; --color-danger-fg: #B91C1C; --color-danger-border: #FECACA; --color-danger-solid: #DC2626; --color-neutral-bg: #F5F5F4; --color-neutral-fg: #44403C; --color-neutral-border: #E7E5E4; /* ---------- COULEURS — Score viz (SEO / GEO) ---------- */ --color-seo: #2563EB; /* bleu — historique SEO */ --color-geo: #8B5CF6; /* violet — historique GEO */ /* ---------- TYPOGRAPHIE ---------- */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-display: "Inter", system-ui, sans-serif; /* Échelle typo — 1.125 modular scale, 14px base */ --text-xs: 11px; --leading-xs: 16px; --text-sm: 12px; --leading-sm: 18px; --text-base: 14px; --leading-base: 20px; --text-md: 15px; --leading-md: 22px; --text-lg: 16px; --leading-lg: 24px; --text-xl: 18px; --leading-xl: 26px; --text-2xl: 22px; --leading-2xl: 30px; --text-3xl: 28px; --leading-3xl: 36px; --text-4xl: 36px; --leading-4xl: 44px; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------- ESPACEMENTS (4px grid) ---------- */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-12: 64px; --space-14: 80px; --space-16: 96px; /* ---------- RAYONS ---------- */ --radius-xs: 3px; --radius-sm: 5px; --radius-md: 7px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 20px; --radius-full: 9999px; /* ---------- OMBRES (subtiles, neutres chaudes) ---------- */ --shadow-xs: 0 1px 2px 0 rgba(28, 25, 23, 0.04); --shadow-sm: 0 1px 2px 0 rgba(28, 25, 23, 0.05), 0 1px 1px -1px rgba(28, 25, 23, 0.04); --shadow-md: 0 4px 8px -2px rgba(28, 25, 23, 0.06), 0 2px 4px -2px rgba(28, 25, 23, 0.04); --shadow-lg: 0 12px 24px -8px rgba(28, 25, 23, 0.10), 0 4px 8px -4px rgba(28, 25, 23, 0.05); --shadow-xl: 0 24px 48px -12px rgba(28, 25, 23, 0.18); --shadow-focus: 0 0 0 3px rgba(234, 88, 12, 0.25); --shadow-inset: inset 0 1px 2px 0 rgba(28, 25, 23, 0.05); /* ---------- LAYOUT ---------- */ --sidebar-width: 248px; --sidebar-width-collapsed: 56px; --subnav-width: 240px; --header-height: 52px; --content-max: 1240px; /* ---------- TRANSITIONS ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; /* ---------- Z-INDEX ---------- */ --z-base: 0; --z-sticky: 10; --z-dropdown: 100; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200; color-scheme: light; } /* ========================================================= DARK MODE — overrides ========================================================= */ :root[data-theme="dark"], html[data-theme="dark"] { --color-bg: #0C0A09; --color-bg-subtle: #1C1917; --color-surface: #1C1917; --color-surface-hover: #292524; --color-surface-sunken: #0C0A09; --color-overlay: rgba(0, 0, 0, 0.65); --color-border: #292524; --color-border-strong: #44403C; --color-text: #FAFAF9; --color-text-muted: #A8A29E; --color-text-subtle: #78716C; --color-text-disabled: #57534E; --color-text-inverse: #1C1917; --color-text-link: #FB923C; --color-success-bg: rgba(132, 204, 22, 0.12); --color-success-fg: #A3E635; --color-success-border: rgba(132, 204, 22, 0.30); --color-info-bg: rgba(59, 130, 246, 0.12); --color-info-fg: #93C5FD; --color-info-border: rgba(59, 130, 246, 0.30); --color-warn-bg: rgba(217, 119, 6, 0.14); --color-warn-fg: #FCD34D; --color-warn-border: rgba(217, 119, 6, 0.30); --color-danger-bg: rgba(220, 38, 38, 0.14); --color-danger-fg: #FCA5A5; --color-danger-border: rgba(220, 38, 38, 0.30); --color-neutral-bg: #292524; --color-neutral-fg: #D6D3D1; --color-neutral-border: #44403C; --color-seo: #60A5FA; --color-geo: #A78BFA; --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35), 0 1px 1px -1px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.30); --shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.55), 0 4px 8px -4px rgba(0, 0, 0, 0.35); --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.70); color-scheme: dark; } /* ========================================================= RESET + BASE ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-base); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font-family: inherit; cursor: pointer; } input, textarea, select { font-family: inherit; } a { color: var(--color-text-link); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } ::selection { background: var(--color-primary-200); color: var(--color-primary-900); } :root[data-theme="dark"] ::selection, html[data-theme="dark"] ::selection { background: var(--color-primary-700); color: #fff; } /* Scrollbars discrètes */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); background-clip: padding-box; border: 2px solid transparent; }