/** * Cali&Co / Calisun — Design Tokens * Source unique de vérité pour les valeurs visuelles. * * À inclure AVANT style.css dans le . * Inter est chargé séparément via dans le (helpers.php → headAssets()). */ :root { /* ========================================================== COULEURS — Brand (bleu Calisun) ========================================================== */ --brand-50: #EBF6FE; --brand-100: #D6EBFC; --brand-200: #ABD6F9; --brand-300: #79BCF4; --brand-400: #4DA3EE; --brand-500: #1F89E8; --brand-600: #006EB9; /* couleur officielle */ --brand-700: #005A98; --brand-800: #00477A; --brand-900: #00355C; /* ========================================================== COULEURS — Accent (or Calisun) Réservé aux highlights (badges, focus, accents ponctuels). ========================================================== */ --accent-50: #FFF8E5; --accent-100: #FFF1CC; --accent-200: #FFE499; --accent-300: #FFD566; --accent-400: #FFC833; --accent-500: #FFBC00; /* couleur officielle */ --accent-600: #CC9600; --accent-700: #997000; --accent-800: #664B00; /* ========================================================== COULEURS — Neutres (palette Slate, légèrement bleutée pour s'harmoniser avec le bleu de marque) ========================================================== */ --neutral-0: #FFFFFF; --neutral-50: #F8FAFC; --neutral-100: #F1F5F9; --neutral-200: #E2E8F0; --neutral-300: #CBD5E1; --neutral-400: #94A3B8; --neutral-500: #64748B; --neutral-600: #475569; --neutral-700: #334155; --neutral-800: #1E293B; --neutral-900: #0F172A; --neutral-950: #020617; /* ========================================================== COULEURS — Sémantiques (modernes, anti-Bootstrap legacy) Remplacent les anciens #28a745 / #dc3545 / #ffc107. ========================================================== */ --success-50: #ECFDF5; --success-100: #D1FAE5; --success-500: #10B981; --success-600: #059669; --success-700: #047857; --warning-50: #FFFBEB; --warning-100: #FEF3C7; --warning-500: #F59E0B; --warning-600: #D97706; --warning-700: #B45309; --error-50: #FEF2F2; --error-100: #FEE2E2; --error-500: #EF4444; --error-600: #DC2626; --error-700: #B91C1C; --info-50: #EFF6FF; --info-100: #DBEAFE; --info-500: #3B82F6; --info-600: #2563EB; --info-700: #1D4ED8; /* ========================================================== SÉMANTIQUE — Surfaces & texte Aliases sémantiques qui pointent vers les palettes ci-dessus. ========================================================== */ --surface-page: var(--neutral-50); /* fond de page */ --surface-elevated: var(--neutral-0); /* cartes, modales */ --surface-subtle: var(--neutral-100); /* hover, sections */ --surface-inverted: var(--neutral-900); /* contraste */ --text-primary: var(--neutral-900); --text-secondary: var(--neutral-600); --text-tertiary: var(--neutral-500); --text-disabled: var(--neutral-400); --text-inverted: var(--neutral-0); --text-brand: var(--brand-700); --text-link: var(--brand-600); --border-subtle: var(--neutral-200); --border-default: var(--neutral-300); --border-strong: var(--neutral-400); --border-brand: var(--brand-300); /* ========================================================== TYPOGRAPHIE ========================================================== */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px */ --text-md: 0.9375rem; /* 15px */ --text-lg: 1rem; /* 16px */ --text-xl: 1.125rem; /* 18px */ --text-2xl: 1.25rem; /* 20px */ --text-3xl: 1.5rem; /* 24px */ --text-4xl: 1.875rem; /* 30px */ --text-5xl: 2.25rem; /* 36px */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.025em; /* ========================================================== ESPACEMENT (échelle 4px) ========================================================== */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --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 */ /* ========================================================== RADIUS ========================================================== */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 20px; --radius-full: 9999px; /* ========================================================== OMBRES (subtiles, modernes) Pour un look "élevation propre" type SaaS 2024+. ========================================================== */ --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05); --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05); --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04); /* ========================================================== ANNEAUX DE FOCUS (accessibilité + look pro) ========================================================== */ --ring-brand: 0 0 0 3px rgba(0, 110, 185, 0.20); --ring-success: 0 0 0 3px rgba(16, 185, 129, 0.20); --ring-warning: 0 0 0 3px rgba(245, 158, 11, 0.20); --ring-error: 0 0 0 3px rgba(239, 68, 68, 0.20); /* ========================================================== DURÉES & EASING (animations subtiles) ========================================================== */ --duration-fast: 100ms; --duration-base: 150ms; --duration-medium: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* ========================================================== LAYOUT ========================================================== */ --sidebar-width: 240px; --sidebar-width-collapsed: 64px; --topbar-height: 56px; --content-max-width: 1440px; --container-padding: var(--space-6); --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ========================================================== APPLICATION GLOBALE Volontairement minime : on n'écrase que les bases. style.css continue de gérer tout le reste. ========================================================== */ html { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); } /* Hiérarchie typographique de base (sans casser le rendu existant) */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }