/* ============================================================ MethodIA — Design Tokens Source: methodia/methodia/tailwind.config.ts + styles/tokens.css ============================================================ */ /* Fonts chargées via dans — ne pas @import ici */ :root { /* ── Color Primitives ── */ /* Cobalt scale */ --cobalt-50: #EEF2FD; --cobalt-100: #D5E0FB; --cobalt-200: #ABBEF7; --cobalt-300: #7D9AF2; --cobalt-400: #5375ED; --cobalt-500: #2A56E8; --cobalt-600: #2244C5; --cobalt-700: #1A35A0; --cobalt-800: #12267A; --cobalt-900: #0B1855; --cobalt-950: #060D33; /* Saffron scale */ --saffron-50: #FEF7E8; --saffron-100: #FCECC4; --saffron-200: #F9D888; --saffron-300: #F5C24C; --saffron-400: #EFAB22; --saffron-500: #E89515; --saffron-600: #C67A0F; --saffron-700: #A3600A; --saffron-800: #7D4807; --saffron-900: #5A3204; /* Ink — neutral with cool cast */ --ink-0: #FFFFFF; --ink-50: #FAFAFA; --ink-100: #F4F4F5; --ink-200: #E8E8EC; --ink-300: #D1D1DB; --ink-400: #A0A0B8; --ink-500: #6E6E8A; --ink-600: #4D4D6B; --ink-700: #3A3A55; --ink-800: #2D2C4E; --ink-900: #1E1D38; --ink-950: #0D0D1F; /* ── Semantic Surfaces ── */ --surface-canvas: #FAF8F5; --surface-default: #FFFFFF; --surface-raised: #F4F3FA; --surface-card: rgba(255, 255, 255, 0.92); /* ── Semantic Text ── */ --text-primary: #2D2C4E; --text-secondary: #4D4D6B; --text-muted: #6E6E8A; --text-placeholder: #A0A0B8; --text-inverse: #FFFFFF; --text-brand: #2A56E8; --text-accent: #E89515; /* ── Semantic Borders ── */ --border-default: #E8E4DE; --border-subtle: #F0EDE8; --border-brand: rgba(42, 86, 232, 0.2); /* ── Actions ── */ --action-primary: #2A56E8; --action-primary-hover: #2244C5; --action-primary-active: #1A35A0; --action-accent: #E89515; --action-accent-hover: #C67A0F; /* ── Status ── */ --status-success: #4A90D9; --status-error: #E05C5C; --status-warning: #E89515; /* ── Gradients ── */ --gradient-hero: linear-gradient(135deg, #1A1830 0%, #2D2C4E 50%, #3D3A6B 100%); --gradient-primary: linear-gradient(135deg, #8B8EC4 0%, #6667AB 50%, #4A4A8A 100%); --gradient-cobalt: linear-gradient(135deg, #5375ED 0%, #2A56E8 60%, #1A35A0 100%); --gradient-saffron: linear-gradient(135deg, #F5C24C 0%, #E89515 60%, #C67A0F 100%); --gradient-cta: linear-gradient(135deg, #FFB347 0%, #FF8C42 60%, #D96A20 100%); --gradient-gamification: linear-gradient(135deg, #1A1830 0%, #0B1855 60%, #1A35A0 100%); /* ── Typography ── */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Type scale */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ /* ── Spacing (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; --space-32: 8rem; /* ── Border Radius ── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-3xl: 40px; --radius-full: 9999px; /* ── Shadows (cobalt-tinted) ── */ --shadow-1: 0 1px 3px rgba(42, 86, 232, 0.06), 0 1px 2px rgba(42, 86, 232, 0.04); --shadow-2: 0 4px 6px rgba(42, 86, 232, 0.07), 0 2px 4px rgba(42, 86, 232, 0.05); --shadow-3: 0 8px 16px rgba(42, 86, 232, 0.10), 0 4px 8px rgba(42, 86, 232, 0.06); --shadow-4: 0 16px 32px rgba(42, 86, 232, 0.12), 0 8px 16px rgba(42, 86, 232, 0.08); --shadow-5: 0 24px 48px rgba(42, 86, 232, 0.15), 0 12px 24px rgba(42, 86, 232, 0.10); --shadow-brand: 0 8px 32px rgba(42, 86, 232, 0.25); --shadow-accent: 0 8px 28px rgba(232, 149, 21, 0.35); --shadow-frida: 0 0 48px rgba(42, 86, 232, 0.35); /* ── Motion ── */ --duration-instant: 80ms; --duration-fast: 140ms; --duration-normal: 220ms; --duration-slow: 360ms; --duration-slower: 560ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Layout ── */ --max-width: 1200px; --max-width-narrow: 720px; --gutter: clamp(1rem, 4vw, 2rem); /* ── Z-index ── */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 600; } /* ── Global reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--text-primary); background-color: var(--surface-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: inherit; border: none; background: none; } /* ── Frida keyframes ── */ @keyframes frida-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes frida-float-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes frida-celebrate { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.06); } } /* ── Page entrance ── */ @keyframes content-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }