/* ========================================================================== Ognimohub Brand Tokens — v2.0 Source: Ognimohub Brand Identity Guidelines v1.0 Scope: templates/ogni only. Does NOT affect templates/basic. ========================================================================== */ :root { /* Primary palette */ --ogni-purple-600: #6C3EF4; --ogni-purple-500: #7C4DFF; --ogni-purple-700: #5B2EE8; --ogni-accent: #A78BFA; --ogni-gold: #D4AF37; /* Light theme (default) */ --ogni-bg: #FAFAFC; --ogni-bg-rgb: 250,250,252; --ogni-surface: #FFFFFF; --ogni-card: #FFFFFF; --ogni-text: #151823; --ogni-text-secondary: #5C6475; /* Semantic */ --ogni-success: #16A34A; --ogni-error: #F04438; --ogni-warning: #F79009; --ogni-info: #2E90FA; /* Radii (8pt system) */ --ogni-radius-btn: 14px; --ogni-radius-card: 20px; --ogni-radius-dialog: 24px; /* Spacing */ --ogni-space-1: 8px; --ogni-space-2: 16px; --ogni-space-3: 24px; --ogni-space-4: 32px; --ogni-space-5: 40px; --ogni-space-6: 48px; --ogni-space-8: 64px; /* Motion */ --ogni-ease: cubic-bezier(0.16, 1, 0.3, 1); --ogni-dur-hover: 150ms; --ogni-dur-press: 120ms; --ogni-dur-card: 220ms; --ogni-dur-dialog: 250ms; --ogni-dur-drawer: 300ms; /* Elevation */ --ogni-shadow-sm: 0 1px 3px rgba(21,24,35,0.07), 0 1px 2px rgba(21,24,35,0.04); --ogni-shadow-md: 0 8px 24px rgba(21,24,35,0.09); --ogni-shadow-lg: 0 24px 56px rgba(21,24,35,0.13); --ogni-shadow-purple: 0 8px 28px rgba(108,62,244,0.28); } /* Dark theme — activated by data-theme="dark" on (set by dark-mode.js before first paint, no flash) */ [data-theme="dark"] { --ogni-bg: #0F0B22; --ogni-bg-rgb: 15,11,34; --ogni-surface: #17152E; --ogni-card: #211D42; --ogni-text: #FFFFFF; --ogni-text-secondary: #C9CEE5; --ogni-shadow-sm: 0 1px 3px rgba(0,0,0,0.35); --ogni-shadow-md: 0 8px 24px rgba(0,0,0,0.45); --ogni-shadow-lg: 0 24px 56px rgba(0,0,0,0.6); --ogni-shadow-purple: 0 8px 28px rgba(108,62,244,0.4); } /* Focus ring — Purple 600, WCAG AA */ .ogni-page *:focus-visible { outline: 2px solid var(--ogni-purple-600); outline-offset: 2px; border-radius: 4px; }