/* ============================================================ ArbiRef · Design tokens — écosystème Handball Amateur Source : Design System v1 · April 2026 ============================================================ */ :root { /* ---------- Marque ombrelle ---------- */ --ha-violet-50: #f3f2fb; --ha-violet-100: #e4e2f5; --ha-violet-200: #cac6ec; --ha-violet-300: #a8a3dd; --ha-violet-400: #8b86cd; --ha-violet-500: #6f68be; /* signature ombrelle */ --ha-violet-600: #5b52a8; --ha-violet-700: #4a4289; --ha-violet-800: #3c3770; --ha-violet-900: #2f2b56; /* ---------- Accent ArbiRef ---------- */ --arbiref-primary: #E8463B; /* rouge sifflet, évolution du rouge HBS historique */ --arbiref-hover: #c8362c; --arbiref-grad-from: #F57569; --arbiref-grad-to: #b52a22; /* Alias génériques — permet aux composants partagés de fonctionner */ --accent: var(--arbiref-primary); --accent-hover: var(--arbiref-hover); /* ---------- Sémantique partagée ---------- */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6; /* Canaux RGB — pour rgba(var(--success-rgb), 0.X) dans les inline styles */ --success-rgb: 16, 185, 129; --warning-rgb: 245, 158, 11; --danger-rgb: 239, 68, 68; --info-rgb: 59, 130, 246; /* ---------- Radii ---------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 9999px; /* ---------- Accent CoachBox ---------- */ --coachbox-primary: #0FA58E; --coachbox-hover: #0c8a76; /* ---------- Ombres ---------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,.25); --shadow-md: 0 4px 16px rgba(0,0,0,.35); --shadow-lg: 0 16px 40px rgba(0,0,0,.45); --shadow-glow: 0 0 0 6px color-mix(in oklab, var(--accent) 18%, transparent); /* ---------- Spacing · multiples de 4 ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; /* ---------- Typographie ---------- */ --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace; /* ---------- Neutres dark ---------- */ --d-bg: #0b0b10; --d-surface: #14141c; --d-surface-2: #1c1c26; --d-border: #262631; --d-border-soft: #1e1e28; --d-text: #f1f0f5; --d-text-dim: #9a98aa; --d-text-muted: #6b6979; /* ---------- Neutres light ---------- */ --l-bg: #f7f6fb; --l-surface: #ffffff; --l-surface-2: #f0eef7; --l-border: #e4e1ee; --l-border-soft: #eeecf4; --l-text: #14131c; --l-text-dim: #5d5a6f; --l-text-muted: #85829a; } /* Resolver : on bascule via data-theme="dark" | "light" sur */ html[data-theme="dark"], :root:not([data-theme]) { --bg: var(--d-bg); --surface: var(--d-surface); --surface-2: var(--d-surface-2); --border: var(--d-border); --border-soft: var(--d-border-soft); --text: var(--d-text); --text-dim: var(--d-text-dim); --text-muted: var(--d-text-muted); /* Bridge — anciens noms utilisés par les composants */ --bg-page: var(--d-bg); --bg-card: var(--d-surface); --bg-hover: var(--d-surface-2); --bg-input: var(--d-bg); --border-light: var(--d-border-soft); --text-primary: var(--d-text); --text-secondary: var(--d-text-dim); --text-placeholder: #4a4a4a; --text-empty: #444444; color-scheme: dark; } html[data-theme="light"] { --bg: var(--l-bg); --surface: var(--l-surface); --surface-2: var(--l-surface-2); --border: var(--l-border); --border-soft: var(--l-border-soft); --text: var(--l-text); --text-dim: var(--l-text-dim); --text-muted: var(--l-text-muted); /* Bridge — anciens noms utilisés par les composants */ --bg-page: var(--l-bg); --bg-card: var(--l-surface); --bg-hover: var(--l-surface-2); --bg-input: var(--l-surface); --border-light: var(--l-border-soft); --text-primary: var(--l-text); --text-secondary: var(--l-text-dim); --text-placeholder: var(--l-text-muted); --text-empty: var(--l-text-dim); color-scheme: light; }