/* ============================================================================= base.css — Vynovis Design System Foundation Global custom properties, reset, and base element styles ============================================================================= */ /* --------------------------------------------------------------------------- Google Fonts --------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap'); /* --------------------------------------------------------------------------- Custom Properties --------------------------------------------------------------------------- */ :root { /* Colors — brand */ --color-brand-primary: #7B4F8E; --color-brand-primary-dark: #5E3A6E; --color-brand-primary-light: #9B6FAE; --color-brand-secondary: #E8A0B4; --color-accent: #4CAF8A; --color-accent-dark: #3A9070; /* Colors — neutrals */ --color-neutral-900: #1A1A2E; --color-neutral-800: #2D2D44; --color-neutral-700: #4A4A6A; --color-neutral-500: #7A7A9A; --color-neutral-300: #C5C5D5; --color-neutral-100: #F0EEF5; --color-neutral-50: #FAF9FC; /* Colors — surfaces & text */ --color-surface: #FFFFFF; --color-surface-muted: #F8F4FB; --color-text-primary: #1A1A2E; --color-text-secondary: #4A4A6A; --color-text-muted: #7A7A9A; --color-text-on-dark: #FFFFFF; /* Colors — feedback */ --color-error: #C0392B; --color-success: #27AE60; /* Typography — fluid scale */ --text-xs: clamp(0.75rem, 1.5vw, 0.8125rem); --text-sm: clamp(0.875rem, 1.8vw, 0.9375rem); --text-base: clamp(1rem, 2vw, 1.0625rem); --text-lg: clamp(1.125rem, 2.2vw, 1.25rem); --text-xl: clamp(1.25rem, 2.5vw, 1.5rem); --text-2xl: clamp(1.5rem, 3vw, 1.875rem); --text-3xl: clamp(1.875rem, 4vw, 2.25rem); --text-4xl: clamp(2.25rem, 5vw, 3rem); --text-5xl: clamp(2.75rem, 6vw, 4rem); /* Spacing — 4px base scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Layout */ --container-max: 1200px; --container-padding: clamp(1rem, 5vw, 2rem); /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-card: 0 4px 16px rgba(123, 79, 142, 0.10); --shadow-elevated: 0 8px 32px rgba(123, 79, 142, 0.15); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* Font families */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Playfair Display', Georgia, serif; /* Z-index scale */ --z-nav: 100; --z-overlay: 200; --z-modal: 300; /* Theme-sensitive component surfaces */ --color-header-bg: rgba(255, 255, 255, 0.85); --color-header-border: rgba(255, 255, 255, 0.2); --color-dropdown-bg: rgba(255, 255, 255, 0.97); --color-dropdown-border: rgba(255, 255, 255, 0.2); --color-card-border: rgba(123, 79, 142, 0.08); --color-card-image-end: #f0eaf7; } /* --------------------------------------------------------------------------- Dark theme overrides — toggled via data-theme="dark" on --------------------------------------------------------------------------- */ [data-theme="dark"] { /* Surfaces — deep navy with rich purple undertone */ --color-surface: #09091A; --color-surface-muted: #0F0F24; /* Text — warm off-white, never stark pure white */ --color-text-primary: #F0EBF9; --color-text-secondary: #ADA6C0; --color-text-muted: #68637C; /* Neutral scale — inverted, purple-tinted for dark UI */ --color-neutral-900: #F0EBF9; --color-neutral-800: #C2BADE; --color-neutral-700: #8880A0; --color-neutral-500: #5C5872; --color-neutral-300: #2C2840; --color-neutral-100: #1A1730; /* input bg, card hover */ --color-neutral-50: #111026; /* subtle hover bg */ /* Shadows — deep with purple ambient glow */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 1px rgba(123, 79, 142, 0.12); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.55), 0 0 48px rgba(123, 79, 142, 0.08); --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.65), 0 0 80px rgba(123, 79, 142, 0.14); /* Component surfaces — glass with brand tint */ --color-header-bg: rgba(9, 9, 26, 0.92); --color-header-border: rgba(123, 79, 142, 0.25); --color-dropdown-bg: rgba(14, 13, 30, 0.98); --color-dropdown-border: rgba(123, 79, 142, 0.22); --color-card-border: rgba(123, 79, 142, 0.18); --color-card-image-end: #1C1534; } /* --------------------------------------------------------------------------- Modern CSS Reset --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; -webkit-text-size-adjust: 100%; tab-size: 4; overflow-x: hidden; color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: var(--font-sans); font-size: var(--text-base); color: var(--color-text-primary); background-color: var(--color-surface); transition: background-color var(--transition-base), color var(--transition-base); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; -moz-osx-font-smoothing: grayscale; min-height: 100dvh; } /* Lists */ ul, ol { list-style: none; } /* Media */ img, video, svg { max-width: 100%; height: auto; display: block; } /* Tables */ table { border-collapse: collapse; border-spacing: 0; } /* Forms */ button, input, optgroup, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; } button { background: none; border: none; cursor: pointer; } /* Remove default fieldset styles */ fieldset { border: none; } /* Hidden elements */ [hidden] { display: none !important; } /* --------------------------------------------------------------------------- Typography — Headings --------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--color-neutral-900); line-height: 1.2; font-weight: 700; } h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-3xl); } h4 { font-size: var(--text-2xl); } h5 { font-size: var(--text-xl); } h6 { font-size: var(--text-lg); } /* --------------------------------------------------------------------------- Typography — Inline & Body --------------------------------------------------------------------------- */ p { max-width: 70ch; } strong, b { font-weight: 600; } em, i { font-style: italic; } small { font-size: var(--text-sm); } /* --------------------------------------------------------------------------- Links --------------------------------------------------------------------------- */ a { color: var(--color-brand-primary); text-decoration: underline; text-underline-offset: 2px; transition: color var(--transition-fast); } a:hover { color: var(--color-brand-primary-dark); } /* --------------------------------------------------------------------------- Focus Styles — Accessible, unobtrusive --------------------------------------------------------------------------- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* --------------------------------------------------------------------------- Miscellaneous --------------------------------------------------------------------------- */ hr { border: none; border-top: 1px solid var(--color-neutral-300); } abbr[title] { text-decoration: underline dotted; cursor: help; } code, kbd, samp, pre { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; font-size: 0.9em; } pre { overflow-x: auto; } blockquote { border-left: 4px solid var(--color-brand-primary); padding-left: var(--space-4); color: var(--color-text-secondary); font-style: italic; }