/* =========================================================================== * E-Santé Guinée — Design tokens * Single source of truth for colors, typography, spacing, motion. * Includes dark theme via [data-theme="dark"] on . * =========================================================================== */ :root { /* ---------- Brand ----------------------------------------------------- */ --brand-50: #e7f6f0; --brand-100: #c8eadc; --brand-200: #95d6bb; --brand-300: #5fc097; --brand-400: #2eaa78; --brand-500: #0F8A68; /* primary */ --brand-600: #0d7256; --brand-700: #0a6b51; --brand-800: #064534; --brand-900: #02281e; /* ---------- Semantic (light theme defaults) -------------------------- */ --color-bg: #f9fafb; --color-bg-elevated: #ffffff; --color-bg-muted: #f3f4f6; --color-surface: #ffffff; --color-surface-hover:#f3f4f6; --color-border: #e5e7eb; --color-border-strong:#d1d5db; --color-text: #111827; --color-text-muted: #6b7280; --color-text-subtle: #9ca3af; --color-text-inverse: #ffffff; --color-link: var(--brand-600); --color-link-hover: var(--brand-700); --color-overlay: rgba(17, 24, 39, 0.55); --color-primary: var(--brand-500); --color-primary-hover: var(--brand-600); --color-primary-soft: rgba(15, 138, 104, 0.10); --color-primary-on: #ffffff; --color-success: #10B981; --color-success-soft: rgba(16, 185, 129, 0.12); --color-warning: #F59E0B; --color-warning-soft: rgba(245, 158, 11, 0.12); --color-danger: #EF4444; --color-danger-soft: rgba(239, 68, 68, 0.12); --color-info: #3B82F6; --color-info-soft: rgba(59, 130, 246, 0.12); /* ---------- Typography ----------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal:1.5; --leading-relaxed:1.625; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------- Spacing scale (4px base) --------------------------------- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ---------- Radii ---------------------------------------------------- */ --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-pill:9999px; /* ---------- Elevation ------------------------------------------------ */ --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* ---------- Motion --------------------------------------------------- */ --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; --easing-standard: cubic-bezier(0.2, 0, 0, 1); --easing-emphasized: cubic-bezier(0.3, 0, 0, 1); /* ---------- Layout --------------------------------------------------- */ --layout-sidebar-w: 260px; --layout-sidebar-collapsed-w: 70px; --layout-header-h: 70px; --layout-content-max-w: 1280px; /* ---------- Z-index -------------------------------------------------- */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-overlay: 1040; --z-modal: 1050; --z-toast: 1060; --z-tooltip: 1070; --z-command-palette: 1080; } /* ============================================================================ * Dark theme * ========================================================================== */ [data-theme="dark"] { --color-bg: #0b1014; --color-bg-elevated: #11181f; --color-bg-muted: #161e26; --color-surface: #161e26; --color-surface-hover:#1f2933; --color-border: #2a3240; --color-border-strong:#3a4250; --color-text: #e8eaed; --color-text-muted: #98a1b3; --color-text-subtle: #6b7280; --color-text-inverse: #0b1014; --color-link: var(--brand-300); --color-link-hover: var(--brand-200); --color-overlay: rgba(0, 0, 0, 0.65); --color-primary: var(--brand-400); --color-primary-hover: var(--brand-300); --color-primary-soft: rgba(46, 170, 120, 0.16); --color-primary-on: #0b1014; --color-success-soft: rgba(16, 185, 129, 0.18); --color-warning-soft: rgba(245, 158, 11, 0.20); --color-danger-soft: rgba(239, 68, 68, 0.18); --color-info-soft: rgba(59, 130, 246, 0.18); --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow: 0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px -1px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.50); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55); } /* Respect OS preference unless user has explicitly chosen */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --color-bg: #0b1014; --color-bg-elevated: #11181f; --color-bg-muted: #161e26; --color-surface: #161e26; --color-surface-hover:#1f2933; --color-border: #2a3240; --color-text: #e8eaed; --color-text-muted: #98a1b3; --color-link: var(--brand-300); } } /* ============================================================================ * Backwards-compat aliases for the legacy --primary, --gray-* tokens used * by existing style.css. New code should use the semantic tokens above. * ========================================================================== */ :root { --primary: var(--color-primary); --primary-dark: var(--color-primary-hover); --primary-light: var(--brand-400); --primary-soft: var(--color-primary-soft); --secondary: var(--color-info); --secondary-dark:#2563eb; --secondary-soft:var(--color-info-soft); --success: var(--color-success); --success-soft: var(--color-success-soft); --danger: var(--color-danger); --danger-soft: var(--color-danger-soft); --warning: var(--color-warning); --warning-soft: var(--color-warning-soft); --info: var(--color-info); --info-soft: var(--color-info-soft); --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937; --gray-900: #111827; --font-family: var(--font-sans); --shadow: var(--shadow-sm); --sidebar-width: var(--layout-sidebar-w); --sidebar-collapsed-width: var(--layout-sidebar-collapsed-w); --header-height: var(--layout-header-h); --radius-sm: 0.375rem; --radius: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; }