/* ============================================================ ADrard Marketing — Design Tokens Aligné avec le design system officiel (Manrope + tokens) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap'); :root { /* ── Font ── */ --mk-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mk-font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* ── Palette Primaire (Bleu) ── */ --mk-primary-50: #eff6ff; --mk-primary-100: #dbeafe; --mk-primary-200: #bfdbfe; --mk-primary-300: #93c5fd; --mk-primary-400: #60a5fa; --mk-primary-500: #3b82f6; --mk-primary-600: #2563eb; --mk-primary-700: #1d4ed8; --mk-primary-800: #1e40af; --mk-primary-900: #1e3a8a; --mk-primary-950: #172554; /* ── Palette Accent (Lime) ── */ --mk-accent: #D0FF03; --mk-accent-dark: #b8e600; --mk-accent-fg: #1a3600; /* ── Palette Neutre ── */ --mk-white: #ffffff; --mk-neutral-0: #ffffff; --mk-neutral-50: #fafafa; --mk-neutral-100: #f5f5f5; --mk-neutral-200: #e5e5e5; --mk-neutral-300: #d4d4d4; --mk-neutral-400: #a3a3a3; --mk-neutral-500: #737373; --mk-neutral-600: #525252; --mk-neutral-700: #404040; --mk-neutral-800: #262626; --mk-neutral-900: #171717; --mk-neutral-950: #0a0a0a; /* ── Couleurs Sémantiques ── */ --mk-success: #22c55e; --mk-success-bg: #f0fdf4; --mk-success-border: #bbf7d0; --mk-success-fg: #15803d; --mk-warning: #f59e0b; --mk-warning-bg: #fffbeb; --mk-warning-border: #fde68a; --mk-warning-fg: #92400e; --mk-error: #ef4444; --mk-error-bg: #fef2f2; --mk-error-border: #fee2e2; /* ── Tokens Sémantiques ── */ --mk-background: var(--mk-neutral-50); --mk-surface: var(--mk-white); --mk-surface-hover: var(--mk-neutral-50); --mk-muted: var(--mk-neutral-100); --mk-border: var(--mk-neutral-200); --mk-border-hover: var(--mk-neutral-300); --mk-primary: var(--mk-primary-600); --mk-primary-hover: var(--mk-primary-700); --mk-primary-active: var(--mk-primary-800); --mk-primary-light: var(--mk-primary-50); --mk-primary-border: var(--mk-primary-200); --mk-primary-fg: #ffffff; --mk-primary-dark: var(--mk-primary-700); --mk-primary-darker: var(--mk-primary-800); --mk-primary-darkest: var(--mk-primary-950); /* Text hierarchy */ --mk-text-1: var(--mk-neutral-950); --mk-text-2: var(--mk-neutral-700); --mk-text-3: var(--mk-neutral-500); --mk-text-4: var(--mk-neutral-400); --mk-text-5: var(--mk-neutral-300); /* Inverse (sur fond sombre) */ --mk-text-inv-1: #ffffff; --mk-text-inv-2: rgba(255,255,255,.75); --mk-text-inv-3: rgba(255,255,255,.5); /* ── Typographie ── */ --mk-font-size-xs: 0.75rem; --mk-font-size-sm: 0.875rem; --mk-font-size-base: 1rem; --mk-font-size-md: 1.125rem; --mk-font-size-lg: 1.25rem; --mk-font-size-xl: 1.5rem; --mk-font-size-2xl: 1.875rem; --mk-font-size-3xl: clamp(2rem, 1.6rem + 2vw, 3rem); --mk-font-size-4xl: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); --mk-font-size-hero: clamp(2.75rem, 2.2rem + 3vw, 5rem); --mk-w-light: 300; --mk-w-normal: 400; --mk-w-medium: 500; --mk-w-semibold: 600; --mk-w-bold: 700; --mk-w-extrabold: 800; --mk-leading-none: 1; --mk-leading-tight: 1.2; --mk-leading-snug: 1.35; --mk-leading-normal: 1.6; --mk-leading-relaxed: 1.75; --mk-tracking-tight: -0.03em; --mk-tracking-tighter: -0.05em; --mk-tracking-normal: 0; --mk-tracking-wide: 0.025em; --mk-tracking-wider: 0.05em; --mk-tracking-widest: 0.1em; /* ── Espacement ── */ --mk-sp-1: 0.25rem; --mk-sp-2: 0.5rem; --mk-sp-3: 0.75rem; --mk-sp-4: 1rem; --mk-sp-5: 1.25rem; --mk-sp-6: 1.5rem; --mk-sp-7: 1.75rem; --mk-sp-8: 2rem; --mk-sp-10: 2.5rem; --mk-sp-12: 3rem; --mk-sp-16: 4rem; --mk-sp-20: 5rem; --mk-sp-24: 6rem; --mk-sp-32: 8rem; /* ── Rayon ── */ --mk-r-xs: 4px; --mk-r-sm: 6px; --mk-r-base: 8px; --mk-r-md: 12px; --mk-r-lg: 16px; --mk-r-xl: 20px; --mk-r-2xl: 24px; --mk-r-full: 9999px; /* Aliases legacy */ --mk-r-xs: 4px; /* ── Ombres ── */ --mk-shadow-xs: 0 1px 2px rgba(15,23,42,.05); --mk-shadow-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04); --mk-shadow-md: 0 4px 6px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04); --mk-shadow-lg: 0 10px 15px rgba(15,23,42,.08), 0 4px 6px rgba(15,23,42,.04); --mk-shadow-xl: 0 20px 25px rgba(15,23,42,.10), 0 8px 10px rgba(15,23,42,.04); /* ── Transitions ── */ --mk-t-fast: 150ms cubic-bezier(0.4,0,0.2,1); --mk-t-base: 200ms cubic-bezier(0.4,0,0.2,1); --mk-t-slow: 300ms cubic-bezier(0.4,0,0.2,1); /* ── Layout ── */ --mk-navbar-h: 64px; --mk-max-width: 1280px; --mk-content-w: 720px; /* ── Brand / Logo ── Tokens dédiés à l'intégration du logo dans la DA. Le pictogramme hérite de --brand-logo-stroke via `color: …` quand on utilisera un SVG avec fill="currentColor". En attendant le SVG, le PNG ignore ces tokens — mais ils servent déjà au favicon et aux variantes CSS (filter, background) au cas par cas. */ --brand-logo-stroke: var(--mk-neutral-950); /* trait par défaut */ --brand-logo-stroke-inv: #ffffff; /* sur fond sombre */ --brand-logo-stroke-primary: var(--mk-primary-700); /* variante bleu */ --brand-favicon-bg: var(--mk-primary-600); --brand-favicon-fg: #ffffff; /* Tailles standard pictogramme */ --brand-pic-xs: 16px; /* favicon, badge inline */ --brand-pic-sm: 20px; /* UI dense */ --brand-pic-md: 28px; /* navbar standard */ --brand-pic-lg: 48px; /* footer, dashboard splash */ --brand-pic-xl: 96px; /* onboarding hero */ /* ── Aliases compatibilité ── */ --mk-bg: var(--mk-muted); --mk-bg-alt: var(--mk-neutral-100); --mk-card: var(--mk-white); --mk-card-foreground: var(--mk-neutral-950); --mk-foreground: var(--mk-neutral-950); --mk-muted-foreground:var(--mk-neutral-500); --mk-ring: rgba(37,99,235,.18); --mk-input: var(--mk-neutral-200); --mk-border-subtle: var(--mk-neutral-100); --mk-success-text: var(--mk-success-fg); --mk-destructive: var(--mk-error); --mk-destructive-bg: var(--mk-error-bg); }