:root:root { --primary-color: #3B82F6; --secondary-color: #8B5CF6; --accent-color: #10B981; --background-color: #FFFFFF; --text-color: #1F2937; --surface-color: #ffffff; --muted-color: #6b7280; --border-color: #e5e7eb; --on-primary: #ffffff; --success-color: #059669; --warning-color: #d97706; --danger-color: #dc2626; --heading-font: Inter; --body-font: Inter; --font-size-base: 16px; --letter-spacing: normal; --h1: 2.5rem; --h2: 1.85rem; --h3: 1.4rem; --line-height: 1.65; --heading-line-height: 1.2; --heading-weight: 700; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 9999px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-6: 2.25rem; --space-8: 3rem; --section-y: 4rem; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04); --shadow-md: 0 2px 8px rgb(0 0 0 / 0.06); --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.08); --container: 72rem; --measure: 42rem; --btn-bg: var(--primary-color); --btn-fg: var(--on-primary); --btn-border: transparent; --btn-radius: var(--radius-md); --header-align: space-between; --header-direction: row; --header-pad: var(--space-3); --header-border: 1px; }