/**
* VETA RH Design System — Design Tokens
* Source unique de verite pour tout le design system.
*
* Organisation :
* 1. @font-face declarations
* 2. Colors — Light mode (default)
* 3. Colors — Dark mode (@media + [data-theme])
* 4. Typography
* 5. Spacing
* 6. Border radius
* 7. Shadows
* 8. Motion
* 9. Layout
* 10. Z-index
* 11. Glass
* 12. prefers-reduced-motion
*
* Conventions :
* - Prefix `--v-` on every token to avoid collisions during migration
* - All colors in OKLCH with hex fallback comments
* - No component styles — tokens only
*
* Font preload hints (add to of every page):
*
*
*
*/
/* ============================================================
@FONT-FACE
============================================================ */
/* Satoshi — Display font (variable, wght 300-900) */
@font-face {
font-family: 'Satoshi';
src: url('https://cdn.jsdelivr.net/fontsource/fonts/satoshi:vf@latest/latin-wght-normal.woff2') format('woff2-variations');
font-weight: 300 900;
font-style: normal;
font-display: swap;
}
/* Geist — Body font (variable, wght 100-900) */
@font-face {
font-family: 'Geist';
src: url('https://cdn.jsdelivr.net/fontsource/fonts/geist-sans:vf@5.2.5/latin-wght-normal.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* Geist Mono — Monospace font (variable, wght 100-900) */
@font-face {
font-family: 'Geist Mono';
src: url('https://cdn.jsdelivr.net/fontsource/fonts/geist-mono:vf@5.2.7/latin-wght-normal.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* ============================================================
COLORS : LIGHT MODE (default)
============================================================ */
:root {
/* --- Backgrounds --- */
--v-bg-base: oklch(0.985 0.005 80); /* #FDFCFA — cream warm */
--v-bg-surface: oklch(0.99 0.002 80); /* #FEFEFE */
--v-bg-elevated: oklch(1.00 0 0); /* #FFFFFF */
--v-bg-subtle: oklch(0.97 0.005 80); /* #FAF8F5 */
--v-bg-muted: oklch(0.95 0.005 80); /* #F5F1EB */
--v-bg-accent: oklch(0.96 0.03 25); /* rouge tres pale */
--v-bg-overlay: oklch(0.20 0.01 260 / 0.5); /* overlay modal */
--v-bg-card: var(--v-bg-elevated); /* card background */
--v-bg-primary: oklch(0.98 0.003 80); /* #FAFAF9 — lightest surface */
/* --- Text --- */
--v-text-primary: oklch(0.20 0.01 80); /* #1C1917 — warm black */
--v-text-secondary: oklch(0.45 0.01 80); /* #6B6560 */
--v-text-muted: oklch(0.60 0.005 80); /* #9B9590 */
--v-text-inverse: oklch(0.97 0.005 80); /* #FAF8F5 */
--v-text-on-accent: oklch(1.00 0 0); /* #FFFFFF */
/* --- Accent — Rouge VETA --- */
--v-accent: oklch(0.55 0.22 25); /* #E31E24 — rouge VETA */
--v-accent-hover: oklch(0.60 0.22 25); /* #EF3B3B — hover plus clair */
--v-accent-active: oklch(0.48 0.22 25); /* #C41818 — pressed plus fonce */
--v-accent-subtle: oklch(0.96 0.03 25); /* rouge tres pale pour backgrounds */
--v-accent-muted: oklch(0.75 0.12 25); /* rouge moyen pour icones */
--v-accent-dark: oklch(0.48 0.22 25); /* #C41818 — rouge fonce */
/* --- Brand secondary — Or warm --- */
--v-gold: oklch(0.72 0.10 80); /* #B8860B */
--v-gold-subtle: oklch(0.93 0.04 80); /* or tres pale */
/* --- Semantic --- */
--v-success: oklch(0.65 0.18 145); /* #2F9E44 */
--v-success-subtle: oklch(0.95 0.04 145); /* vert pale */
--v-warning: oklch(0.75 0.15 75); /* #E8A317 */
--v-warning-subtle: oklch(0.95 0.04 75); /* ambre pale */
--v-error: oklch(0.60 0.20 25); /* #D32F2F */
--v-error-subtle: oklch(0.95 0.04 25); /* rouge pale */
--v-info: oklch(0.65 0.12 245); /* #3B82F6 */
--v-info-subtle: oklch(0.95 0.04 245); /* bleu pale */
/* --- Named color palette --- */
--v-red: oklch(0.55 0.22 25); /* #E31E24 — same as accent */
--v-red-dark: oklch(0.48 0.22 25); /* #C41818 */
--v-red-light: oklch(0.70 0.15 25); /* #F87171 */
--v-green: oklch(0.60 0.18 145); /* #16A34A */
--v-green-light: oklch(0.90 0.06 145); /* #DCFCE7 */
--v-blue: oklch(0.60 0.16 245); /* #3B82F6 */
--v-blue-light: oklch(0.90 0.06 245); /* #DBEAFE */
--v-amber: oklch(0.75 0.15 75); /* #D97706 */
--v-amber-light: oklch(0.90 0.06 75); /* #FEF3C7 */
--v-cyan: oklch(0.70 0.12 200); /* #06B6D4 */
--v-purple: oklch(0.55 0.20 300); /* #7C3AED */
--v-purple-subtle: oklch(0.95 0.04 300); /* #F3E8FF */
--v-orange: oklch(0.70 0.18 50); /* #F97316 */
--v-pink: oklch(0.65 0.20 350); /* #EC4899 */
--v-blue-dark: oklch(0.40 0.12 245); /* #1E3A8A */
--v-error-dark: oklch(0.35 0.10 25); /* #7F1D1D */
/* --- Borders --- */
--v-border-subtle: oklch(0.90 0.005 80); /* #E8E5E0 */
--v-border-default: oklch(0.85 0.005 80); /* #D9D0C3 */
--v-border-strong: oklch(0.70 0.005 80); /* #A8A098 */
--v-border-focus: var(--v-accent);
--v-border: var(--v-border-default); /* shorthand alias (118 uses) */
/* ============================================================
TYPOGRAPHY
============================================================ */
/* --- Font families --- */
--v-font-display: 'Satoshi', -apple-system, system-ui, sans-serif;
--v-font-body: 'Geist', -apple-system, system-ui, sans-serif;
--v-font-mono: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace;
/* --- Type scale (fixed) --- */
--v-text-xs: 0.75rem; /* 12px */
--v-text-sm: 0.8125rem; /* 13px */
--v-text-base: 0.875rem; /* 14px — body dense (dashboard) */
--v-text-md: 1rem; /* 16px — body comfortable */
--v-text-lg: 1.125rem; /* 18px */
--v-text-xl: 1.25rem; /* 20px */
--v-text-2xl: 1.5rem; /* 24px */
--v-text-3xl: 2rem; /* 32px */
--v-text-4xl: 2.5rem; /* 40px */
--v-text-5xl: 3rem; /* 48px */
/* --- Fluid type (clamp) --- */
--v-fluid-sm: clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem);
--v-fluid-base: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
--v-fluid-lg: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
--v-fluid-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem);
--v-fluid-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
/* --- Line heights --- */
--v-leading-none: 1;
--v-leading-tight: 1.2;
--v-leading-snug: 1.35;
--v-leading-normal: 1.5;
--v-leading-relaxed: 1.625;
/* --- Letter spacing --- */
--v-tracking-tighter: -0.02em;
--v-tracking-tight: -0.01em;
--v-tracking-normal: 0;
--v-tracking-wide: 0.05em;
--v-tracking-wider: 0.08em;
/* --- Weights --- */
--v-weight-light: 300;
--v-weight-regular: 400;
--v-weight-medium: 500;
--v-weight-semibold: 600;
--v-weight-bold: 700;
--v-weight-extrabold: 800;
/* ============================================================
SPACING (base 4px)
============================================================ */
--v-space-0: 0;
--v-space-px: 1px;
--v-space-0-5: 0.125rem; /* 2px */
--v-space-1: 0.25rem; /* 4px */
--v-space-1-5: 0.375rem; /* 6px */
--v-space-2: 0.5rem; /* 8px */
--v-space-2-5: 0.625rem; /* 10px */
--v-space-3: 0.75rem; /* 12px */
--v-space-3-5: 0.875rem; /* 14px */
--v-space-4: 1rem; /* 16px */
--v-space-5: 1.25rem; /* 20px */
--v-space-6: 1.5rem; /* 24px */
--v-space-7: 1.75rem; /* 28px */
--v-space-8: 2rem; /* 32px */
--v-space-10: 2.5rem; /* 40px */
--v-space-12: 3rem; /* 48px */
--v-space-16: 4rem; /* 64px */
--v-space-20: 5rem; /* 80px */
--v-space-24: 6rem; /* 96px */
/* ============================================================
BORDER RADIUS
============================================================ */
--v-radius-none: 0;
--v-radius-xs: 4px;
--v-radius-sm: 6px;
--v-radius-md: 8px;
--v-radius-lg: 12px;
--v-radius-xl: 16px;
--v-radius-2xl: 20px;
--v-radius-full: 9999px;
/* Contextual aliases */
--v-radius-badge: var(--v-radius-xs);
--v-radius-button: var(--v-radius-sm);
--v-radius-input: var(--v-radius-sm);
--v-radius-card: var(--v-radius-md);
--v-radius-modal: var(--v-radius-lg);
--v-radius-dropdown: var(--v-radius-md);
/* ============================================================
SHADOWS (warm undertones — dual-layer)
============================================================ */
--v-shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04);
--v-shadow-sm: 0 1px 3px rgba(28, 25, 23, 0.06),
0 1px 2px rgba(28, 25, 23, 0.04);
--v-shadow-md: 0 4px 8px rgba(28, 25, 23, 0.08),
0 0 0 1px rgba(28, 25, 23, 0.04);
--v-shadow-lg: 0 8px 24px rgba(28, 25, 23, 0.12),
0 0 0 1px rgba(28, 25, 23, 0.04);
--v-shadow-xl: 0 16px 48px rgba(28, 25, 23, 0.16),
0 0 0 1px rgba(28, 25, 23, 0.04);
--v-shadow-2xl: 0 25px 50px -12px rgba(28, 25, 23, 0.25);
/* Focus ring */
--v-ring-width: 2px;
--v-ring-offset: 2px;
--v-ring-color: var(--v-accent);
--v-ring: 0 0 0 var(--v-ring-offset) var(--v-bg-base),
0 0 0 calc(var(--v-ring-offset) + var(--v-ring-width)) var(--v-ring-color);
/* Colored shadows */
--v-shadow-accent: 0 4px 14px rgba(227, 30, 36, 0.25);
--v-shadow-error: 0 4px 14px rgba(211, 47, 47, 0.25);
--v-shadow-gold: 0 4px 14px rgba(184, 134, 11, 0.25);
/* ============================================================
MOTION
============================================================ */
--v-duration-instant: 80ms;
--v-duration-micro: 120ms;
--v-duration-fast: 150ms;
--v-duration-normal: 250ms;
--v-duration-slow: 400ms;
--v-duration-slower: 600ms;
--v-ease-default: cubic-bezier(0.16, 1, 0.3, 1);
--v-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
--v-ease-out: cubic-bezier(0, 0.55, 0.45, 1);
--v-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
--v-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* ============================================================
LAYOUT
============================================================ */
--v-sidebar-width: 240px;
--v-sidebar-collapsed: 64px;
--v-topbar-height: 48px;
--v-content-max: 1200px;
--v-page-padding: var(--v-space-6); /* 24px */
--v-page-padding-lg: var(--v-space-8); /* 32px */
--v-card-gap: var(--v-space-4); /* 16px */
--v-section-gap: var(--v-space-8); /* 32px */
/* Breakpoints (for reference — CSS custom properties cannot be used in @media) */
/* xs: 480px | sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px */
/* ============================================================
Z-INDEX (semantic scale)
============================================================ */
--v-z-behind: -1;
--v-z-base: 0;
--v-z-dropdown: 100;
--v-z-sticky: 200;
--v-z-fixed: 300;
--v-z-modal-backdrop: 400;
--v-z-modal: 500;
--v-z-popover: 600;
--v-z-tooltip: 700;
--v-z-toast: 800;
--v-z-overlay: var(--v-z-modal-backdrop);
--v-z-max: 9999;
/* ============================================================
GLASS (glassmorphism)
============================================================ */
--v-glass-bg: oklch(1.00 0 0 / 0.75);
--v-glass-border: oklch(1.00 0 0 / 0.20);
--v-glass-blur: blur(20px);
--v-glass-blur-lg: blur(40px);
/* ============================================================
ALIASES — backward-compat naming conventions used across pages
============================================================ */
/* Surface shorthand (--v-surface-N → bg tokens) */
--v-surface-0: var(--v-bg-surface);
--v-surface-1: var(--v-bg-elevated);
--v-surface-2: var(--v-bg-muted);
/* Text shorthand (--v-text-N → text tokens) */
--v-text-1: var(--v-text-primary);
--v-text-2: var(--v-text-secondary);
/* Typography size aliases (--v-font-size-* → --v-text-*) */
--v-font-size-xs: var(--v-text-xs);
--v-font-size-sm: var(--v-text-sm);
--v-font-size-md: var(--v-text-md);
--v-font-size-lg: var(--v-text-lg);
--v-font-size-xl: var(--v-text-xl);
--v-font-size-2xl: var(--v-text-2xl);
--v-font-size-3xl: var(--v-text-3xl);
--v-font-size-4xl: var(--v-text-4xl);
/* Line-height aliases */
--v-line-height-relaxed: var(--v-leading-relaxed);
/* Weight aliases */
--v-font-weight-semibold: var(--v-weight-semibold);
--v-font-weight-bold: var(--v-weight-bold);
--v-weight-normal: var(--v-weight-regular);
/* Spacing aliases (--v-spacing-* → --v-space-*) */
--v-spacing-xs: var(--v-space-1); /* 4px */
--v-spacing-sm: var(--v-space-2); /* 8px */
--v-spacing-md: var(--v-space-4); /* 16px */
--v-spacing-lg: var(--v-space-6); /* 24px */
--v-spacing-xl: var(--v-space-8); /* 32px */
--v-spacing-2xl: var(--v-space-12); /* 48px */
--v-spacing-3xl: var(--v-space-16); /* 64px */
/* Focus ring alias */
--v-ring-accent: var(--v-ring-color);
/* Transition shorthand */
--v-transition-base: var(--v-duration-normal) var(--v-ease-default);
/* ============================================================
LEGACY ALIASES — --veta-* → --v-* migration bridge
Used by finances, projections, objectifs, organigramme, etc.
============================================================ */
/* Brand */
--veta-red: var(--v-red);
--veta-dark-red: var(--v-red-dark);
--veta-signature: var(--v-accent);
/* Semantic */
--veta-success: var(--v-success);
--veta-warning: var(--v-warning);
--veta-error: var(--v-error);
--veta-info: var(--v-info);
/* Named colors */
--veta-blue: var(--v-blue);
--veta-green: var(--v-green);
--veta-orange: #f97316;
--veta-purple: var(--v-purple);
/* Neutrals */
--veta-white: #ffffff;
--veta-black: #0a0a0a;
--veta-gray: #52525b;
--veta-gray-light: #f4f4f5;
--veta-gray-dark: #18181b;
--veta-border: var(--v-border);
} /* end :root */
/* ============================================================
COLORS : DARK MODE — @media (prefers-color-scheme: dark)
============================================================ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* --- Backgrounds --- */
--v-bg-base: oklch(0.15 0.005 80); /* #1C1917 */
--v-bg-surface: oklch(0.18 0.005 80); /* #222220 */
--v-bg-elevated: oklch(0.22 0.005 80); /* #2C2A28 */
--v-bg-subtle: oklch(0.13 0.005 80); /* #171514 */
--v-bg-muted: oklch(0.25 0.005 80); /* #333130 */
--v-bg-accent: oklch(0.25 0.04 25);
--v-bg-overlay: oklch(0.05 0.005 80 / 0.7);
--v-bg-primary: oklch(0.17 0.005 80); /* dark primary surface */
/* --- Text --- */
--v-text-primary: oklch(0.93 0.005 80); /* #EAE8E5 */
--v-text-secondary: oklch(0.65 0.005 80); /* #9B9590 */
--v-text-muted: oklch(0.50 0.005 80); /* #706B66 */
--v-text-inverse: oklch(0.15 0.005 80); /* #1C1917 */
/* --- Accent (brighter red in dark mode) --- */
--v-accent: oklch(0.62 0.22 25); /* brighter red */
--v-accent-hover: oklch(0.67 0.20 25);
--v-accent-active: oklch(0.55 0.22 25);
--v-accent-dark: oklch(0.55 0.22 25);
/* --- Borders --- */
--v-border-subtle: oklch(0.25 0.005 80);
--v-border-default: oklch(0.32 0.005 80);
--v-border-strong: oklch(0.45 0.005 80);
/* --- Glass (dark variant) --- */
--v-glass-bg: oklch(0.15 0.005 80 / 0.75);
--v-glass-border: oklch(1.00 0 0 / 0.08);
}
}
/* ============================================================
COLORS : DARK MODE — Manual toggle [data-theme="dark"]
Same values as @media (prefers-color-scheme: dark)
============================================================ */
[data-theme="dark"] {
/* --- Backgrounds --- */
--v-bg-base: oklch(0.15 0.005 80); /* #1C1917 */
--v-bg-surface: oklch(0.18 0.005 80); /* #222220 */
--v-bg-elevated: oklch(0.22 0.005 80); /* #2C2A28 */
--v-bg-subtle: oklch(0.13 0.005 80); /* #171514 */
--v-bg-muted: oklch(0.25 0.005 80); /* #333130 */
--v-bg-accent: oklch(0.25 0.04 25);
--v-bg-overlay: oklch(0.05 0.005 80 / 0.7);
--v-bg-primary: oklch(0.17 0.005 80); /* dark primary surface */
/* --- Text --- */
--v-text-primary: oklch(0.93 0.005 80); /* #EAE8E5 */
--v-text-secondary: oklch(0.65 0.005 80); /* #9B9590 */
--v-text-muted: oklch(0.50 0.005 80); /* #706B66 */
--v-text-inverse: oklch(0.15 0.005 80); /* #1C1917 */
/* --- Accent (brighter red in dark mode) --- */
--v-accent: oklch(0.62 0.22 25); /* brighter red */
--v-accent-hover: oklch(0.67 0.20 25);
--v-accent-active: oklch(0.55 0.22 25);
--v-accent-dark: oklch(0.55 0.22 25);
/* --- Borders --- */
--v-border-subtle: oklch(0.25 0.005 80);
--v-border-default: oklch(0.32 0.005 80);
--v-border-strong: oklch(0.45 0.005 80);
/* --- Glass (dark variant) --- */
--v-glass-bg: oklch(0.15 0.005 80 / 0.75);
--v-glass-border: oklch(1.00 0 0 / 0.08);
}
/* ============================================================
MOTION : prefers-reduced-motion
All durations set to 0ms for users who prefer reduced motion.
============================================================ */
@media (prefers-reduced-motion: reduce) {
:root {
--v-duration-instant: 0ms;
--v-duration-micro: 0ms;
--v-duration-fast: 0ms;
--v-duration-normal: 0ms;
--v-duration-slow: 0ms;
--v-duration-slower: 0ms;
}
}