/* ========================================================================== ICyam Design System — Design Tokens -------------------------------------------------------------------------- Source de vérité : DESIGN.md v1.0 + Charte graphique v2.0 (2026-02-04) Auteur : Alexandre Andrieu Version : 1.0 (2026-05-11) USAGE - Inclure ce fichier en premier dans le CSS du projet - Surcharger via [data-theme="dark"] sur pour forcer le dark mode - Le mode système est suivi par défaut via prefers-color-scheme STRUCTURE 1. Couleurs (palette primaire, étendue, neutrals, fonctionnelles) 2. Typographie (familles, tailles, graisses, line-heights) 3. Spacing (base 8) 4. Border radius 5. Shadows 6. Breakpoints (en commentaire, à utiliser en media queries) 7. Z-index 8. Transitions & easings 9. Tokens sémantiques (références aux primaires, surcouche par thème) 10. Dark mode (override des tokens sémantiques) ========================================================================== */ :root { /* ===================================================================== 1. COULEURS — Palette brute ===================================================================== */ /* Primary Palette — Identité de marque */ --color-blue-marine: #1C3F63; /* Bleu Marine ICyam — couleur principale */ --color-green-menthe: #6EA593; /* Vert Menthe ICyam — accent principal */ --color-white: #FFFFFF; /* Extended Blue Family */ --color-blue-dark: #0F2438; --color-blue-mid: #2D5A87; --color-blue-light: #4A7BA7; --color-blue-pastel: #E8F1F8; /* Extended Green Family */ --color-green-dark: #4A7A6B; --color-green-light: #8FBFAE; --color-green-pastel: #E8F4F1; /* Neutrals — Gris */ --color-gray-graphite: #1A1A1A; /* Gris Foncé */ --color-gray-mid: #666666; --color-gray-light: #CCCCCC; --color-gray-very-light: #F5F5F5; /* Functional Colors */ --color-success: #6EA593; /* = Vert Menthe */ --color-warning: #F39C12; --color-error: #E74C3C; --color-info: #4A7BA7; /* = Bleu Clair */ /* Dark mode — Backgrounds & surfaces */ --color-dark-bg: #0F2438; --color-dark-surface-1: #172E48; --color-dark-surface-2: #1C3F63; --color-dark-surface-3: #2D5A87; --color-dark-border: #2D5A87; --color-dark-border-subtle: rgba(255, 255, 255, 0.08); /* Dark mode — Texte */ --color-dark-text-primary: #F5F5F5; --color-dark-text-secondary: #A3B5C9; --color-dark-text-tertiary: #5A7088; --color-dark-text-on-accent: #0F2438; /* Dark mode — Accents éclaircis */ --color-dark-green-accent: #8FBFAE; --color-dark-blue-accent: #7BAEDC; --color-dark-warning: #F5B041; --color-dark-error: #EC7063; --color-dark-info: #7BAEDC; /* ===================================================================== 2. TYPOGRAPHIE ===================================================================== */ /* Familles */ --font-family-base: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-family-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace; /* Graisses */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Tailles — Échelle web */ --font-size-h1: 3rem; /* 48px */ --font-size-h2: 2.25rem; /* 36px */ --font-size-h3: 1.75rem; /* 28px */ --font-size-h4: 1.375rem; /* 22px */ --font-size-body: 1rem; /* 16px */ --font-size-small: 0.875rem; /* 14px */ --font-size-xs: 0.75rem; /* 12px — badges, métadonnées */ /* Line-heights */ --line-height-tight: 1.2; /* H1, H2 */ --line-height-snug: 1.3; /* H2-H3 */ --line-height-normal: 1.4; /* H3-H4 */ --line-height-relaxed: 1.5; /* Small text, print body */ --line-height-loose: 1.6; /* Body web */ --line-height-flat: 1.0; /* Boutons */ /* Letter-spacing */ --letter-spacing-tight: -0.02em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.05em; /* CAPS pour badges, labels */ /* ===================================================================== 3. SPACING — Base 8 ===================================================================== */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 6rem; /* 96px */ --space-4xl: 8rem; /* 128px */ /* ===================================================================== 4. BORDER RADIUS ===================================================================== */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; /* default */ --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ===================================================================== 5. SHADOWS — Teintées Bleu Marine pour cohérence chromatique ===================================================================== */ --shadow-none: none; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(28, 63, 99, 0.10); /* default */ --shadow-lg: 0 8px 32px rgba(28, 63, 99, 0.14); --shadow-xl: 0 16px 48px rgba(28, 63, 99, 0.18); --shadow-focus: 0 0 0 3px rgba(74, 123, 167, 0.40); /* Dark mode shadows (plus contrastées) */ --shadow-dark-md: 0 4px 16px rgba(0, 0, 0, 0.40); --shadow-dark-lg: 0 8px 32px rgba(0, 0, 0, 0.50); --shadow-dark-xl: 0 16px 48px rgba(0, 0, 0, 0.60); --shadow-dark-focus: 0 0 0 3px rgba(123, 174, 220, 0.50); /* ===================================================================== 6. BREAKPOINTS (référence — utiliser en media queries) --------------------------------------------------------------------- bp-mobile : < 640px bp-tablet : 640px - 1024px bp-desktop : 1024px - 1440px bp-wide : > 1440px ===================================================================== */ /* Container max-width */ --container-max-width: 1200px; --container-max-width-app: 1400px; /* ===================================================================== 7. Z-INDEX ===================================================================== */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-overlay: 800; --z-modal-backdrop: 900; --z-modal: 1000; --z-toast: 1100; --z-tooltip: 1200; /* ===================================================================== 8. TRANSITIONS & EASINGS ===================================================================== */ --transition-fast: 150ms ease-out; --transition-base: 250ms ease-out; /* default */ --transition-slow: 400ms ease-out; --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ===================================================================== 9. ICÔNES ===================================================================== */ --icon-xs: 16px; --icon-sm: 20px; --icon-md: 24px; /* default */ --icon-lg: 32px; --icon-xl: 48px; --icon-2xl: 64px; --icon-stroke-default: 2; --icon-stroke-large: 1.5; /* ===================================================================== 10. TOKENS SÉMANTIQUES — Mode LIGHT (par défaut) --------------------------------------------------------------------- Ces tokens sont les seuls à utiliser dans les composants. Ils référencent les tokens bruts ci-dessus et changent en dark mode. ===================================================================== */ /* Backgrounds */ --bg-page: var(--color-white); --bg-surface: var(--color-white); --bg-surface-alt: var(--color-gray-very-light); --bg-section-alt-1: var(--color-blue-pastel); --bg-section-alt-2: var(--color-green-pastel); --bg-inverse: var(--color-blue-marine); /* Borders */ --border-default: var(--color-gray-light); --border-subtle: var(--color-blue-pastel); --border-strong: var(--color-blue-marine); --border-focus: var(--color-blue-marine); /* Texte */ --text-primary: var(--color-gray-graphite); --text-secondary: var(--color-gray-mid); --text-tertiary: var(--color-gray-light); --text-brand: var(--color-blue-marine); --text-link: var(--color-blue-light); --text-link-hover: var(--color-blue-marine); --text-on-inverse: var(--color-white); --text-on-accent: var(--color-white); /* Accent (CTA, succès) */ --accent-default: var(--color-green-menthe); --accent-hover: var(--color-green-dark); --accent-active: var(--color-green-dark); --accent-subtle-bg: var(--color-green-pastel); /* Info / secondaire */ --info-default: var(--color-blue-light); --info-hover: var(--color-blue-mid); --info-subtle-bg: var(--color-blue-pastel); /* Functional sémantique */ --success-default: var(--color-success); --success-bg: var(--color-green-pastel); --warning-default: var(--color-warning); --warning-bg: rgba(243, 156, 18, 0.10); --error-default: var(--color-error); --error-bg: rgba(231, 76, 60, 0.10); /* Shadows sémantiques (commutent en dark) */ --shadow-card: var(--shadow-md); --shadow-elevated: var(--shadow-lg); --shadow-overlay: var(--shadow-xl); --shadow-ring-focus: var(--shadow-focus); } /* =========================================================================== DARK MODE — Override des tokens sémantiques --------------------------------------------------------------------------- Activé par : - data-theme="dark" sur (préférence utilisateur) - prefers-color-scheme: dark si data-theme n'est pas forcé en "light" =========================================================================== */ [data-theme="dark"] { /* Backgrounds */ --bg-page: var(--color-dark-bg); --bg-surface: var(--color-dark-surface-1); --bg-surface-alt: var(--color-dark-surface-2); --bg-section-alt-1: var(--color-dark-surface-1); --bg-section-alt-2: var(--color-dark-surface-2); --bg-inverse: var(--color-dark-surface-2); /* Borders */ --border-default: var(--color-dark-border); --border-subtle: var(--color-dark-border-subtle); --border-strong: var(--color-dark-blue-accent); --border-focus: var(--color-dark-blue-accent); /* Texte */ --text-primary: var(--color-dark-text-primary); --text-secondary: var(--color-dark-text-secondary); --text-tertiary: var(--color-dark-text-tertiary); --text-brand: var(--color-dark-text-primary); --text-link: var(--color-dark-blue-accent); --text-link-hover: var(--color-white); --text-on-inverse: var(--color-dark-text-primary); --text-on-accent: var(--color-dark-text-on-accent); /* Accent éclairci */ --accent-default: var(--color-dark-green-accent); --accent-hover: var(--color-green-light); --accent-active: var(--color-green-menthe); --accent-subtle-bg: rgba(143, 191, 174, 0.12); /* Info éclairci */ --info-default: var(--color-dark-blue-accent); --info-hover: var(--color-blue-light); --info-subtle-bg: rgba(123, 174, 220, 0.12); /* Functional adapté */ --success-default: var(--color-dark-green-accent); --success-bg: rgba(143, 191, 174, 0.12); --warning-default: var(--color-dark-warning); --warning-bg: rgba(245, 176, 65, 0.15); --error-default: var(--color-dark-error); --error-bg: rgba(236, 112, 99, 0.15); /* Shadows adaptées dark */ --shadow-card: var(--shadow-dark-md); --shadow-elevated: var(--shadow-dark-lg); --shadow-overlay: var(--shadow-dark-xl); --shadow-ring-focus: var(--shadow-dark-focus); } /* Suivi automatique du système si data-theme n'est pas forcé en "light" */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-page: var(--color-dark-bg); --bg-surface: var(--color-dark-surface-1); --bg-surface-alt: var(--color-dark-surface-2); --bg-section-alt-1: var(--color-dark-surface-1); --bg-section-alt-2: var(--color-dark-surface-2); --bg-inverse: var(--color-dark-surface-2); --border-default: var(--color-dark-border); --border-subtle: var(--color-dark-border-subtle); --border-strong: var(--color-dark-blue-accent); --border-focus: var(--color-dark-blue-accent); --text-primary: var(--color-dark-text-primary); --text-secondary: var(--color-dark-text-secondary); --text-tertiary: var(--color-dark-text-tertiary); --text-brand: var(--color-dark-text-primary); --text-link: var(--color-dark-blue-accent); --text-link-hover: var(--color-white); --text-on-inverse: var(--color-dark-text-primary); --text-on-accent: var(--color-dark-text-on-accent); --accent-default: var(--color-dark-green-accent); --accent-hover: var(--color-green-light); --accent-active: var(--color-green-menthe); --accent-subtle-bg: rgba(143, 191, 174, 0.12); --info-default: var(--color-dark-blue-accent); --info-hover: var(--color-blue-light); --info-subtle-bg: rgba(123, 174, 220, 0.12); --success-default: var(--color-dark-green-accent); --success-bg: rgba(143, 191, 174, 0.12); --warning-default: var(--color-dark-warning); --warning-bg: rgba(245, 176, 65, 0.15); --error-default: var(--color-dark-error); --error-bg: rgba(236, 112, 99, 0.15); --shadow-card: var(--shadow-dark-md); --shadow-elevated: var(--shadow-dark-lg); --shadow-overlay: var(--shadow-dark-xl); --shadow-ring-focus: var(--shadow-dark-focus); } } /* =========================================================================== ACCESSIBILITÉ — Respect des préférences utilisateur =========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* =========================================================================== BASELINE — Styles globaux dérivés des tokens --------------------------------------------------------------------------- Ces règles s'appliquent automatiquement si tokens.css est inclus. Supprimer cette section si tu préfères piloter ces styles ailleurs. =========================================================================== */ html { font-family: var(--font-family-base); font-size: 16px; line-height: var(--line-height-loose); color: var(--text-primary); background-color: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *:focus-visible { outline: none; box-shadow: var(--shadow-ring-focus); border-radius: var(--radius-md); } a { color: var(--text-link); text-decoration: none; } a:hover { color: var(--text-link-hover); text-decoration: underline; } code, pre { font-family: var(--font-family-mono); font-size: 0.9em; }