/* ========================================================================== tokens.css — Lumago design system -------------------------------------------------------------------------- The single source of truth for every colour, size, space, radius, shadow and timing value on the site. Nothing outside this file may contain a raw hex code, a pixel literal used as spacing, or a one-off magic number. Every value in base.css / aurora.css / components.css / pages.css is a var() reference back to a token defined here. Provenance of each block is noted inline: [VLP] carried verbatim from the Visual Language Preview [BDS] fixed by the Business Discovery Spec (non-negotiable) [ADD] added here because all three specs were silent — proposed value, open to change; see README "Changing common things" ========================================================================== */ :root { /* ---------------------------------------------------------------------- Colour — semantic roles [VLP] Brand-fixed values (do not reselect, per BDS §11): --color-primary #0fa3b1 --color-accent #ff9b42 --color-text #4d4d4d --color-text-muted #676767 --color-border #dcdcdc The remaining roles below are additional UI/state roles the brand palette did not supply; they are not a reselection of it. -------------------------------------------------------------------- */ --color-primary: #0fa3b1; /* primary action: buttons, submit, link hover, scroll-top hover [BDS] */ --color-primary-hover: #0c8892; /* darkened primary, for hover on already-teal surfaces */ --color-secondary: #1f5b62; /* deep teal, secondary emphasis / eyebrows on light */ --color-accent: #ff9b42; /* accent: scroll-to-top background [BDS] */ --color-text: #4d4d4d; /* body text [BDS] */ --color-text-muted: #676767; /* secondary text [BDS] */ --color-ink: #262626; /* near-black — hero copy, for contrast over the vivid aurora [ADD] */ --color-border: #dcdcdc; /* borders, input outlines [BDS] */ --color-placeholder: #ececec; /* input placeholder text [BDS] */ --color-success: #3f8f5f; /* form success state */ --color-warning: #cf9a1f; /* reserved — not currently referenced */ --color-error: #c2453d; /* form validation errors */ --color-info: #2b7d9b; /* reserved — not currently referenced */ /* ---------------------------------------------------------------------- Surfaces [VLP] -------------------------------------------------------------------- */ --surface-1: #ffffff; /* page background, cards, header */ --surface-2: #f5f8f4; /* alternating section background */ --surface-3: #ffffff; /* raised card on a tinted section */ --surface-accent: #e8f4f6; /* inner-page hero wash, callout blocks */ --surface-inverse: #123b40; /* dark footer, inverse blocks */ /* ---------------------------------------------------------------------- Brand pastel card fills [BDS] A lighter key of the aurora stops. Used as the sticky service-card backgrounds; --fill-sage also fills the logo shape. Tokenised as required by BDS §11, values not reselected. -------------------------------------------------------------------- */ --fill-white: #ffffff; --fill-cream: #fffcce; --fill-yellow: #fdf7cb; --fill-sage: #dcf4ca; /* also: logo shape fill */ --fill-blue: #c2e5eb; --fill-peach: #fbdfc1; /* ---------------------------------------------------------------------- Projects — per-case theme [ADD] Each case study gets a light surface plus a saturated accent derived from its brand pastel. The accent carries white text and drives the stat figure, labels, insight rule and flip-card fronts. -------------------------------------------------------------------- */ --case-blue-fill: #edf6f8; --case-blue-accent: #127581; --case-yellow-fill: #fdfae9; --case-yellow-accent: #8f6a16; --case-sage-fill: #eef8e8; --case-sage-accent: #3a7649; --case-peach-fill: #fbf0e5; --case-peach-accent: #b85f22; /* ---------------------------------------------------------------------- Hero aurora — NON-NEGOTIABLE, carried verbatim from BDS §11. aurora.css consumes only these tokens; do not edit the values or the construction without an explicit instruction to change the hero. -------------------------------------------------------------------- */ --lg-c1: #0fa3b1; /* teal */ --lg-c2: #d9e5d6; /* sage (distinct from --fill-sage) */ --lg-c3: #eddea4; /* sand */ --lg-c4: #ff9b42; /* orange */ --lg-size: min(45vw, 700px); /* responsive steps live in aurora.css */ --lg-speed: 5s; /* blur/saturation adjusted from the BDS values (50px / 1.2) at the owner's explicit request: "less blurred and more saturated". */ --lg-blur: 34px; --lg-saturation: 1.55; /* ---------------------------------------------------------------------- Typography [VLP] Family is settled (Inter only). @font-face is declared in base.css and expects self-hosted files in /assets/fonts/ — until those are supplied the platform fallback stack below carries the page. -------------------------------------------------------------------- */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --text-h1: 56px; --text-h2: 40px; --text-h3: 28px; --text-h4: 20px; --text-body: 17px; --text-small: 15px; --text-caption: 13px; --leading-tight: 1.15; /* headings */ --leading-normal: 1.65; /* body copy */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-eyebrow: 0.12em; /* the site-wide eyebrow + headline pattern */ /* Fluid heading sizes: shrink on small viewports without a media query. Upper bound is the [VLP] value above; lower bound keeps mobile sane. */ --text-h1-fluid: clamp(2rem, 1.2rem + 4vw, var(--text-h1)); --text-h2-fluid: clamp(1.75rem, 1.2rem + 2.6vw, var(--text-h2)); --text-h3-fluid: clamp(1.375rem, 1.1rem + 1.2vw, var(--text-h3)); /* ---------------------------------------------------------------------- Spacing scale — 8px base [BDS/VLP] Every margin and padding is one of these. No one-off values. -------------------------------------------------------------------- */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px; /* ---------------------------------------------------------------------- Layout — container widths & section rhythm [ADD] All three specs required these to be defined and consistent but gave no numbers. Replaces the old 1920px Astra container. -------------------------------------------------------------------- */ --container-max: 1200px; /* default content column */ --container-narrow: 760px; /* long-form prose: case studies, capability block */ --container-wide: 1360px; /* full-bleed-ish rows: logo wall, flip-card grids */ --header-h: 96px; /* --space-7; keeps the floating nav clear of the top edge */ --control-h: var(--space-6); /* 64px — shared height: every .btn, the nav pill, the header logo */ --gutter: var(--space-3); /* inline padding, mobile */ --gutter-lg: var(--space-5); /* inline padding, >=1024px */ --section-y: var(--space-7); /* vertical padding between major sections, desktop */ --section-y-sm: var(--space-5); /* ...mobile */ /* ---------------------------------------------------------------------- Corner radius — one scale [VLP] -------------------------------------------------------------------- */ --radius-sm: 10px; /* inputs, small chips */ --radius-md: 16px; /* buttons, cards, panels */ --radius-lg: 28px; /* large feature cards, hero media */ --radius-full: 999px; /* pills, avatars, scroll-top — deliberate only */ /* ---------------------------------------------------------------------- Elevation [VLP] -------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(18, 59, 64, 0.06); --shadow-md: 0 4px 12px rgba(18, 59, 64, 0.08); --shadow-lg: 0 12px 32px rgba(18, 59, 64, 0.10); /* Signature accent — aurora halo. For the one or two elements that should read as lit by the hero (primary CTA, flagship case-study card). [VLP] */ --signature: 0 0 0 1px rgba(15, 163, 177, 0.14), 0 10px 28px -14px rgba(15, 163, 177, 0.45), 0 -6px 22px -16px rgba(255, 155, 66, 0.50); /* ---------------------------------------------------------------------- Borders, motion, interaction [VLP] -------------------------------------------------------------------- */ --border-width: 1px; --transition: 0.16s ease-out; --transition-slow: 0.28s ease; /* logo + CTA fade on scroll */ --hover-underline: underline; /* text links on hover */ --hover-lift: -2px; /* translateY on cards/buttons */ --hover-tint: 0.08; /* overlay alpha on hover */ --hover-shadow: 0 8px 24px -10px rgba(15, 163, 177, 0.30); /* ---------------------------------------------------------------------- Focus [ADD] BDS §11 lists #676767 against "focus states"; a teal ring is used instead for WCAG 2.4.11 visibility over pale card fills. Swap the colour to var(--color-text-muted) here if the grey is preferred. -------------------------------------------------------------------- */ --focus-ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--color-primary); --focus-offset: 2px; /* ---------------------------------------------------------------------- Z-index scale [ADD] -------------------------------------------------------------------- */ --z-aurora: 1; --z-hero-content: 2; /* BDS: hero content sits at z-index 2 */ --z-header: 100; --z-scrolltop: 200; --z-offcanvas: 300; /* ---------------------------------------------------------------------- Breakpoints — REFERENCE ONLY [ADD] Custom properties cannot be used inside @media queries. These mirror the values hard-coded in the stylesheets; they exist so the numbers are documented in one place. The three widths are the ones the aurora already fixes (BDS §11). --bp-sm 480px --bp-md 768px (mobile / desktop divide) --bp-lg 1024px -------------------------------------------------------------------- */ --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; } /* ========================================================================== Dark theme — carried from the Visual Language Preview, PRESENT BUT NOT WIRED. No toggle and no prefers-color-scheme switch is shipped: the hero aurora and the pastel service-card fills are light-only non-negotiables (BDS §11) and neither the Business Discovery Spec nor the Website Specification asks for a theme switch. To activate later, set and resolve the aurora / pastel-card treatment. ========================================================================== */ html[data-theme="dark"] { --color-primary: #2ec4d2; --color-primary-hover: #55d4de; --color-secondary: #a9c9cc; --color-accent: #ffb36b; --color-text: #e6ebea; --color-text-muted: #9aa8a7; --color-border: #2a4147; --color-success: #5fbd83; --color-warning: #e0b355; --color-error: #e07a72; --color-info: #6ab6d0; --surface-1: #0e1c1f; --surface-2: #13272b; --surface-3: #163135; --surface-accent: #103a40; --surface-inverse: #060f11; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50); --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.60); }