/* ========================================================================= YuldashevSI001 · 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; --eyis-heading-style: normal; } /* ---- 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; } :root[data-fonts="editorialItalic"] { --eyis-font-heading: 'Cormorant Garamond', Georgia, serif; --eyis-font-body:'Inter',system-ui,sans-serif; --eyis-heading-style:italic; } /* ---- 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; } } /* ========================================================================= v0.3.0 — Seven curated colourways. Each palette defines a complete light surface system, not only an accent. Dark mode derives a deeper companion while preserving the selected accent identity. ========================================================================= */ :root[data-preset="institutionalGold"] { --eyis-primary:#17324D; --eyis-primary-2:#274B6A; --eyis-accent:#D9A441; --eyis-accent-2:#F1CD7A; --eyis-hover:#B77A18; --eyis-neon:#7FC9E8; --eyis-bg:#FBFCFD; --eyis-bg-2:#F1F5F8; --eyis-surface:#FFFFFF; --eyis-surface-2:#F6F8FA; --eyis-border:rgba(23,50,77,.13); --eyis-border-2:rgba(23,50,77,.23); --eyis-text:#17324D; --eyis-text-2:#52677B; --eyis-text-3:#718397; } :root[data-preset="tealBreeze"] { --eyis-primary:#0E6072; --eyis-primary-2:#147E91; --eyis-accent:#20B9B1; --eyis-accent-2:#83DDD8; --eyis-hover:#087F8C; --eyis-neon:#68DDE9; --eyis-bg:#F6FCFC; --eyis-bg-2:#EAF7F7; --eyis-surface:#FFFFFF; --eyis-surface-2:#EFF9F9; --eyis-border:rgba(14,96,114,.14); --eyis-border-2:rgba(14,96,114,.24); --eyis-text:#123D48; --eyis-text-2:#4B6E75; --eyis-text-3:#729198; } :root[data-preset="roseQuartz"] { --eyis-primary:#8F285F; --eyis-primary-2:#B3447D; --eyis-accent:#D965A3; --eyis-accent-2:#F0A9CE; --eyis-hover:#B92E73; --eyis-neon:#F3A8D4; --eyis-bg:#FFF9FC; --eyis-bg-2:#FCEFF6; --eyis-surface:#FFFFFF; --eyis-surface-2:#FFF3F9; --eyis-border:rgba(143,40,95,.13); --eyis-border-2:rgba(143,40,95,.23); --eyis-text:#55213E; --eyis-text-2:#76576A; --eyis-text-3:#99798C; } :root[data-preset="indigoMist"] { --eyis-primary:#354FBA; --eyis-primary-2:#526DD5; --eyis-accent:#7187E8; --eyis-accent-2:#B3C0F5; --eyis-hover:#415FCB; --eyis-neon:#91B6FF; --eyis-bg:#F8FAFF; --eyis-bg-2:#EEF2FC; --eyis-surface:#FFFFFF; --eyis-surface-2:#F2F5FD; --eyis-border:rgba(53,79,186,.13); --eyis-border-2:rgba(53,79,186,.23); --eyis-text:#24376E; --eyis-text-2:#59678E; --eyis-text-3:#7B87A8; } :root[data-preset="oliveNature"] { --eyis-primary:#236B4B; --eyis-primary-2:#328663; --eyis-accent:#55B983; --eyis-accent-2:#A4E1BE; --eyis-hover:#21845A; --eyis-neon:#82DDB0; --eyis-bg:#F8FCF9; --eyis-bg-2:#EDF7F0; --eyis-surface:#FFFFFF; --eyis-surface-2:#F1F9F3; --eyis-border:rgba(35,107,75,.13); --eyis-border-2:rgba(35,107,75,.23); --eyis-text:#244B39; --eyis-text-2:#587364; --eyis-text-3:#7B9487; } :root[data-preset="sandyBeige"] { --eyis-primary:#9B562D; --eyis-primary-2:#B96C39; --eyis-accent:#D9953D; --eyis-accent-2:#F2C985; --eyis-hover:#B76B22; --eyis-neon:#E8B56D; --eyis-bg:#FFFCF7; --eyis-bg-2:#F8F1E7; --eyis-surface:#FFFFFF; --eyis-surface-2:#FBF5EC; --eyis-border:rgba(155,86,45,.13); --eyis-border-2:rgba(155,86,45,.23); --eyis-text:#5D3B28; --eyis-text-2:#786354; --eyis-text-3:#9A8372; } :root[data-preset="slateGray"] { --eyis-primary:#40566C; --eyis-primary-2:#5C7185; --eyis-accent:#71879B; --eyis-accent-2:#B9C6D2; --eyis-hover:#526E88; --eyis-neon:#91B2CF; --eyis-bg:#FAFBFC; --eyis-bg-2:#F0F3F6; --eyis-surface:#FFFFFF; --eyis-surface-2:#F4F6F8; --eyis-border:rgba(64,86,108,.13); --eyis-border-2:rgba(64,86,108,.23); --eyis-text:#2F4254; --eyis-text-2:#607181; --eyis-text-3:#82909E; } :root[data-theme="dark"][data-preset] { --eyis-bg:#071421; --eyis-bg-2:#0B1C2C; --eyis-surface:#102536; --eyis-surface-2:#0B1C2C; --eyis-border:#1E3A4D; --eyis-border-2:#2C4A60; --eyis-text:#EEF5FA; --eyis-text-2:#B6C8D6; --eyis-text-3:#89A0B2; } :root[data-theme="dark"][data-preset="institutionalGold"] { --eyis-accent:#E1B553; --eyis-accent-2:#F4D78D; --eyis-hover:#F0C76C; } :root[data-theme="dark"][data-preset="tealBreeze"] { --eyis-accent:#2CC9C1; --eyis-accent-2:#8DE5DF; --eyis-hover:#55D8D1; } :root[data-theme="dark"][data-preset="roseQuartz"] { --eyis-accent:#E675B2; --eyis-accent-2:#F3B4D5; --eyis-hover:#EE8FC2; } :root[data-theme="dark"][data-preset="indigoMist"] { --eyis-accent:#8298F2; --eyis-accent-2:#C0CBF8; --eyis-hover:#9AAAF5; } :root[data-theme="dark"][data-preset="oliveNature"] { --eyis-accent:#65C993; --eyis-accent-2:#ACE8C6; --eyis-hover:#80D6A7; } :root[data-theme="dark"][data-preset="sandyBeige"] { --eyis-accent:#E5A451; --eyis-accent-2:#F5D294; --eyis-hover:#ECB66D; } :root[data-theme="dark"][data-preset="slateGray"] { --eyis-accent:#8CA0B3; --eyis-accent-2:#C5D0DA; --eyis-hover:#A4B5C4; }