/* ========================================================================= EYIS Press ยท design tokens Light is the base. Dark overrides under [data-theme="dark"] and, for System mode (no attribute), under prefers-color-scheme. The reader toggle stamps data-theme on ; the admin default is applied by js/theme-mode.js. Colour presets (data-preset on ) swap the accent triad only. ========================================================================= */ :root { /* ---- typography ---- */ --eyis-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --eyis-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --eyis-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --eyis-font-script: 'Great Vibes', 'Marck Script', cursive; /* ---- accent triad (Gold Editorial) ---- */ --eyis-primary: #0B2341; --eyis-primary-2: #0E3358; --eyis-accent: #D4AF37; --eyis-accent-2: #E9C866; --eyis-hover: #0E5AA7; --eyis-neon: #37D5FF; /* ---- light surfaces ---- */ --eyis-bg: #FFFFFF; --eyis-bg-2: #F5F7FA; --eyis-surface: #FFFFFF; --eyis-surface-2: #F5F7FA; --eyis-border: rgba(11, 35, 65, .12); --eyis-border-2: rgba(11, 35, 65, .2); --eyis-text: #0B2341; --eyis-text-2: #47566B; --eyis-text-3: #6B7A90; --eyis-on-primary: #FFFFFF; --eyis-on-accent: #0B2341; --eyis-danger: #C0392B; --eyis-success: #1E7F4F; --eyis-warning: #B9770E; /* ---- scale ---- */ --eyis-radius: 16px; --eyis-radius-sm: 10px; --eyis-radius-lg: 22px; --eyis-shadow-sm: 0 1px 3px rgba(11, 35, 65, .06), 0 1px 2px rgba(11, 35, 65, .08); --eyis-shadow: 0 10px 30px rgba(11, 35, 65, .08), 0 2px 8px rgba(11, 35, 65, .05); --eyis-shadow-lg: 0 30px 70px rgba(11, 35, 65, .14); --eyis-ring: 0 0 0 3px rgba(14, 90, 167, .35); --eyis-header-h: 116px; /* utility bar + nav */ --eyis-nav-h: 60px; --eyis-max: 1280px; --eyis-gutter: clamp(16px, 4vw, 40px); /* Large / 4K displays: let the column breathe instead of a narrow strip. */ --eyis-motion: 1; /* set to 0 by reduced-motion / admin */ --eyis-ease: cubic-bezier(.22, .61, .36, 1); color-scheme: light; } /* ---- font presets ---- */ :root[data-fonts="nature"] { --eyis-font-heading: 'Merriweather', Georgia, serif; --eyis-font-body: 'Source Sans 3', system-ui, sans-serif; } :root[data-fonts="modern"] { --eyis-font-heading: 'Manrope', system-ui, sans-serif; --eyis-font-body: 'Inter', system-ui, sans-serif; } :root[data-fonts="corporate"] { --eyis-font-heading: 'IBM Plex Serif', Georgia, serif; --eyis-font-body: 'IBM Plex Sans', system-ui, sans-serif; } :root[data-fonts="classic"] { --eyis-font-heading: 'Libre Baskerville', Georgia, serif; --eyis-font-body: 'Lato', system-ui, sans-serif; } /* ---- colour presets (accent triad) ---- */ :root[data-preset="sapphire"] { --eyis-primary:#0A2A5E; --eyis-accent:#3B82F6; --eyis-accent-2:#7CB0FA; --eyis-hover:#1D4ED8; --eyis-on-accent:#062046; } :root[data-preset="emerald"] { --eyis-primary:#06301F; --eyis-accent:#10B981; --eyis-accent-2:#5FD3AE; --eyis-hover:#047857; --eyis-on-accent:#03271A; } :root[data-preset="burgundy"] { --eyis-primary:#3F1220; --eyis-accent:#C0392B; --eyis-accent-2:#E07A6E; --eyis-hover:#96261B; --eyis-on-accent:#FFF; } :root[data-preset="royalPurple"] { --eyis-primary:#2A1A4A; --eyis-accent:#7C3AED; --eyis-accent-2:#A987F2; --eyis-hover:#5B21B6; --eyis-on-accent:#FFF; } :root[data-preset="ocean"] { --eyis-primary:#083344; --eyis-accent:#0891B2; --eyis-accent-2:#4CC7DE; --eyis-hover:#0E7490; --eyis-on-accent:#032530; } :root[data-preset="natureGreen"] { --eyis-primary:#14331A; --eyis-accent:#639922; --eyis-accent-2:#96C459; --eyis-hover:#3B6D11; --eyis-on-accent:#0B1E08; } :root[data-preset="academicGray"] { --eyis-primary:#1F2933; --eyis-accent:#52606D; --eyis-accent-2:#8794A1; --eyis-hover:#323F4B; --eyis-on-accent:#FFF; } :root[data-preset="quantumAI"] { --eyis-primary:#0E3D2C; --eyis-accent:#22C58B; --eyis-accent-2:#4FDBA8; --eyis-hover:#6D7BFF; --eyis-on-accent:#06210F; } :root[data-preset="midnightDark"] { --eyis-primary:#0B1220; --eyis-accent:#6D7BFF; --eyis-accent-2:#9AA5FF; --eyis-hover:#4F5BD5; --eyis-on-accent:#FFF; } /* ---- dark mode ---- */ :root[data-theme="dark"] { --eyis-bg: #071421; --eyis-bg-2: #0B1C2C; --eyis-surface: #102536; --eyis-surface-2: #0B1C2C; --eyis-border: #1E3A4D; --eyis-border-2: #2C4A60; --eyis-text: #EAF1F8; --eyis-text-2: #A9BED0; --eyis-text-3: #7F97AC; --eyis-primary: #EAF1F8; /* on dark, "primary" text/bars go light */ --eyis-primary-2: #C9DAEA; --eyis-on-primary: #071421; --eyis-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4); --eyis-shadow: 0 14px 40px rgba(0, 0, 0, .45); --eyis-shadow-lg: 0 30px 80px rgba(0, 0, 0, .55); --eyis-ring: 0 0 0 3px rgba(55, 213, 255, .4); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --eyis-bg: #071421; --eyis-bg-2: #0B1C2C; --eyis-surface: #102536; --eyis-surface-2: #0B1C2C; --eyis-border: #1E3A4D; --eyis-border-2: #2C4A60; --eyis-text: #EAF1F8; --eyis-text-2: #A9BED0; --eyis-text-3: #7F97AC; --eyis-primary: #EAF1F8; --eyis-primary-2: #C9DAEA; --eyis-on-primary: #071421; --eyis-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4); --eyis-shadow: 0 14px 40px rgba(0, 0, 0, .45); --eyis-shadow-lg: 0 30px 80px rgba(0, 0, 0, .55); --eyis-ring: 0 0 0 3px rgba(55, 213, 255, .4); color-scheme: dark; } } @media (min-width: 1600px) { :root { --eyis-max: 1460px; } } @media (min-width: 2000px) { :root { --eyis-max: 1600px; } } @media (min-width: 2600px) { :root { --eyis-max: 1760px; } } @media (prefers-reduced-motion: reduce) { :root { --eyis-motion: 0; } }