/* Brunskilt design tokens — DESIGN.md is the source of truth. * * Edit this file together with DESIGN.md. Do not hardcode hex values * elsewhere in the codebase. Mobile companion: mobile/styles/colors.js. */ :root { /* Surfaces */ --paper: #f7f3eb; --paper-2: #efe9dc; /* Ink */ --ink: #1a1d1a; --ink-muted: #4a4e48; --ink-subtle: #7a7e76; /* Rules */ --rule: #d9d2c2; --rule-soft: #e6dfce; /* Primary — forest green (Norwegian brown-sign wayfinding companion) */ --green: #118c4f; --green-dark: #0d6e3e; --green-soft: #d4e8db; /* Accent — heritage brown */ --brown: #8c6d46; --brown-dark: #6d543a; /* Semantic */ --success: #118c4f; --warning: #b5711c; --error: #a83232; --info: #2e5f7a; /* Typography */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale */ --fs-display-xl: clamp(2.75rem, 6vw, 4.5rem); /* 44–72px */ --fs-display-l: clamp(2rem, 4vw, 3rem); /* 32–48px */ --fs-h2: 2rem; /* 32px */ --fs-h3: 1.375rem; /* 22px */ --fs-body-l: 1.0625rem; /* 17px */ --fs-body: 1rem; /* 16px */ --fs-ui: 0.875rem; /* 14px */ --fs-small: 0.8125rem; /* 13px */ --fs-eyebrow: 0.6875rem; /* 11px */ --lh-display-xl: 1.02; --lh-display-l: 1.05; --lh-h2: 1.15; --lh-h3: 1.3; --lh-body-l: 1.6; --lh-body: 1.65; --lh-ui: 1.4; --lh-small: 1.5; /* Spacing (8px base) */ --s-1: 2px; --s-2: 4px; --s-3: 8px; --s-4: 12px; --s-5: 16px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px; /* Radius */ --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-full: 9999px; /* Motion */ --dur-micro: 80ms; --dur-short: 180ms; --dur-medium: 280ms; --dur-long: 450ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 0.68, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Layout */ --content-max: 1240px; --reading-max: 680px; /* Elevation — paper-field-journal, intentionally soft */ --shadow-sm: 0 1px 2px rgba(26, 29, 26, 0.06); --shadow-md: 0 2px 8px rgba(26, 29, 26, 0.08); --shadow-lg: 0 8px 24px rgba(26, 29, 26, 0.12); /* Semantic aliases (backwards-compatible) */ --color-primary: var(--green); --color-primary-dark: var(--green-dark); --color-primary-darker: var(--green-dark); --color-text: var(--ink); --color-text-muted: var(--ink-muted); --color-surface: var(--paper); --color-surface-alt: var(--paper-2); --color-background: var(--paper); --color-border: var(--rule); --color-focus-ring: var(--green); } /* Drive mode / dark surface — OPT-IN only. * * Dark mode is a drive-mode aesthetic (per DESIGN.md), not a default for * marketing or auth surfaces. Pages that opt in (e.g. Privacy / Terms) * set `html[data-theme="dark"]` explicitly via their theme toggle. The * mobile app controls its own dark palette via mobile/styles/colors.js. * * To auto-apply to a page based on OS preference, the page must set * `` itself. We do NOT infer it site-wide, so * a macOS dark-mode visitor still sees the paper-cream marketing site. */ html[data-theme='dark'] { --paper: #1a1d1a; --paper-2: #24272a; --ink: #f7f3eb; --ink-muted: #a8aca3; --ink-subtle: #9a9e94; /* lifted from #7A7E76 for AA on dark paper */ --rule: #2f3330; --rule-soft: #26292a; --green: #4fb57a; --green-dark: #3da069; --green-soft: #1b3525; --brown: #b89575; --brown-dark: #b89575; /* lifted for AA on dark paper */ } /* Auto-apply dark only when the page has opted in via data-theme="auto" */ @media (prefers-color-scheme: dark) { html[data-theme='auto'] { --paper: #1a1d1a; --paper-2: #24272a; --ink: #f7f3eb; --ink-muted: #a8aca3; --ink-subtle: #9a9e94; --rule: #2f3330; --rule-soft: #26292a; --green: #4fb57a; --green-dark: #3da069; --green-soft: #1b3525; --brown: #b89575; --brown-dark: #b89575; } } /* Reduced motion honors user preference */ @media (prefers-reduced-motion: reduce) { :root { --dur-micro: 0ms; --dur-short: 0ms; --dur-medium: 0ms; --dur-long: 0ms; } }