/* ================================================================ ShellStation Design System — Tokens Source unique des tokens visuels. Thème CLAIR par défaut (:root), thème SOMBRE via [data-theme="dark"] sur . Rupture nette : nouveaux noms de tokens (pas d'alias --brand/--panel*). ================================================================ */ :root { /* ── Couleurs — Surfaces (clair) ────────────────────────────── */ --bg: #f1f3f6; --surface: #ffffff; --surface-2: #f7f8fa; --surface-3: #eef0f4; --border: #e2e5ec; --border-soft: #edeff3; /* ── Couleurs — Texte ───────────────────────────────────────── */ --text: #14171f; --muted: #5c6472; --faint: #99a0ad; /* ── Couleurs — Accent (verrouillé) ─────────────────────────── */ --accent: #f8485e; --accent-soft: #ffe9ec; --accent-ink: #c2253a; --accent-contrast: #ffffff; /* ── Couleurs — Sémantique ──────────────────────────────────── */ --success: #16a34a; --success-soft: #dcfce7; --success-ink: #16a34a; --warn: #d97706; --warn-soft: #fef3c7; --danger: #dc2626; --danger-soft: #fee2e2; --blue: #2563eb; --blue-soft: #dbeafe; /* ── Couleurs — Terminal (toujours sombre, indépendant du thème) */ --term-bg: #0b0d12; --term-surface: #10131a; --term-border: #21262f; --term-text: #c3cad8; --term-dim: #6b7385; --term-accent: #f8485e; --term-ok: #4ade80; /* ── Ombres (clair) ─────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(20,23,31,0.06); --shadow-md: 0 8px 24px rgba(20,23,31,0.10); --shadow-lg: 0 20px 50px rgba(20,23,31,0.18); /* ── Typographie ────────────────────────────────────────────── */ --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --text-3xs: 10.5px; --text-2xs: 11px; --text-xs: 12px; --text-sm: 13.5px; --text-base: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 30px; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-label: 0.1em; --tracking-wide: 0.16em; /* ── Espacements ────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; /* ── Rayons (géométrie nette) ───────────────────────────────── */ --radius-sm: 2px; --radius: 3px; --radius-md: 4px; --radius-lg: 4px; --radius-full: 999px; /* ── Layout ─────────────────────────────────────────────────── */ --sidebar-width: 248px; --topbar-height: 64px; --content-max-width: 1180px; } /* ── Thème SOMBRE ─────────────────────────────────────────────── */ :root[data-theme="dark"] { --bg: #0f1117; --surface: #171a21; --surface-2: #1c202a; --surface-3: #21262f; --border: #282e3a; --border-soft: #21262f; --text: #eceef3; --muted: #8b93a3; --faint: #6b7385; --accent: #f8485e; --accent-soft: rgba(248,72,94,0.14); --accent-ink: #ff9aa8; --accent-contrast: #ffffff; --success: #4ade80; --success-soft: rgba(74,222,128,0.13); --success-ink: #6ee79a; --warn: #fbbf24; --warn-soft: rgba(251,191,36,0.13); --danger: #f87171; --danger-soft: rgba(248,113,113,0.13); --blue: #60a5fa; --blue-soft: rgba(96,165,250,0.13); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 8px 24px rgba(0,0,0,0.45); --shadow-lg: 0 20px 50px rgba(0,0,0,0.5); }