/* * Nuancier — design tokens * Drop this file into the site root and import it before any other stylesheet. * * or in CSS: @import "tokens/tokens.css"; * * Mirror of tokens.json. Update both in lockstep. */ :root { /* ─── Brand colours ─── */ --color-deep-ink: #1B1F3A; --color-teal: #3DA5A5; --color-ochre: #E8A33D; --color-coral: #E85D75; --color-cream: #F4EFE6; --color-cream-edge: #D8D2C5; /* ─── Text ─── */ --color-text-primary: #1B1F3A; --color-text-secondary: #5F5E5A; --color-text-tertiary: #8A8881; --color-text-inverse: #F4EFE6; /* ─── Surfaces ─── */ --color-surface-page: #F4EFE6; --color-surface-card: #FFFFFF; --color-surface-raised: #FFFFFF; --color-surface-dark: #1B1F3A; --color-border: #D8D2C5; --color-border-strong: #8A8881; /* ─── State ─── */ --color-link: #3DA5A5; --color-link-hover: #1B1F3A; --color-success: #3DA5A5; --color-warning: #E8A33D; --color-danger: #E85D75; /* ─── Typography ─── */ --font-sans: 'Outfit', 'Manrope', 'DM Sans', 'Avenir Next', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.375rem; /* 22px */ --font-size-2xl: 1.75rem; /* 28px */ --font-size-3xl: 2.25rem; /* 36px */ --font-size-4xl: 3rem; /* 48px */ --font-size-5xl: 4rem; /* 64px */ --line-height-tight: 1.15; --line-height-snug: 1.3; --line-height-normal: 1.5; --line-height-relaxed: 1.7; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.08em; --letter-spacing-wider: 0.18em; /* ─── Radius ─── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px; /* ─── Spacing ─── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ─── Shadow ─── */ --shadow-sm: 0 1px 2px rgba(27, 31, 58, 0.06); --shadow-md: 0 4px 12px rgba(27, 31, 58, 0.08); --shadow-lg: 0 12px 32px rgba(27, 31, 58, 0.12); --shadow-focus: 0 0 0 3px rgba(61, 165, 165, 0.35); /* ─── Breakpoints (for JS / container queries) ─── */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* ─── Layout ─── */ --container-max: 1200px; --container-pad: clamp(16px, 4vw, 48px); } /* Optional dark surface theming — apply via */ .theme-dark { --color-surface-page: #1B1F3A; --color-surface-card: #2A2F4A; --color-surface-raised: #2A2F4A; --color-text-primary: #F4EFE6; --color-text-secondary: #B8B5AB; --color-text-tertiary: #8A8881; --color-border: #3A3F58; --color-border-strong: #5F5E5A; --color-link: #3DA5A5; --color-link-hover: #F4EFE6; }