/* --------------------------------------------------------------------------- Design tokens — palette "ember + circuit" (chaud, technique), adaptée du design system LittleCodeShop pour l'app Buffet. Local par défaut : sombre ("Terminal"), avec un thème clair activable (data-theme="light" sur ). --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* --- Ember (marque, orange chaud) --- */ --ember-50: #FEF3EA; --ember-100: #FCE0CC; --ember-200: #F9C29A; --ember-300: #F59E63; --ember-400: #F17F36; --ember-500: #ED6A1E; --ember-600: #D2540F; --ember-700: #A8420C; /* --- Terracotta --- */ --terra-400: #E8693C; --terra-500: #DB4F22; --terra-600: #B83C16; /* --- Amber (secondaire doré) --- */ --amber-300: #F8C56B; --amber-400: #F5A623; --amber-500: #E8920E; /* --- Circuit (accent techy, sarcelle) --- */ --circuit-50: #E6F5F3; --circuit-100: #C2E8E3; --circuit-200: #8FD3CB; --circuit-300: #4FB8AC; --circuit-400: #1F9E92; --circuit-500: #128276; --circuit-600: #0C6960; /* --- Ink (neutres) --- */ --ink-950: #15110E; --ink-900: #1C1714; --ink-850: #241D19; --ink-800: #2E2620; --ink-700: #3D332B; --ink-600: #574A40; --ink-500: #786959; --ink-400: #9C8C7C; --ink-300: #C2B4A4; --ink-200: #DECFBE; --ink-100: #EFE6DA; --ink-50: #F7F1E9; /* --- Paper (surfaces claires) --- */ --paper-0: #FFFFFF; --paper-50: #FBF7F1; --paper-100: #F5EEE3; /* --- Statuts sémantiques --- */ --positive-bg: #E3F3E6; --positive-500: #2E9E54; --caution-bg: #FBEFCF; --caution-500: #E0A015; --negative-bg: #FBE4DC; --negative-500: #D5481F; --info-bg: #E1F0EF; --info-500: #128276; /* --- Alias sémantiques : thème sombre par défaut --------------------- */ --brand: var(--ember-400); --brand-hover: var(--ember-300); --brand-press: var(--ember-500); --brand-subtle: rgba(237, 106, 30, 0.14); --brand-on: var(--ink-950); --accent: var(--circuit-300); --accent-hover: var(--circuit-200); --accent-subtle: rgba(31, 158, 146, 0.16); --accent-on: var(--ink-950); --bg-canvas: var(--ink-950); --bg-surface: var(--ink-900); --bg-surface-2: var(--ink-850); --bg-sunken: var(--ink-950); --text-strong: var(--paper-50); --text-body: var(--ink-200); --text-muted: var(--ink-400); --text-faint: var(--ink-500); --text-link: var(--circuit-300); --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --border-brand: var(--ember-400); /* Palette catégorielle (classes d'actif, séries de graphiques) — reprise du design : chaque teinte porte une identité fixe, pas un rang. */ --series-1: var(--ember-500); /* Actions */ --series-2: var(--circuit-500); /* Immobilier papier */ --series-3: var(--amber-400); /* Fonds euro */ --series-4: var(--circuit-300); /* Liquidités */ --series-5: var(--terra-500); /* Crypto */ --series-6: var(--ink-400); /* Non coté */ --series-7: var(--amber-300); /* Matières premières */ --grid: var(--border-subtle); --track: var(--bg-sunken); } /* --- Thème clair ----------------------------------------------------------- */ :root[data-theme="light"] { --brand: var(--ember-500); --brand-hover: var(--ember-600); --brand-press: var(--terra-600); --brand-subtle: var(--ember-50); --brand-on: #FFFFFF; --accent: var(--circuit-500); --accent-hover: var(--circuit-600); --accent-subtle: var(--circuit-50); --accent-on: #FFFFFF; --bg-canvas: var(--paper-50); --bg-surface: var(--paper-0); --bg-surface-2: var(--paper-100); --bg-sunken: var(--ink-50); --text-strong: var(--ink-900); --text-body: var(--ink-800); --text-muted: var(--ink-500); --text-faint: var(--ink-400); --text-link: var(--circuit-600); --border-subtle: var(--ink-100); --border-default: var(--ink-200); --border-strong: var(--ink-300); --border-brand: var(--ember-500); --grid: var(--border-subtle); --track: var(--bg-sunken); } /* --- Typographie ------------------------------------------------------------ */ :root { --font-display: 'Space Grotesk', system-ui, sans-serif; --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 46px; --text-5xl: 60px; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --ls-tight: -0.02em; --ls-wide: 0.04em; --ls-caps: 0.08em; } /* --- Espacement -------------------------------------------------------------- */ :root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --control-sm: 32px; --control-md: 40px; --control-lg: 48px; } /* --- Effets ------------------------------------------------------------------ */ :root { --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.14); --shadow-md: 0 4px 10px rgba(0,0,0,0.22), 0 2px 4px rgba(0,0,0,0.14); --shadow-xl: 0 24px 48px rgba(0,0,0,0.35), 0 8px 16px rgba(0,0,0,0.18); --glow-brand: 0 0 0 3px rgba(237,106,30,0.28); --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-emphasis: cubic-bezier(0.34, 1.4, 0.64, 1); --dur-base: 200ms; } :root[data-theme="light"] { --shadow-sm: 0 1px 2px rgba(43,30,20,0.06), 0 2px 6px rgba(43,30,20,0.06); --shadow-md: 0 4px 10px rgba(43,30,20,0.08), 0 2px 4px rgba(43,30,20,0.06); --shadow-xl: 0 24px 48px rgba(43,30,20,0.16), 0 8px 16px rgba(43,30,20,0.08); --glow-brand: 0 0 0 3px rgba(237,106,30,0.22); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--lh-normal); color: var(--text-body); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-strong); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); margin: 0; } a { color: var(--text-link); text-decoration: none; } a:hover { color: var(--brand); } :focus-visible { outline: none; box-shadow: var(--glow-brand); border-radius: var(--radius-xs); }