/* ============================================================================ ds-tokens.css — ZKemail unified design tokens (SINGLE SOURCE OF TRUTH) ---------------------------------------------------------------------------- Replaces the two parallel token sets: • ui/css/ops.css (:root --ops-* block) • ui/css/design-tokens.css (:root --color-* / --space-* / ... block) One namespace: --ds-*. Both themes resolve from the SAME keys via [data-theme]. A compatibility layer at the bottom keeps every existing page working unchanged (--ops-* and --color-* now alias to --ds-*), so this can ship before any page-level refactor. LOAD ORDER: first stylesheet on every page, before ops.css / Bootstrap. ========================================================================== */ /* ── Canonical tokens — DARK (default) ───────────────────────────────────── */ :root, [data-theme="dark"] { /* Surfaces */ --ds-bg: #0b0d12; --ds-surface: #11141b; --ds-surface-2: #161a23; --ds-surface-hover: #161a23; --ds-border: #232838; --ds-border-strong: #2e3548; /* Text */ --ds-text: #e2e8f0; --ds-text-secondary: #cbd5e1; --ds-text-muted: #8993a8; --ds-text-faint: #5a6378; /* Brand */ --ds-primary: #3b82f6; --ds-primary-hover: #2563eb; --ds-primary-light: #60a5fa; /* Semantic — CANONICAL values (resolves the ops.css ↔ design-tokens.css conflict) */ --ds-success: #10b981; --ds-warning: #f59e0b; --ds-danger: #ef4444; --ds-info: #38bdf8; /* Accents — promoted out of hard-coded literals into the token system */ --ds-accent-purple: #a855f7; --ds-accent-orange: #f97316; --ds-accent-cyan: #06b6d4; /* Severity badge pairs (bg / fg) */ --ds-sev-critical-bg: #7f1d1d; --ds-sev-critical-fg: #fecaca; --ds-sev-high-bg: #991b1b; --ds-sev-high-fg: #fee2e2; --ds-sev-medium-bg: #92400e; --ds-sev-medium-fg: #fde68a; --ds-sev-low-bg: #065f46; --ds-sev-low-fg: #d1fae5; --ds-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } /* ── Canonical tokens — LIGHT ────────────────────────────────────────────── */ [data-theme="light"] { --ds-bg: #f6f7fb; --ds-surface: #ffffff; --ds-surface-2: #f0f2f8; --ds-surface-hover: #f0f2f8; --ds-border: #e2e6ef; --ds-border-strong: #cdd3e0; --ds-text: #1a1f2e; --ds-text-secondary: #2b3344; --ds-text-muted: #5b6478; --ds-text-faint: #98a0b3; --ds-primary: #3a6df0; --ds-primary-hover: #2856d6; --ds-primary-light: #6b93f5; --ds-success: #0d9488; --ds-warning: #d97706; --ds-danger: #dc2626; --ds-info: #0284c7; --ds-accent-purple: #9333ea; --ds-accent-orange: #ea580c; --ds-accent-cyan: #0891b2; --ds-shadow: 0 2px 12px rgba(15, 23, 42, 0.07); } /* ── Theme-independent scales ────────────────────────────────────────────── */ :root { /* Typography */ --ds-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ds-font-mono: 'JetBrains Mono', ui-monospace, 'Consolas', monospace; --ds-text-xs: 11px; --ds-text-sm: 12px; --ds-text-base: 14px; --ds-text-md: 16px; --ds-text-lg: 18px; --ds-text-xl: 20px; --ds-text-2xl: 24px; --ds-text-3xl: 28px; --ds-text-4xl: 32px; --ds-weight-normal: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700; --ds-weight-extrabold: 800; /* Spacing — 8px base */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-12: 48px; /* Radius */ --ds-radius-sm: 6px; --ds-radius: 10px; --ds-radius-lg: 14px; --ds-radius-full: 9999px; /* Layout */ --ds-rail-w: 52px; } /* ============================================================================ COMPATIBILITY LAYER — keeps existing pages working with zero edits. Delete a block once the corresponding old token name is fully retired. ========================================================================== */ /* ops.css --ops-* → --ds-* (delete the :root block in ops.css after this ships) */ :root, [data-theme] { --ops-bg: var(--ds-bg); --ops-bg-elev: var(--ds-surface); --ops-bg-elev-2: var(--ds-surface-2); --ops-border: var(--ds-border); --ops-border-strong: var(--ds-border-strong); --ops-text: var(--ds-text); --ops-text-muted: var(--ds-text-muted); --ops-text-faint: var(--ds-text-faint); --ops-primary: var(--ds-primary); --ops-primary-hover: var(--ds-primary-hover); --ops-success: var(--ds-success); --ops-warning: var(--ds-warning); --ops-danger: var(--ds-danger); --ops-info: var(--ds-info); --ops-shadow: var(--ds-shadow); --ops-radius: var(--ds-radius); --ops-radius-sm: var(--ds-radius-sm); --ops-rail-w: var(--ds-rail-w); --ops-font: var(--ds-font); --ops-font-mono: var(--ds-font-mono); } /* design-tokens.css --color-* → --ds-* (delete design-tokens.css :root block) */ :root, [data-theme] { --color-primary: var(--ds-primary); --color-primary-dark: var(--ds-primary-hover); --color-primary-light: var(--ds-primary-light); --color-success: var(--ds-success); /* was #22c55e — now canonical */ --color-warning: var(--ds-warning); /* was #fbbf24 — now canonical */ --color-error: var(--ds-danger); /* was #f87171 — now canonical */ --color-info: var(--ds-info); /* was #0dcaf0 — now canonical */ --color-bg: var(--ds-bg); --color-bg-secondary: var(--ds-surface); --color-surface: var(--ds-surface); --color-surface-hover: var(--ds-surface-hover); --color-border: var(--ds-border); --color-border-light: var(--ds-border-strong); --color-text: var(--ds-text); --color-text-secondary: var(--ds-text-secondary); --color-text-muted: var(--ds-text-muted); --color-text-disabled: var(--ds-text-faint); } /* Legacy per-page aliases (dashboard / pmta / admin / index / infra) → --ds-*. These were previously re-declared on each page's ; declare them once here so those