/* ============================================================= ARETE BIOLABS — DESIGN TOKENS Change a value here and it updates everywhere on the site. This is the file to edit for colors, fonts, spacing, and shape. ============================================================= */ :root { /* ---------- Brand palette (pulled from the logo) ---------- */ --brand-ink: #240b45; /* deep plum — logo background */ --brand-ink-deep: #1a0733; /* darker plum */ --brand-violet: #7b3fe4; /* swoosh, dark end */ --brand-violet-light: #a472f5; /* swoosh, light end */ --brand-lavender: #9b6ef3; /* "BIOLABS" wordmark */ --brand-lavender-soft: #8b6bd9; /* motto text */ --brand-white: #ffffff; /* ---------- Semantic colors (dark theme = default) ---------- */ --bg: var(--brand-ink-deep); --bg-elevated: #24103f; --bg-sunken: #150528; --surface: rgba(255, 255, 255, 0.035); --surface-hover: rgba(255, 255, 255, 0.065); --text: #f1ecfa; --text-muted: #b9aad3; --text-faint: #8a7aa8; --accent: var(--brand-lavender); --accent-strong: var(--brand-violet); --accent-contrast: #ffffff; --accent-soft: rgba(155, 110, 243, 0.14); --border: rgba(155, 110, 243, 0.16); --border-strong: rgba(155, 110, 243, 0.34); --gradient-brand: linear-gradient( 115deg, var(--brand-violet) 0%, var(--brand-violet-light) 100% ); --gradient-surface: linear-gradient( 160deg, rgba(123, 63, 228, 0.1) 0%, rgba(123, 63, 228, 0) 60% ); /* Status pill colors */ --status-fg: var(--brand-lavender); --status-bg: rgba(155, 110, 243, 0.13); /* ---------- Typography ---------- */ --font-sans: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-display: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.75rem; --fs-4xl: 3.5rem; --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.65; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Wide letterspacing used by the logo lockup */ --tracking-brand: 0.34em; --tracking-wide: 0.12em; /* ---------- Spacing ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* ---------- Layout ---------- */ --container: 1180px; --container-narrow: 760px; --header-height: 72px; /* ---------- Shape & depth ---------- */ --radius-sm: 6px; --radius: 12px; --radius-lg: 18px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow: 0 8px 28px rgba(0, 0, 0, 0.32); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.42); --shadow-glow: 0 0 0 1px var(--border-strong), 0 12px 40px rgba(123, 63, 228, 0.22); --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================= LIGHT THEME Applied when . Only the semantic tokens are overridden — the brand palette stays fixed. ============================================================= */ [data-theme="light"] { --bg: #faf8fe; --bg-elevated: #ffffff; --bg-sunken: #f2eefb; --surface: rgba(36, 11, 69, 0.028); --surface-hover: rgba(36, 11, 69, 0.055); --text: #1f0c3a; --text-muted: #5b4a78; --text-faint: #8b7ba5; --accent: #6d2fd4; --accent-strong: #5620ad; --accent-contrast: #ffffff; --accent-soft: rgba(109, 47, 212, 0.09); --border: rgba(36, 11, 69, 0.12); --border-strong: rgba(109, 47, 212, 0.32); --gradient-surface: linear-gradient( 160deg, rgba(123, 63, 228, 0.06) 0%, rgba(123, 63, 228, 0) 60% ); --status-fg: #5620ad; --status-bg: rgba(109, 47, 212, 0.1); --shadow-sm: 0 1px 2px rgba(36, 11, 69, 0.07); --shadow: 0 8px 28px rgba(36, 11, 69, 0.09); --shadow-lg: 0 24px 64px rgba(36, 11, 69, 0.12); --shadow-glow: 0 0 0 1px var(--border-strong), 0 12px 40px rgba(123, 63, 228, 0.14); }