/* ========================================================================== EO Robotics Lab — Design Tokens -------------------------------------------------------------------------- The single source of truth for type, colour, space, radius, elevation and motion. Every stylesheet in this project reads from here. Rules of the system: 1. Never introduce a raw hex, px font-size, or shadow in a component stylesheet. If a value is missing, add it here first. 2. Never use !important. If a rule is losing, fix the selector. 3. Restraint is the aesthetic. Fewer values read as more expensive. Load order: tokens.css MUST be linked before every other stylesheet. ========================================================================== */ :root { /* ------------------------------------------------------------------ TYPEFACE Outfit is the brand face. The system stack is the fallback so text never reflows into a serif while the webfont loads. ------------------------------------------------------------------ */ --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* ------------------------------------------------------------------ TYPE SCALE — 13 steps, replacing 68 ad-hoc values. Anchored on 17px body copy (Apple's reading size). Use these names, never raw px. ------------------------------------------------------------------ */ --text-2xs: 12px; /* micro labels, badges, legal */ --text-xs: 13px; /* captions, meta, footnotes */ --text-sm: 14px; /* nav links, buttons, secondary UI */ --text-base: 17px; /* BODY DEFAULT */ --text-lg: 19px; /* lead paragraphs, subtitles */ --text-xl: 21px; /* card headings */ --text-2xl: 24px; /* h4 / small section headings */ --text-3xl: 28px; /* h3 */ --text-4xl: 32px; /* h2 */ --text-5xl: 36px; /* large h2 */ --text-6xl: 44px; /* page titles */ --text-7xl: 56px; /* section display */ --text-8xl: 64px; /* hero display */ /* Fluid sizes — scale with the viewport, no media queries needed. */ --text-lead: clamp(17px, 1.6vw, 21px); /* hero subtitles, lead-ins */ --text-display-sm: clamp(28px, 3.5vw, 40px); /* section display */ --text-display: clamp(32px, 4.5vw, 48px); /* page display */ --text-display-lg: clamp(40px, 6vw, 74px); /* hero display */ /* Weights — Outfit ships 100–900; we use four. */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights */ --leading-none: 1; --leading-tight: 1.1; /* display headings */ --leading-snug: 1.25; /* headings */ --leading-normal: 1.5; /* UI text */ --leading-relaxed: 1.6; /* body copy */ /* Letter spacing — negative tracking on large type is the single biggest contributor to a "designed" feel. */ --tracking-tighter: -0.03em; /* display */ --tracking-tight: -0.02em; /* headings */ --tracking-snug: -0.01em; /* large body */ --tracking-normal: 0; --tracking-wide: 0.06em; /* eyebrows, all-caps labels */ /* Optimal reading measures. Apply to any paragraph of prose. Expressed in ch so they scale with whatever font-size they sit on. */ --measure: 68ch; /* body copy */ --measure-tight: 46ch; /* lead paragraphs, section subtitles */ /* ------------------------------------------------------------------ COLOUR — Apple-derived neutrals + the EO Robotics brand blue. This replaces four competing greyscale families (Apple, Tailwind slate, Amazon, and a bespoke set) with one. ------------------------------------------------------------------ */ /* Brand */ --brand: #2b7a9b; /* primary — links, buttons, accents */ --brand-dark: #1a5f7a; /* hover / pressed */ --brand-darker: #123a4a; /* deep fills */ --brand-ink: #0b2530; /* darkest brand surface — dark sections */ --brand-ink-deep: #071a21; /* gradient floor beneath --brand-ink */ --brand-tint: rgba(43, 122, 155, 0.08); --brand-tint-strong: rgba(43, 122, 155, 0.15); /* The one brand gradient. Previously three different gradients shared the name --gradient-primary; this is now the single definition. */ --gradient-brand: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); --gradient-brand-deep: radial-gradient(circle at 50% 0%, var(--brand-darker) 0%, var(--brand-ink) 62%, var(--brand-ink-deep) 100%); /* Neutrals — ink */ --ink: #1d1d1f; /* primary text */ --ink-strong: #000000; /* headings that need max weight */ --ink-soft: #6e6e73; /* secondary text */ --ink-faint: #86868b; /* tertiary text, placeholders */ /* Neutrals — surface */ --surface: #ffffff; /* cards, panels */ --surface-sunken: #f5f5f7; /* page sections, wells */ --surface-raised: #ffffff; --surface-inverse:#1d1d1f; /* dark sections */ /* Neutrals — line */ --line: #d2d2d7; /* default borders */ --line-soft: rgba(0, 0, 0, 0.08); /* hairlines */ --line-strong: rgba(0, 0, 0, 0.16); /* emphasis borders */ /* On-inverse (text over dark surfaces) */ --on-inverse: #ffffff; --on-inverse-soft: rgba(255, 255, 255, 0.72); --on-inverse-faint: rgba(255, 255, 255, 0.48); --on-inverse-line: rgba(255, 255, 255, 0.16); /* Semantic — one value each, not five */ --success: #2f855a; --success-bg: #e7f4ec; --warning: #b7791f; --warning-bg: #fdf6e3; --danger: #c53030; --danger-bg: #fdeaea; --info: var(--brand); --info-bg: var(--brand-tint); /* Service accents — a deliberate set, one per service page. These are the ONLY chromatic colours outside the brand blue. */ --accent-web: #10b981; --accent-software: #8b5cf6; --accent-ai: #f59e0b; --accent-design: #ef4444; --accent-embedded: #06b6d4; /* Overlays */ --overlay-scrim: rgba(0, 0, 0, 0.55); --overlay-header: rgba(255, 255, 255, 0.72); /* ------------------------------------------------------------------ SPACE — 4px base grid. ------------------------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Vertical rhythm between major page sections. */ --section-y: clamp(48px, 5.5vw, 88px); --section-y-tight: clamp(32px, 3.5vw, 56px); /* ------------------------------------------------------------------ RADIUS — 5 steps, replacing 22. ------------------------------------------------------------------ */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 980px; /* Apple's pill button radius */ --radius-full: 50%; /* ------------------------------------------------------------------ ELEVATION — 5 steps, replacing 32. Layered shadows (a tight contact shadow + a wide ambient one) read as far more refined than a single blur. ------------------------------------------------------------------ */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.10), 0 4px 16px rgba(0, 0, 0, 0.04); --shadow-focus: 0 0 0 4px var(--brand-tint-strong); /* ------------------------------------------------------------------ MOTION — 2 curves, 4 durations, replacing 38 transition values. ------------------------------------------------------------------ */ --ease: cubic-bezier(0.22, 1, 0.36, 1); /* decelerate — default */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* symmetric */ --duration-fast: 0.15s; --duration-base: 0.25s; --duration-slow: 0.4s; --duration-slower: 0.8s; --duration-ambient: 1.2s; /* hero cross-fades, background drifts */ /* Ready-made transitions. Prefer these over `all`. */ --transition-colors: color var(--duration-base) var(--ease), background-color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease); --transition-opacity: opacity var(--duration-base) var(--ease); --transition-transform: transform var(--duration-base) var(--ease); --transition-elevate: transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease); /* ------------------------------------------------------------------ LAYOUT ------------------------------------------------------------------ */ --container-max: 1200px; /* narrowed from 1400px — see note below */ --container-wide: 1400px; --container-pad: clamp(20px, 4vw, 40px); --header-height: 72px; /* ------------------------------------------------------------------ Z-INDEX — named layers stop the arms race of arbitrary numbers. ------------------------------------------------------------------ */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 1000; --z-dropdown: 1100; --z-overlay: 1200; --z-modal: 1300; --z-toast: 1400; } /* ========================================================================== Accessibility: a single, visible keyboard focus ring. The stylesheets previously carried `outline: none !important` across every nav link, button and the hamburger — including on :focus-visible — which left keyboard users with no indication of position at all (WCAG 2.4.7). The rule below restores that, while :focus:not(:focus-visible) keeps the ring off for mouse and touch input, which is what the original authors were actually trying to achieve. ========================================================================== */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--radius-xs); } /* Mouse/touch interaction: no ring. */ :focus:not(:focus-visible) { outline: none; } /* Dark surfaces need a light ring to stay visible. */ .hero :focus-visible, .footer :focus-visible, [data-theme="dark"] :focus-visible { outline-color: var(--on-inverse); } /* ========================================================================== Accessibility: honour the OS "reduce motion" setting globally. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }