/* ===================================================================== FOUND MEN HUB — DESIGN TOKENS Adopted verbatim from the Claude Design handoff (claude.ai/design). Three layers: primitive → semantic → component. Never hard-code colour in a page; reference a semantic or component token so changes cascade. ===================================================================== */ :root { /* ================================================================= COLOUR — LAYER 1: PRIMITIVES (raw palette, not used directly) ================================================================= */ /* Plum brand ramp */ --plum-900: #3F1730; --plum-800: #5C2240; /* deep accent */ --plum-700: #6B294B; --plum-600: #7A2E54; /* brand accent */ --plum-500: #8F4067; --plum-300: #C49AB0; --plum-100: #E7D6DF; --plum-050: #F3EEF1; /* faint plum-grey panel */ /* Ink / charcoal */ --ink-900: #1D1D1B; /* primary ink */ --ink-700: #3A3A37; --ink-500: #5E5E59; --ink-400: #7C7C75; /* Warm greys */ --grey-500: #908C84; --grey-400: #A8A39B; --grey-300: #C7C2B9; --grey-200: #D8D3CA; /* hairline */ --grey-100: #EAE6DF; --grey-050: #F5F2EC; /* warm off-white surface */ --white: #FFFFFF; /* Semantic primitives */ --green-600: #2E7D54; --green-100: #DCEFE3; --amber-600: #B9791C; --amber-100: #F6E9CF; --red-600: #C0392B; --red-100: #F6DAD5; --blue-600: #2A6F97; --blue-100: #D7E8F1; /* ================================================================= COLOUR — LAYER 2: SEMANTIC (meaning, theme-aware) ================================================================= */ /* Brand */ --color-brand: var(--plum-600); --color-brand-deep: var(--plum-800); --color-brand-soft: var(--plum-050); --color-brand-on: var(--white); /* Text */ --text-strong: var(--ink-900); --text-body: var(--ink-700); --text-muted: var(--ink-500); --text-subtle: var(--ink-400); --text-on-brand: var(--white); --text-link: var(--plum-600); /* Surfaces */ --surface-page: var(--grey-050); --surface-card: var(--white); --surface-panel: var(--plum-050); --surface-sunken: var(--grey-100); --surface-inverse: var(--ink-900); /* Lines & borders */ --border-hairline: var(--grey-200); --border-strong: var(--grey-300); --border-brand: var(--plum-600); /* Semantic status */ --color-success: var(--green-600); --color-success-soft: var(--green-100); --color-warning: var(--amber-600); --color-warning-soft: var(--amber-100); --color-danger: var(--red-600); --color-danger-soft: var(--red-100); --color-info: var(--blue-600); --color-info-soft: var(--blue-100); /* ================================================================= COLOUR — LAYER 3: COMPONENT ================================================================= */ --btn-primary-bg: var(--color-brand); --btn-primary-bg-hover: var(--plum-700); --btn-primary-bg-active: var(--color-brand-deep); --btn-primary-fg: var(--text-on-brand); --btn-secondary-bg: var(--surface-card); --btn-secondary-fg: var(--text-strong); --btn-secondary-border: var(--border-strong); --btn-secondary-bg-hover: var(--grey-050); --btn-ghost-fg: var(--color-brand); --btn-ghost-bg-hover: var(--plum-050); --btn-danger-bg: var(--color-danger); --btn-danger-fg: var(--white); --card-bg: var(--surface-card); --card-border: var(--border-hairline); --chip-bg: var(--surface-panel); --chip-fg: var(--text-body); --chip-border: transparent; --chip-selected-bg: var(--color-brand); --chip-selected-fg: var(--text-on-brand); --switch-track-off: var(--grey-300); --switch-track-on: var(--color-brand); --switch-knob: var(--white); --avatar-bg: var(--plum-100); --avatar-fg: var(--plum-800); --tabbar-bg: var(--surface-card); --tabbar-fg: var(--text-subtle); --tabbar-fg-active: var(--color-brand); --fab-bg: var(--color-brand); --fab-fg: var(--white); --toast-bg: var(--ink-900); --toast-fg: var(--grey-050); --input-bg: var(--surface-card); --input-border: var(--border-strong); --input-border-focus: var(--color-brand); --input-placeholder: var(--text-subtle); --stepper-line: var(--border-strong); --stepper-done: var(--color-brand); --stepper-active: var(--color-brand); --stepper-pending: var(--grey-300); /* ================================================================= TYPOGRAPHY ================================================================= */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif; --font-display: var(--font-sans); --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --weight-display: 800; --text-display: 34px; --text-h1: 28px; --text-h2: 22px; --text-h3: 18px; --text-body-lg: 17px; --text-base: 16px; --text-small: 14px; --text-caption: 12px; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.6; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* ================================================================= SPACING, RADIUS & SIZING (4px base grid) ================================================================= */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; --touch-min: 44px; --tabbar-h: 64px; --fab-size: 58px; --avatar-xs: 24px; --avatar-sm: 32px; --avatar-md: 44px; --avatar-lg: 64px; --avatar-xl: 84px; --content-max: 480px; --page-gutter: var(--space-4); /* ================================================================= ELEVATION (soft, warm-plum tinted, never pure black) ================================================================= */ --elevation-1: 0 1px 2px rgba(29, 29, 27, 0.04), 0 2px 8px rgba(63, 23, 48, 0.05); --elevation-2: 0 2px 6px rgba(29, 29, 27, 0.06), 0 8px 20px rgba(63, 23, 48, 0.08); --elevation-3: 0 6px 14px rgba(29, 29, 27, 0.10), 0 16px 36px rgba(63, 23, 48, 0.14); --ring-brand: 0 0 0 3px rgba(122, 46, 84, 0.22); --ring-focus: 0 0 0 3px rgba(122, 46, 84, 0.30); }