/* * Design tokens for forhuman.ca * * Three layers, in cascade order: * 1. Primitives — raw colour / spacing / type values (mirrored from Figma via mcp-designer-for-human) * 2. Semantic — role aliases (--text-primary, --bg-canvas, --action-primary, …) * 3. Component — defined inside component CSS files; reference semantic tokens only * * Source of truth: mcp-designer-for-human, which mirrors Figma file "Logo" * (file key BmnkpzU2LBdw8kzD2mnkcQ). * * If you change a primitive, verify the Figma token first. If you need a * new semantic role, add it to Layer 2 below — never reference a primitive * directly from a component. */ @layer tokens { :root { /* ────────────────────────────────────────────────────────────────── */ /* Layer 1 — primitives */ /* ────────────────────────────────────────────────────────────────── */ /* Colour — primary */ --bark: #322A22; --cream: #FAF7F2; --cream-mid: #F2EDE5; --white: #FFFFFF; --ink: #2B3A4E; /* Colour — secondary */ --sage: #5B7254; --sage-deep: #3D5236; --sage-light: #E8EDE6; --terracotta: #B86F4A; --terracotta-deep: #A0603F; /* button resting on white: ≥4.5:1 */ --terracotta-deeper: #854D2F; /* button hover: ≥6.5:1 */ --terracotta-light: #F5E6DB; --clay: #C9906D; --rose: #B5454A; --rose-hover: #9A3A3E; --rose-light: #F5DEDE; --ochre: #C08B2E; --ochre-light: #FBF3E0; --ink-hover: #1E2C3D; --ink-light: #E0E4EA; --slate: #3D6B80; --slate-light: #DDE8EE; /* Colour — neutrals */ --neutral-200: #E5E1DB; --neutral-400: #B0A99E; --neutral-600: #6B655C; /* Typography — families */ --font-display: 'Literata', Georgia, 'Times New Roman', serif; --font-body: 'Atkinson Hyperlegible Next', 'Noto Sans TC', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body-zh: 'Noto Sans TC', 'Atkinson Hyperlegible Next', sans-serif; --font-display-zh: 'Noto Serif TC', 'Literata', serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Typography — fluid scale (clamp: min, preferred, max) */ /* base 17px = 1rem via html font-size set in base.css */ --fs-display: clamp(2.5rem, 1.2rem + 5vw, 4rem); /* ~40–64px */ --fs-h1: clamp(2rem, 1.4rem + 2.5vw, 2.824rem); /* ~32–48px */ --fs-h2: clamp(1.5rem, 1.2rem + 1.25vw, 1.94rem); /* ~24–33px */ --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.47rem); /* ~20–25px */ --fs-h4: 1rem; /* 17px */ --fs-body-lg: 1.176rem; /* 20px */ --fs-body: 1rem; /* 17px */ --fs-caption: 0.882rem; /* 15px */ --fs-label: 0.765rem; /* 13px */ --fs-small: 0.647rem; /* 11px */ /* Typography — line heights */ --lh-display: 1.08; --lh-h1: 1.14; --lh-h2: 1.21; --lh-h3: 1.27; --lh-h4: 1.35; --lh-body: 1.47; --lh-zh-body: 1.65; /* Chinese characters need more room */ /* Typography — letter spacing */ --ls-display: -0.022em; --ls-h1: -0.015em; --ls-h2: -0.01em; --ls-h3: -0.005em; --ls-label: 0.02em; /* Typography — weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Spacing (t-shirt scale; matches Figma "space/N" numeric scale) */ --sp-xs: 0.25rem; /* 4px — space/1 */ --sp-sm: 0.5rem; /* 8px — space/2 */ --sp-base-sm: 0.75rem; /* 12px — space/3 */ --sp-md: 1rem; /* 16px — space/4 */ --sp-md-lg: 1.25rem; /* 20px — space/5 */ --sp-lg: 1.5rem; /* 24px — space/6 */ --sp-xl: 2rem; /* 32px — space/8 */ --sp-xl-lg: 2.5rem; /* 40px — space/10 */ --sp-2xl: 3rem; /* 48px — space/12 */ --sp-3xl: 4rem; /* 64px — space/16 */ --sp-3xl-lg: 5rem; /* 80px — space/20 */ --sp-4xl: 6rem; /* 96px — space/24 */ --sp-5xl: 8rem; /* 128px — space/32 */ /* Border radius */ --radius-none: 0; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px; /* Layout widths */ --max-width: 72rem; /* 1152px */ --content-width: 48rem; /* 768px — prose, forms */ --sidebar-width: 16rem; /* 256px */ /* Elevation (warm brown shadows, never pure black) */ --shadow-xs: 0 1px 2px rgba(50, 42, 34, 0.06); --shadow-sm: 0 2px 4px rgba(50, 42, 34, 0.08), 0 1px 2px rgba(50, 42, 34, 0.04); --shadow-md: 0 4px 12px rgba(50, 42, 34, 0.10), 0 2px 4px rgba(50, 42, 34, 0.06); --shadow-lg: 0 8px 24px rgba(50, 42, 34, 0.12), 0 4px 8px rgba(50, 42, 34, 0.06); --shadow-xl: 0 16px 48px rgba(50, 42, 34, 0.16), 0 8px 16px rgba(50, 42, 34, 0.08); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-instant: 100ms; --duration-fast: 200ms; --duration-normal: 350ms; --duration-slow: 500ms; /* Breakpoints are documented here but repeated in @media queries because CSS custom properties cannot be interpolated into media features. */ /* --bp-sm: 40rem (640px) --bp-md: 48rem (768px) --bp-lg: 64rem (1024px) --bp-xl: 80rem (1280px) */ /* ────────────────────────────────────────────────────────────────── */ /* Layer 2 — semantic tokens */ /* ────────────────────────────────────────────────────────────────── */ /* Text */ --text-primary: var(--bark); --text-secondary: var(--neutral-600); --text-tertiary: var(--neutral-400); --text-disabled: var(--neutral-400); --text-placeholder: var(--neutral-400); --text-inverse: var(--white); --text-brand: var(--terracotta); --text-link: var(--ink); /* Backgrounds */ --bg-canvas: var(--white); --bg-warm: var(--cream); --bg-surface: var(--cream-mid); --bg-surface-hover: var(--neutral-200); --bg-emphasis: var(--ink); --bg-overlay: rgba(50, 42, 34, 0.55); /* Borders */ --border-default: var(--neutral-200); --border-strong: var(--neutral-400); --border-brand: var(--terracotta); --border-subtle: var(--neutral-200); /* Actions */ --action-primary: var(--terracotta-deep); --action-primary-hover: var(--terracotta-deeper); --action-secondary: var(--ink); --action-secondary-hover: var(--ink-hover); --action-danger: var(--rose); --action-danger-hover: var(--rose-hover); /* Accents */ --accent: var(--terracotta); --accent-discovery: var(--ochre); --accent-discovery-bg: var(--ochre-light); /* Status */ --status-success-fg: var(--sage); --status-success-bg: var(--sage-light); --status-warning-fg: var(--ochre); --status-warning-bg: var(--ochre-light); --status-error-fg: var(--rose); --status-error-bg: var(--rose-light); --status-info-fg: var(--slate); --status-info-bg: var(--slate-light); /* Interactive */ --link-default: var(--ink); --link-hover: var(--ink-hover); --link-visited: var(--neutral-600); /* Focus uses slate blue so it never reads as an error state. */ --focus-ring: var(--slate); --focus-ring-soft: var(--slate-light); --surface-active: var(--neutral-200); } /* Reduced motion: flatten to opacity-only transitions */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-normal: 100ms; --duration-slow: 100ms; } } }