/* ========================================================================== Layero — design tokens Source of truth: DESIGN_SYSTEM.md · machine-readable: tokens/tokens.json Colour, surface and motion tokens adapted from transitions.dev; button metrics and hover/press behaviour from Amicro. ========================================================================== */ :root { /* ---- Typography ------------------------------------------------------ */ --font-display: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --text-2xs: 11px; --lh-2xs: 16px; /* tags, captions */ --text-xs: 12px; --lh-xs: 18px; /* mono meta: dates, counts */ --text-sm: 13px; --lh-sm: 18px; /* UI: nav, buttons, labels */ --text-md: 14px; --lh-md: 20px; /* card text, list text */ --text-base: 16px; --lh-base: 24px; /* body */ --lh-prose: 26px; /* long-form case copy */ --text-lg: 20px; --lh-lg: 28px; /* case section headings */ --text-xl: 24px; --lh-xl: 32px; /* CTA heading */ --text-2xl: 36px; --lh-2xl: 42px; /* page title */ --text-menu: 24px; --lh-menu: 28px; /* mobile menu links (no mobile step-down) */ --weight-regular: 400; --weight-medium: 500; --tracking-display: -0.005em; --tracking-ui: -0.01em; /* ---- Space (4px base) ------------------------------------------------ */ --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-16: 64px; --space-20: 80px; --space-28: 112px; --space-30: 120px; /* ---- Radius ---------------------------------------------------------- */ --radius-xs: 8px; --radius-sm: 12px; --radius-stage: 14px; /* media inside a card */ --radius-md: 20px; /* small cards (results) */ --radius-card: 24px; /* cards, wide media */ --radius-pill: 48px; /* buttons, chips, segmented */ /* ---- Layout ---------------------------------------------------------- */ --col: 720px; /* reading column */ --wide: 1008px; /* media breakout */ --gutter: 20px; /* min page side padding */ --section-gap: var(--space-28); --hero-top: var(--space-30); --z-header: 10; /* sticky header layer */ /* ---- Controls -------------------------------------------------------- */ --control-sm: 32px; --control: 36px; --control-md: 40px; --control-lg: 44px; /* minimum touch target */ /* ---- Motion ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* default: open, close, move */ --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1); /* playful: icon swaps, rolls */ --ease-in-out: ease-in-out; --dur-stagger: 40ms; --dur-quick: 150ms; /* hover colour */ --dur-fast: 250ms; /* tabs, accordion, theme */ --dur-medium: 350ms; /* text roll */ --dur-slow: 400ms; /* card media lift */ --dur-very-slow: 500ms; /* page-load reveal */ --distance-reveal: 12px; --blur-sm: 2px; --blur-md: 3px; --blur-header: 16px; /* backdrop under sticky header */ --blur-menu: 20px; /* mobile menu backdrop */ --scale-hover: 1.02; --scale-press: 0.96; } /* ---- Colour: light (default) ------------------------------------------ */ :root, [data-theme="light"] { color-scheme: light; --bg: #fdfdfd; --text: #0d0d0d; --text-muted: #6c6c6c; /* secondary copy · 5.3:1 */ --text-subtle: #767676; /* tertiary / meta · 4.5:1 */ --card-bg: #ffffff; --card-border: rgba(0, 0, 0, 0.06); --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04); --stage-bg: #f9f9f9; --stage-ring: rgba(0, 0, 0, 0.04); --material-bg: #ffffff; --material-shadow: 0 4px 42px 0 rgba(0, 0, 0, 0.06), 0 2px 6px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.06); --skeleton: #eeeeef; --chip-bg: #f4f4f4; --chip-hover: #f1f1f1; --chip-pressed: #eae9e9; --pill-hover: rgba(0, 0, 0, 0.03); --hairline: rgba(0, 0, 0, 0.06); --header-bg: rgba(253, 253, 253, 0.8); /* bg at 80% */ --menu-backdrop: rgba(253, 253, 253, 0.9); /* bg at 90% */ --icon: #0d0d0d; --icon-muted: rgba(13, 13, 13, 0.6); --btn-primary-bg: #17181c; --btn-primary-fg: #ffffff; --btn-primary-hover: #2a2a2a; --btn-primary-active: #000000; --btn-secondary-bg: #f5f5f5; --btn-secondary-fg: #17181c; --btn-secondary-hover: #ececec; --btn-secondary-active: #e0e0e0; --filter-bg: #ffffff; --filter-fg: rgba(38, 38, 38, 0.8); --filter-hover: #f7f7f7; --filter-active: #f1f1f1; --filter-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), inset 0 -1px 0 0 rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(196, 196, 196, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.08); --seg-bg: #f1f1f1; --seg-pill: #ffffff; --seg-fg: rgba(15, 15, 15, 0.7); --live: #22a55b; --focus: #0d0d0d; } /* ---- Colour: dark ------------------------------------------------------ */ [data-theme="dark"] { color-scheme: dark; --bg: #121212; --text: #ffffff; --text-muted: rgba(202, 202, 202, 0.72); --text-subtle: #8a8a8a; --card-bg: #181818; --card-border: rgba(196, 196, 196, 0.07); --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 0.04); --stage-bg: #131313; --stage-ring: rgba(191, 192, 203, 0.08); --material-bg: #1c1c1c; --material-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(196, 196, 196, 0.08); --skeleton: rgba(238, 238, 239, 0.1); --chip-bg: rgba(255, 255, 255, 0.07); --chip-hover: rgba(255, 255, 255, 0.1); --chip-pressed: rgba(255, 255, 255, 0.08); --pill-hover: rgba(255, 255, 255, 0.06); --hairline: rgba(255, 255, 255, 0.06); --header-bg: rgba(18, 18, 18, 0.8); /* bg at 80% */ --menu-backdrop: rgba(18, 18, 18, 0.9); /* bg at 90% */ --icon: #ededed; --icon-muted: rgba(237, 237, 237, 0.6); --btn-primary-bg: #ffffff; --btn-primary-fg: #0d0d0d; --btn-primary-hover: #e8e8e8; --btn-primary-active: #d8d8d8; --btn-secondary-bg: rgba(255, 255, 255, 0.08); --btn-secondary-fg: #ededed; --btn-secondary-hover: rgba(255, 255, 255, 0.12); --btn-secondary-active: rgba(255, 255, 255, 0.14); --filter-bg: rgba(255, 255, 255, 0.04); --filter-fg: rgba(251, 251, 251, 0.8); --filter-hover: rgba(255, 255, 255, 0.08); --filter-active: rgba(255, 255, 255, 0.14); --filter-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 0.06); --seg-bg: rgba(255, 255, 255, 0.06); --seg-pill: rgba(255, 255, 255, 0.14); --seg-fg: rgba(251, 251, 251, 0.7); --live: #3ecf7a; --focus: #ffffff; } /* ---- Responsive overrides --------------------------------------------- */ @media (max-width: 760px) { :root { --section-gap: var(--space-20); --hero-top: var(--space-16); --text-2xl: 28px; --lh-2xl: 34px; --text-xl: 22px; --lh-xl: 30px; } }