/* ============================================================ Flying Fries — Admin design tokens Bimodal light/dark via [data-theme] on (no reload). Default = light. Add data-theme="dark" on to switch. ============================================================ */ :root, :root[data-theme="light"] { /* Backgrounds */ --admin-bg: #fafafa; --admin-bg-card: #ffffff; --admin-bg-input: #ffffff; --admin-bg-sidebar: #f3f3f3; --admin-bg-hover: #f0f0f0; /* Text */ --admin-text: #1a1a1a; --admin-text-muted: #737373; --admin-text-faint: #a3a3a3; /* Borders */ --admin-border: #e5e5e5; --admin-border-focus: #1a1a1a; /* Accent (gold) — same in light/dark */ --admin-accent: #C2991E; --admin-accent-faint: #C2991E18; --admin-accent-30: #C2991E4D; /* Semantic — danger */ --admin-danger: #dc2626; --admin-danger-faint: #dc262610; --admin-danger-30: #dc26264D; /* Semantic — success */ --admin-success: #16a34a; --admin-success-faint: #16a34a10; /* Semantic — info */ --admin-info: #0F76EF; --admin-info-faint: #0F76EF18; /* Shadows */ --admin-shadow-popup: 0 8px 24px rgba(0, 0, 0, 0.12); --admin-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.10); } :root[data-theme="dark"] { --admin-bg: #1a1a1a; --admin-bg-card: #242424; --admin-bg-input: #2c2c2c; --admin-bg-sidebar: #1e1e1e; --admin-bg-hover: #333333; --admin-text: #e5e5e5; --admin-text-muted: #b0b0b0; --admin-text-faint: #808080; --admin-border: #383838; --admin-border-focus: #e5e5e5; --admin-accent: #C2991E; --admin-accent-faint: #C2991E20; --admin-accent-30: #C2991E55; --admin-danger: #ef4444; --admin-danger-faint: #ef444420; --admin-danger-30: #ef444455; --admin-success: #22c55e; --admin-success-faint: #22c55e18; --admin-info: #0F76EF; --admin-info-faint: #0F76EF20; --admin-shadow-popup: 0 8px 24px rgba(0, 0, 0, 0.50); --admin-shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.40); } /* Typography stacks */ :root { --admin-font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --admin-font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Spacing scale (used by components) */ --admin-space-xs: 4px; --admin-space-sm: 8px; --admin-space-md: 12px; --admin-space-lg: 16px; --admin-space-xl: 24px; --admin-space-2xl: 32px; /* Transitions */ --admin-transition-fast: 0.15s ease; --admin-transition-mid: 0.25s ease; }