/* * Admin Panel — Token Bridge * * Re-exports v2-tokens.css values under admin-prefixed names so the admin * panel has one source of truth for color / spacing / radius / shadow. * * Load order (admin/index.html ): * 1. tailwind.css * 2. admin/css/admin.css (legacy admin styles — being migrated) * 3. css/design-system-v2.css (shared v2 surface rules) * 4. css/v2-tokens.css (defines --v2-* on body.app-v2-enabled) * 5. admin/css/admin-tokens.css (THIS FILE — aliases v2 -> admin) * 6. admin/css/admin-shell.css (sidebar + header layout overrides) * * Scope: body[data-page="admin"] only. Never leaks to other v2 pages. * * Rule: every new admin CSS rule must source colors/spacing/radius from * --admin-* vars defined here. Hex literals in admin.css are a migration * debt to be paid down, not a pattern to copy. */ body[data-page="admin"] { /* ── Surfaces ──────────────────────────────────────────────────── */ --admin-bg: var(--v2-bg); --admin-surface: var(--v2-surface); --admin-surface-raised: var(--v2-surface-soft); --admin-surface-strong: var(--v2-surface-strong); --admin-surface-elevated:var(--v2-surface-elevated); --admin-border: var(--v2-border); --admin-border-strong: var(--v2-border-strong); /* ── Text ──────────────────────────────────────────────────────── */ --admin-text: var(--v2-text); --admin-text-muted: var(--v2-muted); --admin-text-subtle: rgba(168, 177, 189, 0.72); --admin-text-on-accent: #ffffff; /* ── Accent + Status ───────────────────────────────────────────── */ --admin-accent: var(--v2-accent); --admin-accent-soft: rgba(20, 184, 166, 0.14); --admin-accent-ring: rgba(20, 184, 166, 0.34); --admin-info: var(--v2-info); --admin-info-soft: rgba(56, 189, 248, 0.14); --admin-success: var(--v2-success); --admin-success-soft: rgba(74, 222, 128, 0.14); --admin-warning: var(--v2-warning); --admin-warning-soft: rgba(251, 191, 36, 0.16); --admin-danger: var(--v2-danger); --admin-danger-soft: rgba(239, 68, 68, 0.14); --admin-attention: var(--v2-attention); /* ── Spacing scale (4px grid) ──────────────────────────────────── */ --admin-space-1: 4px; --admin-space-2: 8px; --admin-space-3: 12px; --admin-space-4: 16px; --admin-space-5: 20px; --admin-space-6: 24px; --admin-space-7: 32px; --admin-space-8: 40px; /* ── Icon scale ────────────────────────────────────────────────── */ --admin-icon-xs: 14px; --admin-icon-sm: 16px; --admin-icon-md: 20px; --admin-icon-lg: 24px; --admin-icon-xl: 32px; /* ── Radii ─────────────────────────────────────────────────────── */ --admin-radius-xs: 4px; --admin-radius-sm: 6px; --admin-radius-md: 10px; --admin-radius-lg: 14px; --admin-radius-pill: 999px; /* ── Elevation ─────────────────────────────────────────────────── */ --admin-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.22); --admin-shadow-2: 0 6px 18px rgba(0, 0, 0, 0.28); --admin-shadow-3: 0 18px 48px rgba(0, 0, 0, 0.32); --admin-focus: var(--v2-focus-ring); /* ── Layout constants ──────────────────────────────────────────── */ --admin-sidebar-width: 248px; --admin-header-height: 64px; --admin-content-max: 1440px; --admin-control-h: 36px; --admin-tap-h: 44px; /* ── Motion ────────────────────────────────────────────────────── */ --admin-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --admin-dur-1: 120ms; --admin-dur-2: 200ms; } /* ── Light-theme adjustments for admin-only tokens ─────────────────── * v2-tokens.css already flips --v2-* under html[data-theme="light"], so * admin tokens that simply alias --v2-* update automatically. The * overrides below only target admin tokens that aren't direct aliases * (the *-soft tints and shadows) so they remain readable on light bg. */ html[data-theme="light"] body[data-page="admin"] { --admin-text-subtle: rgba(82, 97, 115, 0.72); --admin-accent-soft: rgba(15, 118, 110, 0.10); --admin-accent-ring: rgba(15, 118, 110, 0.30); --admin-info-soft: rgba(2, 132, 199, 0.10); --admin-success-soft: rgba(21, 128, 61, 0.10); --admin-warning-soft: rgba(180, 83, 9, 0.12); --admin-danger-soft: rgba(220, 38, 38, 0.10); --admin-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06); --admin-shadow-2: 0 6px 18px rgba(15, 23, 42, 0.10); --admin-shadow-3: 0 18px 48px rgba(15, 23, 42, 0.14); }