/* ───────────────────────────────────────────────────────── SEMANTIC TOKENS — Intent-based mappings These describe ROLES (what something is FOR), not values. To rebrand: change the var() references here. Components only reference tokens from this file. ───────────────────────────────────────────────────────── */ :root { /* COLOR — BRAND */ --color-primary: var(--green-500); --color-primary-hover: var(--green-700); --color-accent: var(--gold-500); /* COLOR — SURFACES */ --bg-canvas: var(--neutral-0); --bg-section-alt: var(--neutral-50); /* COLOR — TEXT */ --text-primary: var(--neutral-900); --text-secondary: var(--neutral-600); --text-muted: var(--neutral-400); --text-on-primary: var(--neutral-0); --text-on-accent: var(--neutral-900); --text-link: var(--color-primary); /* COLOR — STRUCTURE */ --border-default: var(--neutral-200); --border-focus: var(--color-primary); /* SPACING — SECTION RHYTHM */ --space-section-y: var(--size-24); /* 96px desktop */ --space-section-y-min: var(--size-20); /* 80px desktop */ --space-section-y-mobile: var(--size-12); /* 48px mobile */ --space-gutter: var(--size-6); /* 24px desktop */ --space-gutter-mobile: var(--size-4); /* 16px mobile */ --space-section-gap: var(--size-12); /* between header and content */ /* SPACING — STACK (vertical rhythm inside blocks) */ --space-stack-xs: var(--size-1); --space-stack-sm: var(--size-2); --space-stack: var(--size-4); --space-stack-md: var(--size-6); --space-stack-lg: var(--size-8); --space-stack-xl: var(--size-12); /* SPACING — INLINE (horizontal gaps) */ --space-inline-sm: var(--size-2); --space-inline: var(--size-4); --space-inline-md: var(--size-6); /* TYPOGRAPHY — ROLES */ --text-eyebrow-size: var(--type-small); --text-eyebrow-weight: var(--weight-500); --text-eyebrow-tracking: 0.1em; /* COMPONENT — BUTTONS */ --btn-height: 48px; --btn-padding-x: var(--size-6); --btn-radius: var(--radius-4); --btn-font-size: var(--type-body); --btn-font-weight: var(--weight-500); --btn-min-tap: 44px; /* COMPONENT — CARDS */ --card-padding: var(--size-6); --card-radius: var(--radius-6); --card-bg: var(--bg-canvas); --card-border: 1px solid var(--border-default); --card-shadow: var(--shadow-card); --card-shadow-hover: var(--shadow-elevated); --card-stack-icon-title: var(--size-4); --card-stack-title-body: var(--size-2); /* COMPONENT — NAV */ --nav-height: 72px; --nav-bg: var(--bg-canvas); --nav-shadow: var(--shadow-card); /* COMPONENT — FORMS */ --input-height: 48px; --input-radius: var(--radius-4); --input-border: 1px solid var(--border-default); --input-focus-border: 1px solid var(--border-focus); --label-font-size: var(--type-small); --label-font-weight: var(--weight-500); /* COMPONENT — ICONS (per spec: 24/32/48 only) */ --icon-sm: 24px; --icon-md: 32px; --icon-lg: 48px; } /* ───────────────────────────────────────────────────────── DARK THEME — flips colour semantics only. Applied via [data-theme="dark"] on . ───────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg-canvas: #121817; --bg-section-alt: #1A2321; --text-primary: #F2F4F3; --text-secondary: #A8B0AE; --text-muted: #6B7472; --text-on-primary: #121817; --border-default: rgba(255, 255, 255, 0.10); --color-primary: #5DBFA8; --color-primary-hover: #7FD4BF; --nav-bg: rgba(18, 24, 23, 0.92); --card-bg: #1A2321; --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.30); --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.40); --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.30); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.40); } /* MOBILE OVERRIDES — semantic tokens shift on small screens */ @media (max-width: 768px) { :root { --space-section-y: var(--space-section-y-mobile); --space-gutter: var(--space-gutter-mobile); --space-section-gap: var(--size-8); } }