/* ============================================================ AI Virtual Office — Design Tokens Source: css/variables.css (mounted codebase) + semantic layer ============================================================ */ /* Les polices Google (Inter, JetBrains Mono) sont chargées via dans le . */ :root { /* ---------- Neutrals ---------- */ --bg: #f0f2f8; --panel: #ffffff; --panel-2: #f8f9fc; --border: #dde1ec; --border-2: #e8eaf0; /* ---------- Foreground ---------- */ --fg-1: #2a3560; /* text */ --fg-2: #6a7494; /* muted */ --fg-3: #9aaec8; /* muted-2, placeholder */ /* Aliases matching original codebase */ --text: var(--fg-1); --muted: var(--fg-2); --muted-2: var(--fg-3); /* ---------- Brand — Primary (logo blue) ---------- */ --primary: #5b7cc7; --primary-dark: #3a5a9e; --primary-light: #7fa0e0; --primary-2: #e8eef8; /* soft tint */ /* ---------- Brand — Accent (logo cyan) ---------- */ --accent: #7be0f0; --accent-2: #e4f8fc; /* ---------- Semantic / status ---------- */ --green: #4fcf89; --green-2: #e8fff3; --yellow: #ffbf3c; --yellow-2: #fff5d9; --blue: #57a3ff; --blue-2: #ecf5ff; --red: #e74c3c; --red-2: #fff0f0; /* ---------- Gradients ---------- */ --grad-primary: linear-gradient(135deg, var(--primary), var(--primary-dark)); --grad-success: linear-gradient(135deg, #4fcf89, #45b87a); --grad-panel: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%); --grad-progress: linear-gradient(90deg, var(--primary), var(--accent)); /* ---------- Shadows ---------- */ --shadow: 0 8px 24px rgba(42, 53, 96, 0.06); --shadow-md: 0 8px 24px rgba(42, 53, 96, 0.08); --shadow-lg: 0 12px 32px rgba(42, 53, 96, 0.12); --shadow-xl: 0 20px 48px rgba(42, 53, 96, 0.22); --shadow-2xl: 0 24px 64px rgba(33, 42, 67, 0.28); --shadow-primary:0 4px 12px rgba(58, 90, 158, 0.25); --shadow-focus: 0 0 0 3px rgba(91, 124, 199, 0.15); /* ---------- Radius ---------- */ --radius-xl: 18px; --radius-lg: 16px; --radius-md: 12px; --radius-sm: 10px; --radius-pill: 999px; /* ---------- Spacing ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; /* ---------- Typography ---------- */ --font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --text-xs: 11px; --text-sm: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 19px; --text-2xl: 22px; --text-3xl: 28px; --text-4xl: 36px; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.2; --lh-body: 1.5; --lh-loose: 1.7; /* ---------- Layout ---------- */ --header-height: 84px; --sidebar-width: 216px; --panel-right-width: 520px; /* ---------- Transitions ---------- */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --ease-pop: cubic-bezier(0.2, 0.9, 0.3, 1.2); --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================ Semantic type styles ============================================================ */ .ds-display { font-family: var(--font-family); font-size: var(--text-4xl); font-weight: var(--fw-black); letter-spacing: -0.5px; line-height: var(--lh-tight); color: var(--fg-1); } .ds-h1 { font-family: var(--font-family); font-size: var(--text-2xl); font-weight: var(--fw-black); letter-spacing: -0.5px; color: var(--fg-1); } .ds-h2 { font-family: var(--font-family); font-size: var(--text-xl); font-weight: var(--fw-black); color: var(--fg-1); } .ds-h3 { font-family: var(--font-family); font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--fg-1); } .ds-body { font-family: var(--font-family); font-size: var(--text-md); font-weight: var(--fw-medium); line-height: var(--lh-body); color: var(--fg-1); } .ds-small { font-family: var(--font-family); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--fg-2); } .ds-eyebrow { font-family: var(--font-family); font-size: var(--text-xs); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: 0.5px; color: var(--fg-3); } .ds-metric { font-family: var(--font-family); font-size: var(--text-lg); font-weight: var(--fw-black); color: var(--fg-1); } .ds-code { font-family: var(--font-mono); font-size: 13px; background: var(--bg); color: #d63384; padding: 0.15em 0.4em; border-radius: 3px; }