/* ========================================================================= Soouo ยท design tokens Premium academic-tech identity: white surfaces, deep navy ink, violet accent. Light is the base; dark overrides live under [data-theme="dark"] and, for System mode (no attribute), under prefers-color-scheme. The reader toggle stamps data-theme on ; js/theme-mode.js applies the admin's default. Colour presets (data-preset on ) restyle the accent + surface family while keeping the same navy/violet language. ========================================================================= */ :root { /* ---- typography ---- */ --soouo-font-heading: 'Space Grotesk', 'Inter', -apple-system, 'Segoe UI', sans-serif; --soouo-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --soouo-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ---- fluid type scale (accessible, large-by-default) ---- */ --soouo-fs-xs: clamp(.78rem, .74rem + .18vw, .86rem); --soouo-fs-sm: clamp(.88rem, .84rem + .2vw, .98rem); --soouo-fs-base: clamp(1rem, .96rem + .22vw, 1.09rem); --soouo-fs-lg: clamp(1.14rem, 1.06rem + .35vw, 1.3rem); --soouo-fs-xl: clamp(1.4rem, 1.24rem + .7vw, 1.75rem); --soouo-fs-2xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.35rem); --soouo-fs-3xl: clamp(2.2rem, 1.7rem + 2.2vw, 3.25rem); --soouo-fs-hero: clamp(2.6rem, 1.9rem + 3.2vw, 4.4rem); --soouo-lh-tight: 1.15; --soouo-lh-snug: 1.35; --soouo-lh-body: 1.7; /* ---- ink + accent (Nova Violet, default) ---- */ --soouo-ink: #0B1330; --soouo-ink-2: #141B3D; --soouo-primary: #0B1330; --soouo-primary-2: #17204A; --soouo-accent: #7C3AED; --soouo-accent-2: #A78BFA; --soouo-accent-3: #C4B5FD; --soouo-hover: #6D28D9; --soouo-neon: #22D3EE; /* ---- gradients ---- */ --soouo-grad-hero: linear-gradient(135deg, #0B1330 0%, #1E1256 42%, #5B21B6 78%, #7C3AED 100%); --soouo-grad-accent: linear-gradient(120deg, #7C3AED 0%, #A78BFA 100%); --soouo-grad-glow: radial-gradient(60% 60% at 75% 25%, rgba(124, 58, 237, .35) 0%, rgba(124, 58, 237, 0) 70%); /* ---- light surfaces ---- */ --soouo-bg: #FFFFFF; --soouo-bg-2: #F6F5FB; --soouo-surface: #FFFFFF; --soouo-surface-2: #F6F5FB; /* Glass surfaces: near-opaque so blurred backdrops never fight text contrast. */ --soouo-glass: rgba(255, 255, 255, .78); --soouo-glass-strong: rgba(255, 255, 255, .92); --soouo-glass-border: rgba(11, 19, 48, .10); --soouo-border: rgba(11, 19, 48, .12); --soouo-border-2: rgba(11, 19, 48, .2); --soouo-text: #0B1330; --soouo-text-2: #454B68; --soouo-text-3: #666C89; --soouo-on-primary: #FFFFFF; --soouo-on-accent: #FFFFFF; --soouo-danger: #DC2626; --soouo-success: #15803D; --soouo-warning: #B45309; /* ---- scale ---- */ --soouo-radius: 18px; --soouo-radius-sm: 12px; --soouo-radius-lg: 28px; --soouo-radius-pill: 999px; --soouo-shadow-sm: 0 1px 3px rgba(11, 19, 48, .07), 0 1px 2px rgba(11, 19, 48, .08); --soouo-shadow: 0 12px 32px rgba(11, 19, 48, .10), 0 2px 8px rgba(11, 19, 48, .06); --soouo-shadow-lg: 0 32px 72px rgba(11, 19, 48, .18); --soouo-shadow-accent: 0 18px 40px rgba(124, 58, 237, .28); --soouo-ring: 0 0 0 3px rgba(124, 58, 237, .38); --soouo-blur: 18px; --soouo-header-h: 116px; --soouo-nav-h: 60px; --soouo-max: 1280px; --soouo-gutter: clamp(16px, 4vw, 40px); --soouo-hero-veil-o: 1; --soouo-motion: 1; --soouo-ease: cubic-bezier(.22, .61, .36, 1); --soouo-dur-fast: 150ms; --soouo-dur: 260ms; --soouo-dur-slow: 420ms; color-scheme: light; } /* ---- font presets ---- */ :root[data-fonts="sora"] { --soouo-font-heading: 'Sora', 'Inter', sans-serif; } :root[data-fonts="jakarta"] { --soouo-font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif; } :root[data-fonts="manrope"] { --soouo-font-heading: 'Manrope', 'Inter', sans-serif; } :root[data-fonts="plex"] { --soouo-font-heading: 'IBM Plex Sans', sans-serif; --soouo-font-body: 'IBM Plex Sans', sans-serif; } :root[data-fonts="unbounded"] { --soouo-font-heading: 'Unbounded', 'Inter', sans-serif; } /* ---- colour presets: cohesive navy/violet family ---- */ :root[data-preset="auroraViolet"] { /* default, restated for explicit selection */ } :root[data-preset="indigoPulse"] { --soouo-primary:#101B4D; --soouo-primary-2:#1B2868; --soouo-accent:#4F46E5; --soouo-accent-2:#818CF8; --soouo-accent-3:#C7D2FE; --soouo-hover:#4338CA; --soouo-neon:#22D3EE; } :root[data-preset="orchidDeep"] { --soouo-primary:#1B0B33; --soouo-primary-2:#2A1150; --soouo-accent:#A21CAF; --soouo-accent-2:#E879F9; --soouo-accent-3:#F5D0FE; --soouo-hover:#86198F; --soouo-neon:#F0ABFC; } :root[data-preset="graphiteViolet"] { --soouo-primary:#111827; --soouo-primary-2:#1F2937; --soouo-accent:#8B5CF6; --soouo-accent-2:#C4B5FD; --soouo-accent-3:#DDD6FE; --soouo-hover:#7C3AED; --soouo-neon:#38BDF8; } :root[data-preset="arcticIndigo"] { --soouo-primary:#0E1E3A; --soouo-primary-2:#152A52; --soouo-accent:#6366F1; --soouo-accent-2:#93C5FD; --soouo-accent-3:#DBEAFE; --soouo-hover:#4F46E5; --soouo-neon:#67E8F9; } /* ---- dark mode ---- */ :root[data-theme="dark"] { --soouo-bg: #070B1E; --soouo-bg-2: #0C1230; --soouo-surface: #10173A; --soouo-surface-2: #0C1230; --soouo-glass: rgba(16, 23, 58, .62); --soouo-glass-strong: rgba(16, 23, 58, .82); --soouo-glass-border: rgba(196, 181, 253, .16); --soouo-border: #232C56; --soouo-border-2: #323C6C; --soouo-text: #F2F1FB; --soouo-text-2: #C1C4E6; --soouo-text-3: #9498C4; --soouo-primary: #F2F1FB; --soouo-primary-2: #D9D9F5; --soouo-on-primary: #070B1E; --soouo-accent-2: #C4B5FD; --soouo-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45); --soouo-shadow: 0 16px 44px rgba(0, 0, 0, .5); --soouo-shadow-lg: 0 34px 90px rgba(0, 0, 0, .6); --soouo-shadow-accent: 0 18px 44px rgba(124, 58, 237, .38); --soouo-ring: 0 0 0 3px rgba(167, 139, 250, .45); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --soouo-bg: #070B1E; --soouo-bg-2: #0C1230; --soouo-surface: #10173A; --soouo-surface-2: #0C1230; --soouo-glass: rgba(16, 23, 58, .62); --soouo-glass-strong: rgba(16, 23, 58, .82); --soouo-glass-border: rgba(196, 181, 253, .16); --soouo-border: #232C56; --soouo-border-2: #323C6C; --soouo-text: #F2F1FB; --soouo-text-2: #C1C4E6; --soouo-text-3: #9498C4; --soouo-primary: #F2F1FB; --soouo-primary-2: #D9D9F5; --soouo-on-primary: #070B1E; --soouo-accent-2: #C4B5FD; --soouo-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45); --soouo-shadow: 0 16px 44px rgba(0, 0, 0, .5); --soouo-shadow-lg: 0 34px 90px rgba(0, 0, 0, .6); --soouo-shadow-accent: 0 18px 44px rgba(124, 58, 237, .38); --soouo-ring: 0 0 0 3px rgba(167, 139, 250, .45); color-scheme: dark; } } @media (min-width: 1600px) { :root { --soouo-max: 1460px; } } @media (min-width: 2000px) { :root { --soouo-max: 1600px; } } @media (min-width: 2600px) { :root { --soouo-max: 1760px; } } @media (prefers-reduced-motion: reduce) { :root { --soouo-motion: 0; } }