/* ═══════════════════════════════════════════════════════════════ AUXÉO — Design Tokens ─────────────────────────────────────────────────────────────── Source de vérité : ~/.claude/skills/auxeo-design/colors_and_type.css (v1.0) Sync 2026-05-08 · NE PAS éditer directement, sync depuis le skill. ─────────────────────────────────────────────────────────────── 4 thèmes câblés : :root → com-dark (défaut) @media (prefers-color-scheme: light) → com-light (auto OS) .theme-finances → fin-dark (site Finances) .theme-finances + (prefers-color-scheme) → fin-light (auto OS) ─────────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────── COULEURS BASE — Auxéo Com & Auxéo Finances ───────────────────────────────────────────── */ :root { /* Auxéo Com brand colors */ --com-indigo-deep: #1A0F4F; /* Primary — backgrounds, logo bg */ --com-indigo-vivid: #3D1FBF; /* CTAs, active elements */ --com-cyan: #00D4E8; /* Accent signature — the dot */ --com-arctic-white: #F4F7FF; /* Light backgrounds */ --com-charcoal: #12111F; /* Primary text */ --com-slate: #8892B0; /* Secondary text */ /* Auxéo Finances brand colors */ --fin-espresso: #2D2825; /* Primary — backgrounds */ --fin-terracotta: #C4786A; /* Accent signature */ --fin-cream: #F5EDE8; /* Light backgrounds */ --fin-warm-gray: #A09890; /* Secondary text */ --fin-white: #FFFFFF; /* Contrast */ --fin-charcoal: #12111F; /* Shared primary text */ /* ───────────────────────────────────────── SEMANTIC TOKENS — Com sombre (par défaut) ───────────────────────────────────────── */ --bg-primary: var(--com-indigo-deep); --bg-secondary: var(--com-arctic-white); --bg-surface: #231664; --bg-surface-alt: #170d42; --bg-card: rgba(26,15,79,0.4); --bg-nav: rgba(18,17,31,0.88); --accent: var(--com-cyan); --cta: var(--com-indigo-vivid); --cta-hover: #4f2ee0; --fg-primary: #FFFFFF; --fg-on-light: var(--com-charcoal); --fg-secondary: var(--com-slate); --fg-muted: #6370A0; --border: rgba(0, 212, 232, 0.2); --border-soft: rgba(0, 212, 232, 0.1); --border-strong: var(--com-cyan); --divider: rgba(255,255,255,0.1); --grid-line: rgba(0,212,232,0.03); --hero-grad: radial-gradient(ellipse 60% 60% at 70% 40%, rgba(61,31,191,0.28) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 15% 85%, rgba(0,212,232,0.07) 0%, transparent 60%); /* Halo de fond global — spec DS preview/shared.css (com-dark) */ --bg-halo: radial-gradient(ellipse 55% 55% at 92% 8%, rgba(0,212,232,0.16) 0%, transparent 100%), radial-gradient(ellipse 50% 50% at 8% 92%, rgba(61,31,191,0.26) 0%, transparent 100%); /* ───────────────────────────────────────── CTA — boutons (Raoul 2026-05-08 : tous les boutons en pill) ───────────────────────────────────────── */ --btn-bg: var(--cta); --btn-color: var(--com-arctic-white); --btn-shadow: none; /* DS : pas d'ombre sur boutons */ --btn-hover-shadow: none; --btn-radius: var(--radius-pill); /* 999px — décision Raoul, pill systématique */ --btn-padding: 18px 38px; /* boutons imposants — décision Raoul */ --btn-font-size: 16px; /* boutons imposants — décision Raoul */ /* ───────────────────────────────────────── SPACING TOKENS ───────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ───────────────────────────────────────── BORDER RADIUS TOKENS ───────────────────────────────────────── */ --radius-sm: 4px; --radius-button: 6px; /* spec DS Components.jsx AuxBtn */ --radius-md: 8px; --radius-card: 10px; /* spec DS ServiceCard / preview cards */ --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px; /* ───────────────────────────────────────── ELEVATION / SHADOW ───────────────────────────────────────── */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.18); --shadow-md: 0 4px 16px rgba(0,0,0,0.22); --shadow-lg: 0 8px 32px rgba(0,0,0,0.28); --shadow-glow: 0 0 24px rgba(0,212,232,0.25); /* ───────────────────────────────────────── TYPOGRAPHIE — Familles ───────────────────────────────────────── */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'DM Sans', sans-serif; /* Alias rétrocompat (à purger en fin de Lot 5) */ --font-title: var(--font-display); /* ───────────────────────────────────────── TYPOGRAPHIE — Type scale (10 niveaux) ───────────────────────────────────────── */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 40px; --text-4xl: 56px; --text-5xl: 72px; /* ───────────────────────────────────────── ALIAS RÉTROCOMPAT — à purger en fin de Lot 5 ───────────────────────────────────────── */ --bg: var(--bg-primary); --bg-2: rgba(26,15,79,0.1); --indigo: var(--com-indigo-deep); --indigo-vif: var(--com-indigo-vivid); --cyan: var(--com-cyan); --blanc: var(--fg-primary); --charbon: var(--com-charcoal); --slate: var(--fg-secondary); --border-hover: rgba(0,212,232,0.35); } /* ═══════════════════════════════════════════════════════════════ COM CLAIR — déclenché par OS clair ─────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: light) { :root { /* Source : THEMES['com-light'] dans ui_kits/auxeo-com/index.html bg=#F4F7FF · accent=#00D4E8 · cta=#3D1FBF · fg=#12111F · sub=#4a4a7a · surface=#fff */ --bg-primary: var(--com-arctic-white); /* #F4F7FF */ --bg-secondary: #FFFFFF; --bg-surface: #FFFFFF; /* THEMES.surface en light */ --bg-surface-alt: #edf0fa; --bg-card: rgba(26,15,79,0.06); --bg-nav: rgba(244,247,255,0.92); --accent: var(--com-cyan); /* RESTE CYAN selon DS UI Kit */ --cta: var(--com-indigo-vivid); --cta-hover: #4f2ee0; --fg-primary: var(--com-charcoal); /* THEMES.fg = #12111F */ --fg-on-light: var(--com-charcoal); --fg-secondary: #4a4a7a; /* THEMES.sub */ --fg-muted: #6370A0; --border: rgba(26,15,79,0.12); --border-soft: rgba(26,15,79,0.06); --border-strong: var(--com-cyan); /* aligné sur --accent */ --divider: rgba(26,15,79,0.08); --grid-line: rgba(26,15,79,0.04); --hero-grad: radial-gradient(ellipse 60% 60% at 70% 40%, rgba(61,31,191,0.1) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 15% 85%, rgba(0,212,232,0.05) 0%, transparent 60%); /* Halo de fond global — spec DS preview/shared.css (com-light) */ --bg-halo: radial-gradient(ellipse 55% 55% at 92% 8%, rgba(0,180,200,0.10) 0%, transparent 100%), radial-gradient(ellipse 50% 50% at 8% 92%, rgba(61,31,191,0.08) 0%, transparent 100%); --btn-shadow: 0 0 40px rgba(61,31,191,0.25); --btn-hover-shadow: 0 0 60px rgba(61,31,191,0.4); --shadow-glow: 0 0 24px rgba(0,212,232,0.25); /* glow accent cyan */ /* alias rétrocompat */ --bg: var(--bg-primary); --bg-2: rgba(26,15,79,0.04); --blanc: var(--fg-primary); --charbon: var(--com-arctic-white); --slate: var(--fg-secondary); --border-hover: rgba(0,212,232,0.45); /* aligné sur cyan */ } } /* ═══════════════════════════════════════════════════════════════ FINANCES SOMBRE — appliqué via ─────────────────────────────────────────────────────────────── */ .theme-finances { --bg-primary: var(--fin-espresso); --bg-secondary: var(--fin-cream); --bg-surface: #3e3530; --bg-surface-alt:#261f1c; --bg-card: rgba(45,40,37,0.4); --bg-nav: rgba(38,31,28,0.88); --accent: var(--fin-terracotta); --cta: var(--fin-terracotta); --cta-hover: #d4897c; --fg-primary: var(--fin-white); --fg-on-light: var(--fin-charcoal); --fg-secondary: var(--fin-warm-gray); --fg-muted: #7a6a60; --border: rgba(196, 120, 106, 0.25); --border-soft: rgba(196, 120, 106, 0.12); --border-strong: var(--fin-terracotta); --divider: rgba(255,255,255,0.1); --grid-line: rgba(196,120,106,0.04); --hero-grad: radial-gradient(ellipse 60% 60% at 70% 40%, rgba(196,120,106,0.18) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 15% 85%, rgba(196,120,106,0.05) 0%, transparent 60%); /* Halo de fond global — spec DS preview/shared.css (fin-dark) */ --bg-halo: radial-gradient(ellipse 55% 55% at 92% 8%, rgba(196,120,106,0.18) 0%, transparent 100%), radial-gradient(ellipse 50% 50% at 8% 92%, rgba(122,58,42,0.28) 0%, transparent 100%); --btn-shadow: none; --btn-hover-shadow: none; --shadow-glow: 0 0 24px rgba(196,120,106,0.25); /* override pour Finances */ /* alias rétrocompat */ --bg: var(--bg-primary); --bg-2: rgba(45,40,37,0.1); --indigo: var(--fin-espresso); --indigo-vif: var(--fin-terracotta); --cyan: var(--fin-terracotta); --blanc: var(--fg-primary); --charbon: var(--fin-charcoal); --slate: var(--fg-secondary); --border-hover: rgba(196,120,106,0.45); } /* ═══════════════════════════════════════════════════════════════ FINANCES CLAIR — déclenché par OS clair sur site Finances ─────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: light) { .theme-finances { /* Source : THEMES['fin-light'] dans ui_kits/auxeo-com/index.html bg=#F5EDE8 · accent=#C4786A · cta=#C4786A · fg=#12111F · sub=#6a5850 · surface=#fff */ --bg-primary: var(--fin-cream); /* #F5EDE8 */ --bg-secondary: var(--fin-white); --bg-surface: var(--fin-white); /* THEMES.surface en light */ --bg-surface-alt:#ecddd6; --bg-card: rgba(45,40,37,0.05); --bg-nav: rgba(245,237,232,0.92); --accent: var(--fin-terracotta); /* RESTE TERRACOTTA selon DS UI Kit */ --cta: var(--fin-terracotta); --cta-hover: #b86355; --fg-primary: var(--fin-charcoal); /* THEMES.fg = #12111F */ --fg-on-light: var(--fin-charcoal); --fg-secondary: #6a5850; /* THEMES.sub */ --fg-muted: #8a7870; --border: rgba(45,40,37,0.12); --border-soft: rgba(45,40,37,0.06); --border-strong: var(--fin-terracotta); --divider: rgba(45,40,37,0.08); --grid-line: rgba(45,40,37,0.04); --hero-grad: radial-gradient(ellipse 60% 60% at 70% 40%, rgba(196,120,106,0.1) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 15% 85%, rgba(196,120,106,0.04) 0%, transparent 60%); /* Halo de fond global — spec DS preview/shared.css (fin-light) */ --bg-halo: radial-gradient(ellipse 55% 55% at 92% 8%, rgba(196,120,106,0.12) 0%, transparent 100%), radial-gradient(ellipse 50% 50% at 8% 92%, rgba(122,58,42,0.08) 0%, transparent 100%); --btn-shadow: 0 0 40px rgba(196,120,106,0.25); --btn-hover-shadow: 0 0 60px rgba(196,120,106,0.4); --shadow-glow: 0 0 24px rgba(196,120,106,0.25); /* alias rétrocompat */ --bg: var(--bg-primary); --bg-2: rgba(45,40,37,0.04); --blanc: var(--fg-primary); --charbon: var(--fin-cream); --slate: var(--fg-secondary); --border-hover: rgba(196,120,106,0.4); } } /* ═══════════════════════════════════════════════════════════════ CLASSES UTILITAIRES TYPOGRAPHIE (rôles sémantiques) ─────────────────────────────────────────────────────────────── */ .aux-h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .aux-h2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; } .aux-h3 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; } .aux-h4 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.3; } .aux-label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .aux-body { font-family: var(--font-body); font-size: var(--text-base); font-weight: 400; line-height: 1.6; } .aux-caption { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 300; line-height: 1.5; } .aux-note { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 300; line-height: 1.5; }