/* ============================================================================ Hubiq — theme.css (Design System "Hubiq", copilote IA "Hubora") Palette extraite des maquettes : violet vif, fonds lavande, coins très arrondis, ombres douces teintées violet, mascotte 3D + icônes 3D ludiques. Light par défaut. Thème sombre : data-theme="dark" sur . ============================================================================ */ :root { /* ===================== MARQUE (violet Hubiq) ===================== */ --color-brand-50: #F4F0FF; --color-brand-100: #EBE3FF; --color-brand-200: #D6C5FF; --color-brand-300: #C39CFF; --color-brand-400: #B07DFF; --color-brand-500: #9B5CFF; /* accent clair */ --color-brand-600: #7C2BE8; /* primaire — boutons, liens, actif */ --color-brand-700: #6620C0; /* hover / pressed (foncé) */ --color-brand-800: #531A99; --color-brand-900: #3D1273; /* Dégradé signature (logo hexagone, accents) violet clair → foncé */ --gradient-brand: linear-gradient(140deg, #9B5CFF 0%, #7C2BE8 50%, #6620C0 100%); --gradient-brand-soft: linear-gradient(140deg, #F2F0FF 0%, #ECE4FF 100%); /* ===================== NEUTRES (encre teintée violet) ===================== */ --color-ink-900: #18162B; /* titres */ --color-ink-800: #232136; --color-ink-700: #353349; /* texte fort */ --color-ink-500: #5B5970; /* texte courant / paragraphes */ --color-ink-400: #8B8AA0; /* texte secondaire / placeholder */ --color-ink-300: #C4C3D6; /* bordure marquée */ --color-ink-200: #E5E4F0; /* bordure standard */ --color-ink-100: #F0EFF7; /* remplissage neutre / hover */ --color-surface: #FFFFFF; /* cartes, panneaux posés */ --color-surface-alt: #FBFBFF; /* surface alternée */ --color-bg: #F6F6FE; /* fond de page lavande */ /* ===================== ACCENTS PASTEL (cartes / catégories) ===================== Chaque accent : -bg (fond doux de carte) + -accent (icône/point/tag fort). */ --color-violet-bg: #F3EFFF; --color-violet-accent: #9B5CFF; --color-pink-bg: #FDEDF3; --color-pink-accent: #F2568F; --color-peach-bg: #FCF1E6; --color-peach-accent: #F59340; --color-mint-bg: #E9F7EF; --color-mint-accent: #27AE76; --color-sky-bg: #EAF2FD; --color-sky-accent: #3B82F6; --color-yellow-bg: #FFF6D8; --color-yellow-accent: #EAB308; /* ===================== STATUTS ===================== */ --color-success: #1F9D63; --color-success-bg: #E7F6EE; --color-warning: #D9821B; --color-warning-bg: #FCF1E0; --color-error: #E5484D; --color-error-bg: #FDECEC; --color-info: #3B82F6; --color-info-bg: #EAF2FD; /* ===================== ÉTATS GLOBAUX ===================== */ --color-focus-ring: #9B5CFF; --color-link: #7C2BE8; --color-disabled-fg: #B6B5C7; --color-disabled-bg: #EFEFF5; --color-overlay: rgba(24, 22, 43, 0.45); /* ===================== ESPACEMENTS (échelle 4px) ===================== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ===================== RAYONS (généreux, ludique) ===================== */ --radius-xs: 6px; --radius-sm: 10px; /* champs, petits boutons, tags */ --radius-md: 14px; /* boutons, inputs */ --radius-lg: 18px; /* cartes secondaires, tuiles stat */ --radius-xl: 24px; /* cartes Pod, panneaux */ --radius-2xl: 32px; /* grands conteneurs / hero */ --radius-pill: 9999px; /* chips, badges, avatars */ --radius-round: 50%; /* ===================== OMBRES (douces, teintées violet) ===================== */ --shadow-xs: 0 1px 2px rgba(24, 22, 43, 0.06); --shadow-sm: 0 2px 8px rgba(24, 22, 43, 0.06); --shadow-md: 0 8px 24px rgba(124, 43, 232, 0.10); --shadow-lg: 0 18px 44px rgba(124, 43, 232, 0.14); --shadow-xl: 0 28px 70px rgba(124, 43, 232, 0.18); --shadow-focus: 0 0 0 4px rgba(155, 92, 255, 0.32); /* ===================== TAILLES D'ICÔNES ===================== */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; /* ===================== TYPOGRAPHIE ===================== */ --font-display: "Poppins", "Plus Jakarta Sans", system-ui, sans-serif; /* titres, wordmark */ --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; /* corps, UI */ /* ===================== MOTION ===================== */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* léger rebond ludique */ --dur-fast: 140ms; --dur-medium: 240ms; --dur-slow: 360ms; /* ===================== BREAKPOINTS (référence) ===================== */ /* sm 0 · md 768px · lg 1024px · xl 1280px · 2xl 1536px (mobile-first) */ } /* ============================ DARK MODE ============================ */ :root[data-theme="dark"] { --color-brand-600: #8B6BFF; --color-brand-700: #A186FF; --color-link: #A186FF; --color-focus-ring:#A186FF; --color-ink-900: #FFFFFF; --color-ink-800: #EDECF6; --color-ink-700: #D7D6E6; --color-ink-500: #ABAAC0; --color-ink-400: #7F7E95; --color-ink-300: #4A4860; --color-ink-200: #322F47; --color-ink-100: #272539; --color-surface: #1E1B2E; --color-surface-alt: #232038; --color-bg: #14121F; --color-violet-bg: #251E45; --color-pink-bg: #3A1E2D; --color-peach-bg: #3A2A1A; --color-mint-bg: #143026; --color-sky-bg: #142A45; --color-yellow-bg: #322A0E; --color-success-bg: #123626; --color-warning-bg: #3A2A12; --color-error-bg: #3A1A1C; --color-info-bg: #142A45; --color-disabled-fg: #56546B; --color-disabled-bg: #272539; --color-overlay: rgba(0, 0, 0, 0.55); --gradient-brand-soft: linear-gradient(140deg, #2A2350 0%, #241D44 100%); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55); --shadow-xl: 0 28px 70px rgba(0, 0, 0, 0.65); } /* ============================================================================ Helpers typographiques (facultatifs — préférer inline en Design Components). ============================================================================ */ .t-display-2xl { font-family: var(--font-display); font-weight: 700; font-size: 3.25rem; line-height: 1.05; letter-spacing: -0.03em; } .t-display-xl { font-family: var(--font-display); font-weight: 700; font-size: 2.5rem; line-height: 1.08; letter-spacing: -0.025em; } .t-display-lg { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1.12; letter-spacing: -0.02em; } .t-h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.625rem; line-height: 1.2; letter-spacing: -0.015em; } .t-h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; } .t-h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;line-height: 1.3; } .t-body-lg { font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.6; } .t-body { font-family: var(--font-body); font-weight: 400; font-size: 0.9375rem;line-height: 1.55; } .t-body-sm { font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem;line-height: 1.5; } .t-label { font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; line-height: 1.4; } .t-caption { font-family: var(--font-body); font-weight: 500; font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.01em; }