/* ============================================================= Action Accountants — Design Tokens Generated from design-tokens.json by build-tokens.cjs. Do not edit this file directly. Three layers: primitive raw values, prefixed --primitive-* semantic purpose aliases, reference primitives component per-component, reference semantics Override a primitive and every layer above it follows. ============================================================= */ /* === PRIMITIVES === */ :root { --primitive-color-brand-50: #FCF3F3; /* Callout and tint backgrounds */ --primitive-color-brand-100: #F9E7E7; --primitive-color-brand-200: #EFC8C8; --primitive-color-brand-300: #E09F9E; --primitive-color-brand-400: #CF5A59; --primitive-color-brand-500: #B62120; --primitive-color-brand-600: #90100F; /* Source brand colour, taken from the live site's button and active-nav styles */ --primitive-color-brand-700: #6F0C0B; /* Hover */ --primitive-color-brand-800: #540808; /* Active/pressed */ --primitive-color-brand-900: #3D0605; --primitive-color-brand-950: #260303; /* Gradient anchor */ --primitive-color-neutral-0: #FFFFFF; --primitive-color-neutral-50: #F7F5F4; /* Warm off-white; pairs with oxblood better than a cool grey */ --primitive-color-neutral-100: #EFEDEC; --primitive-color-neutral-200: #E5E5E5; /* Rules and borders, from the live site */ --primitive-color-neutral-300: #D4D4D4; --primitive-color-neutral-400: #A3A3A3; /* Decorative only — fails AA on white for body text */ --primitive-color-neutral-500: #8A8A8A; /* Decorative only — 3.45:1 on white, large text at most */ --primitive-color-neutral-550: #6E6E6E; /* Lightest grey that still passes AA on white, #F7F5F4 and #FCF3F3 */ --primitive-color-neutral-600: #666666; /* Body copy, from the live site */ --primitive-color-neutral-700: #4E4E4E; --primitive-color-neutral-800: #333333; /* Headings, from the live site */ --primitive-color-neutral-900: #262626; --primitive-color-neutral-950: #1A1A1A; /* Footer and hero ground */ --primitive-color-support-success: #157347; --primitive-color-support-success-subtle: #E8F3ED; --primitive-color-support-warning: #8A5A00; --primitive-color-support-warning-subtle: #FBF2E3; --primitive-color-support-danger: #B3261E; /* Deliberately brighter and warmer than brand-600 so an error never reads as branding */ --primitive-color-support-danger-subtle: #FBEAE9; --primitive-color-support-info: #1B5E9E; --primitive-color-support-info-subtle: #E8F0F8; --primitive-fontFamily-heading: 'Raleway', Helvetica, Arial, sans-serif; --primitive-fontFamily-body: 'Open Sans', Arial, sans-serif; --primitive-fontFamily-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --primitive-fontWeight-regular: 400; --primitive-fontWeight-medium: 500; --primitive-fontWeight-semibold: 600; --primitive-fontWeight-bold: 700; --primitive-fontWeight-extrabold: 800; --primitive-fontSize-xs: 0.75rem; --primitive-fontSize-sm: 0.82rem; --primitive-fontSize-base: 1rem; --primitive-fontSize-md: 1.06rem; /* Long-form prose */ --primitive-fontSize-lg: 1.125rem; --primitive-fontSize-xl: 1.25rem; --primitive-fontSize-2xl: 1.5rem; --primitive-fontSize-3xl: 1.875rem; --primitive-fontSize-4xl: 2.25rem; --primitive-fontSize-5xl: 3rem; --primitive-fontSize-fluid-display: clamp(2rem, 4.2vw, 3.1rem); --primitive-fontSize-fluid-h2: clamp(1.55rem, 2.8vw, 2.2rem); --primitive-fontSize-fluid-h3: clamp(1.2rem, 1.6vw, 1.35rem); --primitive-lineHeight-tight: 1.2; --primitive-lineHeight-snug: 1.35; --primitive-lineHeight-normal: 1.55; --primitive-lineHeight-relaxed: 1.75; /* Body default, from the live site */ --primitive-lineHeight-loose: 1.85; /* Long-form prose */ --primitive-letterSpacing-tighter: -0.02em; --primitive-letterSpacing-tight: -0.01em; --primitive-letterSpacing-normal: 0; --primitive-letterSpacing-wide: 0.05em; --primitive-letterSpacing-wider: 0.08em; --primitive-letterSpacing-widest: 0.16em; /* Eyebrow and overline labels */ --primitive-spacing-0: 0; --primitive-spacing-1: 0.25rem; --primitive-spacing-2: 0.5rem; --primitive-spacing-3: 0.75rem; --primitive-spacing-4: 1rem; --primitive-spacing-5: 1.25rem; --primitive-spacing-6: 1.5rem; --primitive-spacing-8: 2rem; --primitive-spacing-10: 2.5rem; --primitive-spacing-12: 3rem; --primitive-spacing-16: 4rem; --primitive-spacing-20: 5rem; --primitive-spacing-fluid-section: clamp(3rem, 6vw, 4.5rem); --primitive-radius-none: 0; --primitive-radius-sm: 3px; --primitive-radius-default: 6px; /* House radius */ --primitive-radius-lg: 10px; --primitive-radius-full: 999px; --primitive-shadow-none: none; --primitive-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05); --primitive-shadow-default: 0 2px 4px rgb(0 0 0 / 0.04), 0 12px 28px rgb(0 0 0 / 0.06); --primitive-shadow-lg: 0 8px 16px rgb(0 0 0 / 0.08), 0 24px 48px rgb(0 0 0 / 0.10); --primitive-shadow-focus: 0 0 0 3px rgb(144 16 15 / 0.35); --primitive-duration-fast: 150ms; --primitive-duration-normal: 200ms; --primitive-duration-slow: 500ms; --primitive-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --primitive-easing-out: cubic-bezier(0, 0, 0.2, 1); --primitive-size-container: 1180px; --primitive-size-container-narrow: 760px; /* Optimal measure for long-form reading */ --primitive-size-header-height: 78px; --primitive-size-tap-target: 44px; } /* === SEMANTIC === */ :root { --color-background: var(--primitive-color-neutral-0); --color-surface: var(--primitive-color-neutral-50); --color-surface-raised: var(--primitive-color-neutral-0); --color-foreground: var(--primitive-color-neutral-600); --color-heading: var(--primitive-color-neutral-800); --color-primary: var(--primitive-color-brand-600); --color-primary-hover: var(--primitive-color-brand-700); --color-primary-active: var(--primitive-color-brand-800); --color-primary-foreground: var(--primitive-color-neutral-0); --color-primary-subtle: var(--primitive-color-brand-50); --color-muted: var(--primitive-color-neutral-50); --color-muted-foreground: var(--primitive-color-neutral-550); /* AA on every light surface; do not substitute neutral.500 */ --color-disabled: var(--primitive-color-neutral-200); --color-disabled-foreground: var(--primitive-color-neutral-400); --color-border: var(--primitive-color-neutral-200); --color-border-strong: var(--primitive-color-neutral-300); --color-ring: var(--primitive-color-brand-600); --color-on-primary: var(--primitive-color-neutral-0); /* Text on a brand ground — 9.26:1 */ --color-on-primary-muted: var(--primitive-color-brand-200); /* Secondary text on a brand ground — 6.07:1. Do not use a white alpha; it drops below AA as opacity falls */ --color-on-inverse: var(--primitive-color-neutral-0); /* Text on the dark ground — 17.4:1 */ --color-on-inverse-muted: var(--primitive-color-neutral-400); /* Secondary text on the dark ground — 6.9:1 */ --color-inverse-background: var(--primitive-color-neutral-950); --color-inverse-foreground: var(--primitive-color-neutral-400); /* 6.9:1 on the dark ground */ --color-inverse-heading: var(--primitive-color-neutral-0); --color-inverse-border: var(--primitive-color-neutral-900); --color-success: var(--primitive-color-support-success); --color-success-subtle: var(--primitive-color-support-success-subtle); --color-warning: var(--primitive-color-support-warning); --color-warning-subtle: var(--primitive-color-support-warning-subtle); --color-danger: var(--primitive-color-support-danger); --color-danger-subtle: var(--primitive-color-support-danger-subtle); --color-info: var(--primitive-color-support-info); --color-info-subtle: var(--primitive-color-support-info-subtle); --font-heading: var(--primitive-fontFamily-heading); --font-body: var(--primitive-fontFamily-body); --font-mono: var(--primitive-fontFamily-mono); --spacing-component: var(--primitive-spacing-4); --spacing-stack: var(--primitive-spacing-6); --spacing-gutter: var(--primitive-spacing-10); --spacing-section: var(--primitive-spacing-fluid-section); } /* === COMPONENTS === */ :root { --button-bg: var(--color-primary); --button-fg: var(--color-primary-foreground); --button-border: var(--color-primary); --button-hover-bg: var(--color-primary-hover); --button-active-bg: var(--color-primary-active); --button-disabled-bg: var(--color-disabled); --button-disabled-fg: var(--color-disabled-foreground); --button-padding-x: var(--primitive-spacing-6); --button-padding-y: var(--primitive-spacing-3); --button-radius: var(--primitive-radius-default); --button-font: var(--primitive-fontFamily-heading); --button-font-size: var(--primitive-fontSize-sm); --button-font-weight: var(--primitive-fontWeight-bold); --button-letter-spacing: var(--primitive-letterSpacing-wide); --button-focus-shadow: var(--primitive-shadow-focus); --card-bg: var(--color-surface-raised); --card-border: var(--color-border); --card-radius: var(--primitive-radius-default); --card-padding: var(--primitive-spacing-6); --card-shadow: var(--primitive-shadow-none); --card-hover-shadow: var(--primitive-shadow-default); --card-hover-lift: -4px; --card-title-size: var(--primitive-fontSize-xl); --card-media-ratio: 16 / 9; --input-bg: var(--color-background); --input-fg: var(--color-heading); --input-border: var(--color-border); --input-focus-border: var(--color-ring); --input-placeholder: var(--color-muted-foreground); --input-radius: var(--primitive-radius-default); --input-padding-x: var(--primitive-spacing-4); --input-padding-y: var(--primitive-spacing-3); --input-min-height: var(--primitive-size-tap-target); --tag-bg: var(--color-muted); --tag-fg: var(--color-heading); --tag-hover-bg: var(--color-primary-subtle); --tag-hover-fg: var(--color-primary); --tag-radius: var(--primitive-radius-full); --tag-padding-x: var(--primitive-spacing-4); --tag-padding-y: var(--primitive-spacing-2); --tag-font-size: var(--primitive-fontSize-sm); --nav-bg: var(--color-background); --nav-bg-translucent: rgb(255 255 255 / 0.97); /* Sticky header over scrolling content; pairs with backdrop-filter */ --nav-height: var(--primitive-size-header-height); --nav-border: var(--color-border); --nav-link-fg: var(--color-heading); --nav-link-hover-fg: var(--color-primary); --nav-link-active-fg: var(--color-primary); --nav-link-size: var(--primitive-fontSize-sm); --nav-link-tracking: var(--primitive-letterSpacing-wide); --nav-underline: var(--color-primary); --prose-measure: var(--primitive-size-container-narrow); --prose-font-size: var(--primitive-fontSize-md); --prose-line-height: var(--primitive-lineHeight-loose); --prose-heading-color: var(--color-heading); --prose-link: var(--color-primary); --prose-marker: var(--color-primary); --prose-quote-border: var(--color-primary); --prose-code-bg: var(--color-muted); --prose-pre-bg: var(--color-inverse-background); --prose-pre-fg: var(--primitive-color-neutral-200); /* 13.8:1 on pre-bg */ --prose-rule: var(--color-border); --callout-bg: var(--color-primary-subtle); --callout-border: var(--color-primary); --callout-border-width: 4px; --callout-radius: var(--primitive-radius-default); --callout-padding: var(--primitive-spacing-8); --footer-bg: var(--color-inverse-background); --footer-fg: var(--color-inverse-foreground); --footer-heading: var(--color-inverse-heading); --footer-border: var(--color-inverse-border); --footer-font-size: var(--primitive-fontSize-base); } /* === DARK MODE === Only semantic tokens are reassigned; primitives never change. Deliberately opt-in via [data-theme="dark"] and NOT wired to prefers-color-scheme. actionaccountants.uk is a light-only brand, so auto-switching would make the blog diverge from the parent site for any visitor whose OS is set to dark — the opposite of what these tokens are for. To enable it later, design and test the dark variant first, then add: @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ...these same overrides... } } */ [data-theme="dark"] { --color-background: var(--primitive-color-neutral-950); --color-surface: var(--primitive-color-neutral-900); --color-surface-raised: var(--primitive-color-neutral-900); --color-foreground: var(--primitive-color-neutral-400); --color-heading: var(--primitive-color-neutral-0); --color-primary: var(--primitive-color-brand-400); /* brand-600 is too dark to read on a dark ground; step up the ramp */ --color-primary-hover: var(--primitive-color-brand-300); --color-primary-active: var(--primitive-color-brand-200); --color-primary-foreground: var(--primitive-color-neutral-950); --color-primary-subtle: var(--primitive-color-brand-950); --color-muted: var(--primitive-color-neutral-900); --color-muted-foreground: var(--primitive-color-neutral-400); --color-border: var(--primitive-color-neutral-900); --color-border-strong: var(--primitive-color-neutral-700); }