/* ============================================================= Admin Design System — Tokens Single source of truth for the Mono + Electric editorial pass. All overrides in design-system.css reference these variables. Disable everything by removing the .ds-redesign class on . ============================================================= */ :root { /* ----- Color: surfaces & ink ----- */ --ds-bg: #FAFAFA; --ds-bg-soft: #F4F4F4; --ds-surface: #FFFFFF; --ds-surface-alt: #FCFCFC; --ds-text: #0A0A0A; --ds-text-soft: #1F1F1F; --ds-muted: #737373; --ds-muted-strong: #525252; --ds-border: #E8E8E8; --ds-border-strong: #D4D4D4; --ds-border-hairline: #EFEFEF; /* ----- Color: brand & semantic ----- */ --ds-primary: #4F46E5; --ds-primary-hover: #4338CA; --ds-primary-active: #3730A3; --ds-primary-ink: #FFFFFF; --ds-primary-soft: rgba(79, 70, 229, 0.08); --ds-primary-soft-2: rgba(79, 70, 229, 0.14); --ds-primary-ring: rgba(79, 70, 229, 0.32); --ds-success: #059669; --ds-success-soft: rgba(5, 150, 105, 0.10); --ds-warning: #D97706; --ds-warning-soft: rgba(217, 119, 6, 0.12); --ds-danger: #DC2626; --ds-danger-soft: rgba(220, 38, 38, 0.10); --ds-info: #0EA5E9; --ds-info-soft: rgba(14, 165, 233, 0.10); /* ----- Typography ----- */ --ds-font-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --ds-font-display: 'Fraunces', 'Open Sans', Georgia, serif; --ds-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --ds-fs-display: 2.5rem; /* 40px */ --ds-fs-h1: 1.75rem; /* 28px */ --ds-fs-h2: 1.375rem; /* 22px */ --ds-fs-h3: 1.125rem; /* 18px */ --ds-fs-h4: 1rem; /* 16px */ --ds-fs-body: 0.9375rem; /* 15px */ --ds-fs-small: 0.8125rem; /* 13px */ --ds-fs-caption: 0.6875rem; /* 11px */ --ds-lh-tight: 1.15; --ds-lh-snug: 1.35; --ds-lh-base: 1.55; --ds-tracking-tight: -0.01em; --ds-tracking-flat: 0; --ds-tracking-wide: 0.04em; --ds-tracking-caps: 0.08em; /* ----- Spacing (4px grid) ----- */ --ds-s-1: 4px; --ds-s-2: 8px; --ds-s-3: 12px; --ds-s-4: 16px; --ds-s-5: 20px; --ds-s-6: 24px; --ds-s-7: 32px; --ds-s-8: 40px; --ds-s-9: 56px; --ds-s-10: 72px; /* ----- Radius ----- */ --ds-r-xs: 4px; --ds-r-sm: 6px; --ds-r-md: 10px; --ds-r-lg: 14px; --ds-r-xl: 20px; --ds-r-pill: 999px; /* ----- Elevation (flat-first; shadows used sparingly) ----- */ --ds-shadow-0: 0 0 0 1px var(--ds-border); --ds-shadow-1: 0 1px 2px rgba(10, 10, 10, 0.04); --ds-shadow-2: 0 4px 16px rgba(10, 10, 10, 0.06); --ds-shadow-3: 0 12px 32px rgba(10, 10, 10, 0.10); /* ----- Motion ----- */ --ds-dur-fast: 140ms; --ds-dur-base: 240ms; --ds-dur-slow: 420ms; --ds-ease: cubic-bezier(0.2, 0.7, 0.1, 1); --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ----- Layout ----- */ --ds-sidebar-w: 260px; --ds-sidebar-rail-w: 72px; --ds-header-h: 64px; --ds-content-max: 1440px; /* ----- Z-index ----- */ --ds-z-sidebar: 1030; --ds-z-header: 1040; --ds-z-modal: 1055; --ds-z-toast: 1080; }