/** * Wapu Auth admin design tokens. * * Neutral system: white surfaces, one blue for identity and action, and a * blue-leaning gray ramp for structure. No neon, no decorative gradients. * Shape and motion follow iOS softness with Material Design 3 proportions. * * Breakpoints used by the component/page layers: * compact 600px, WordPress mobile 782px, tablet 960px, wide 1200px. */ body.toplevel_page_wapu-auth-social-login, .wapu-auth-admin-shell { color-scheme: light; /* Primary — the single accent: identity, primary actions, active states. */ --wapu-color-primary-50: #f2f6fd; --wapu-color-primary-100: #e3ecfb; --wapu-color-primary-200: #c6d9f6; --wapu-color-primary-300: #9dbdef; --wapu-color-primary-400: #6396e3; --wapu-color-primary-500: #2f6fd0; --wapu-color-primary-600: #1d5bb8; --wapu-color-primary-700: #17498f; --wapu-color-primary-800: #143b71; --wapu-color-primary-900: #102d55; /* Secondary — ink and structure (text, borders, quiet surfaces). */ --wapu-color-secondary-50: #f7f9fc; --wapu-color-secondary-100: #eef2f7; --wapu-color-secondary-200: #e4e9f1; --wapu-color-secondary-300: #cfd8e4; --wapu-color-secondary-400: #97a4b8; --wapu-color-secondary-500: #5b6b82; --wapu-color-secondary-600: #46566d; --wapu-color-secondary-700: #33415a; --wapu-color-secondary-800: #212b3d; --wapu-color-secondary-900: #131b2c; /* Accent — kept as a quieter blue so highlights never leave the palette. */ --wapu-color-accent-100: var(--wapu-color-primary-100); --wapu-color-accent-500: var(--wapu-color-primary-400); --wapu-color-accent-600: var(--wapu-color-primary-500); /* Neutral canvas and surfaces. */ --wapu-color-canvas: #f6f8fb; --wapu-color-surface: #ffffff; --wapu-color-surface-subtle: var(--wapu-color-secondary-50); --wapu-color-surface-muted: var(--wapu-color-secondary-100); --wapu-color-surface-raised: #ffffff; --wapu-color-text-strong: var(--wapu-color-secondary-900); --wapu-color-text: var(--wapu-color-secondary-700); --wapu-color-text-muted: var(--wapu-color-secondary-500); --wapu-color-text-inverse: #ffffff; --wapu-color-border: var(--wapu-color-secondary-200); --wapu-color-border-strong: var(--wapu-color-secondary-300); /* Brand scale consumed by the page/component layers. */ --wapu-color-brand-50: var(--wapu-color-primary-50); --wapu-color-brand-100: var(--wapu-color-primary-100); --wapu-color-brand-200: var(--wapu-color-primary-200); --wapu-color-brand-500: var(--wapu-color-primary-500); --wapu-color-brand-600: var(--wapu-color-primary-600); --wapu-color-brand-700: var(--wapu-color-primary-700); --wapu-color-brand-900: var(--wapu-color-primary-900); /* Restrained gradients: a single-hue wash, never a rainbow. */ --wapu-gradient-brand: linear-gradient(135deg, var(--wapu-color-primary-500) 0%, var(--wapu-color-primary-700) 100%); --wapu-gradient-soft: linear-gradient(180deg, var(--wapu-color-surface) 0%, var(--wapu-color-secondary-50) 100%); /* Semantic pairs always include an accessible text color. */ --wapu-color-success-surface: #eff9f4; --wapu-color-success-border: #bfe6d2; --wapu-color-success-text: #0f7a4e; --wapu-color-warning-surface: #fff8ec; --wapu-color-warning-border: #f2dcae; --wapu-color-warning-text: #8a5a06; --wapu-color-danger-surface: #fef4f4; --wapu-color-danger-border: #f3c9c7; --wapu-color-danger-text: #b3261e; --wapu-color-info-surface: var(--wapu-color-primary-50); --wapu-color-info-border: var(--wapu-color-primary-200); --wapu-color-info-text: var(--wapu-color-primary-700); /* Spacing — 4px base, generous by default. */ --wapu-space-1: 4px; --wapu-space-2: 8px; --wapu-space-3: 12px; --wapu-space-4: 16px; --wapu-space-5: 20px; --wapu-space-6: 24px; --wapu-space-8: 32px; --wapu-space-10: 40px; /* Shape — soft iOS geometry on a Material 3 scale. */ --wapu-radius-xs: 6px; --wapu-radius-sm: 10px; --wapu-radius-md: 14px; --wapu-radius-lg: 18px; --wapu-radius-xl: 24px; --wapu-radius-pill: 999px; /* Elevation — low contrast, neutral, never colored except on the accent. */ --wapu-shadow-subtle: 0 1px 2px rgba(19, 27, 44, 0.05); --wapu-shadow-raised: 0 1px 2px rgba(19, 27, 44, 0.04), 0 8px 20px -8px rgba(19, 27, 44, 0.12); --wapu-shadow-overlay: 0 8px 20px -8px rgba(19, 27, 44, 0.12), 0 28px 64px -16px rgba(19, 27, 44, 0.24); --wapu-shadow-primary: 0 1px 2px rgba(29, 91, 184, 0.22), 0 6px 16px -8px rgba(29, 91, 184, 0.38); /* Typography. */ --wapu-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wapu-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace; --wapu-text-xs: 12px; --wapu-text-sm: 13px; --wapu-text-md: 14px; --wapu-text-lg: 16px; --wapu-text-xl: 20px; --wapu-text-2xl: 26px; --wapu-line-tight: 1.25; --wapu-line-normal: 1.55; --wapu-tracking-tight: -0.015em; --wapu-tracking-wide: 0.06em; /* Interaction. State layers follow Material 3 opacities. */ --wapu-focus-color: var(--wapu-color-primary-500); --wapu-focus-ring: 0 0 0 4px rgba(47, 111, 208, 0.20); --wapu-state-hover: rgba(19, 27, 44, 0.045); --wapu-state-pressed: rgba(19, 27, 44, 0.09); --wapu-state-brand-hover: rgba(47, 111, 208, 0.08); --wapu-ease-standard: cubic-bezier(0.2, 0, 0, 1); --wapu-ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --wapu-transition-fast: 140ms cubic-bezier(0.2, 0, 0, 1); --wapu-transition-normal: 240ms cubic-bezier(0.2, 0, 0, 1); --wapu-transition-emphasized: 320ms cubic-bezier(0.05, 0.7, 0.1, 1); /* Layers and layout. */ --wapu-z-sticky: 20; --wapu-z-drawer: 100000; --wapu-z-dialog: 100010; --wapu-z-toast: 100020; --wapu-sidebar-width: 246px; /* Compatibility aliases for existing views during the transition. */ --wapu-auth-bg: var(--wapu-color-canvas); --wapu-auth-white: var(--wapu-color-surface); --wapu-auth-border: var(--wapu-color-border); --wapu-auth-text: var(--wapu-color-text-strong); --wapu-auth-text-secondary: var(--wapu-color-text); --wapu-auth-text-muted: var(--wapu-color-text-muted); --wapu-auth-accent: var(--wapu-color-brand-600); --wapu-auth-accent-light: var(--wapu-color-brand-50); --wapu-auth-success: var(--wapu-color-success-text); --wapu-auth-warning: var(--wapu-color-warning-text); --wapu-auth-error: var(--wapu-color-danger-text); --wapu-auth-radius: var(--wapu-radius-md); --wapu-auth-transition: var(--wapu-transition-fast); --wapu-auth-sidebar-width: var(--wapu-sidebar-width); --wapu-auth-shadow: var(--wapu-shadow-subtle); --wapu-auth-font: var(--wapu-font-sans); --wapu-auth-mono: var(--wapu-font-mono); --wapu-sb-bg: var(--wapu-color-surface); --wapu-sb-text: var(--wapu-color-text); --wapu-sb-text-hover: var(--wapu-color-text-strong); --wapu-sb-active-bg: var(--wapu-color-brand-50); --wapu-sb-active-text: var(--wapu-color-brand-700); --wapu-sb-hover-bg: var(--wapu-color-surface-subtle); --wapu-sb-border: var(--wapu-color-border); --wapu-sb-label: var(--wapu-color-text-muted); }