/* ============================================================================= TEN DIGITALS - DESIGN TOKENS Source of truth for colour, type, space, radius and motion. Brand tokens never change. Semantic tokens flip with the active theme. Colour values are sampled from the approved master logo: mark gradient #F28501 (gold end) -> #F86800 (red end) field #070707 ========================================================================== */ :root { /* -- Brand constants ---------------------------------------------------- */ --td-orange: #F86800; --td-orange-700: #C25200; --td-orange-600: #D95C00; --td-orange-300: #FF9440; --td-orange-100: #FFD9BB; --td-amber: #F28501; --td-amber-300: #FFB25C; --td-black: #070707; --td-graphite: #141418; --td-graphite-2: #1C1C22; --td-graphite-3: #26262E; --td-warm-white: #EFEBE5; --td-paper: #F7F4EF; --td-sand: #E4DFD6; --td-grad-brand: linear-gradient(118deg, #F28501 0%, #F86800 58%, #E25700 100%); --td-grad-brand-soft: linear-gradient(118deg, rgba(242, 133, 1, .16) 0%, rgba(248, 104, 0, .16) 100%); --td-grad-text: linear-gradient(96deg, #F28501 0%, #FF8A2B 45%, #F86800 100%); --td-success: #1F8A5B; --td-warning: #C98A00; --td-danger: #C2361B; /* -- Typography --------------------------------------------------------- */ --td-font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif; --td-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --td-font-editorial: "Instrument Serif", "Times New Roman", Georgia, serif; --td-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace; /* Fluid scale - spec 35: hero 72-110, h1 64-88, h2 48-64, h3 30-40 */ --td-fs-hero: clamp(2.75rem, 1.05rem + 6.9vw, 6.875rem); --td-fs-h1: clamp(2.25rem, 1.15rem + 4.6vw, 5.5rem); --td-fs-h2: clamp(1.875rem, 1.16rem + 3.0vw, 4rem); --td-fs-h3: clamp(1.375rem, 1.02rem + 1.5vw, 2.5rem); --td-fs-h4: clamp(1.125rem, 1.01rem + 0.5vw, 1.5rem); --td-fs-lead: clamp(1.0625rem, 0.98rem + 0.42vw, 1.375rem); --td-fs-body: clamp(1rem, 0.975rem + 0.12vw, 1.125rem); --td-fs-sm: 0.9375rem; --td-fs-xs: 0.8125rem; --td-fs-eyebrow: 0.75rem; --td-fs-numeral: clamp(3rem, 1.8rem + 4.4vw, 6rem); --td-lh-tight: 1.02; --td-lh-snug: 1.14; --td-lh-heading: 1.22; --td-lh-body: 1.62; --td-lh-loose: 1.75; --td-tracking-hero: -0.035em; --td-tracking-head: -0.022em; --td-tracking-body: -0.006em; --td-tracking-eyebrow: 0.2em; --td-tracking-button: 0.075em; /* Readable measure - spec: body 600-760px */ --td-measure: 68ch; --td-measure-tight: 52ch; /* -- Space - spec 35 scale ---------------------------------------------- */ --td-s-1: 4px; --td-s-2: 8px; --td-s-3: 12px; --td-s-4: 16px; --td-s-5: 24px; --td-s-6: 32px; --td-s-7: 48px; --td-s-8: 64px; --td-s-9: 80px; --td-s-10: 96px; --td-s-11: 120px; --td-s-12: 160px; --td-s-13: 200px; --td-section-y: clamp(72px, 8.2vw, 160px); --td-section-y-lg: clamp(96px, 10.4vw, 200px); --td-gutter: clamp(20px, 4.4vw, 64px); --td-container: 1440px; --td-container-narrow: 1120px; /* -- Radius - spec 35: buttons 8-12, cards 12-20, containers 16-24 ------- */ --td-r-xs: 6px; --td-r-btn: 10px; --td-r-card: 16px; --td-r-lg: 20px; --td-r-xl: 24px; --td-r-pill: 999px; /* -- Motion - spec 3: micro 150-250, standard 300-500, signature 600-1200 */ --td-t-micro: 190ms; --td-t-standard: 420ms; --td-t-signature: 900ms; --td-ease: cubic-bezier(0.4, 0.14, 0.2, 1); --td-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --td-ease-spring: cubic-bezier(0.16, 1.02, 0.24, 1); /* -- Layering ------------------------------------------------------------ */ --td-z-base: 1; --td-z-raised: 10; --td-z-sticky: 100; --td-z-header: 800; --td-z-mega: 850; --td-z-overlay: 900; --td-z-modal: 1000; --td-header-h: 84px; } /* ============================================================================= LIGHT THEME - soft relief surfaces. Cards share the page colour; elevation is carried entirely by the paired light/dark shadow, with sharp token-spec radii so it reads editorial rather than bubbly. No blur is used in light mode. ========================================================================== */ :root, [data-theme="light"], .td-tone-light { color-scheme: light; --td-bg: #EFEBE5; --td-bg-alt: #E7E2DA; --td-bg-deep: #DED8CE; --td-ink: #0E0D0C; --td-ink-2: #3B362F; --td-ink-3: #6E675D; --td-ink-4: #948C81; --td-line: rgba(14, 13, 12, 0.10); --td-line-2: rgba(14, 13, 12, 0.16); --td-accent: #C25200; /* AA-contrast orange for text on light */ --td-accent-ink: #FFFFFF; --td-on-accent: #FFFFFF; /* Surface contract - components read only these four properties. The relief is carried by the card's own tone plus ambient shadow, NOT by a directional light/dark shadow pair. Two things went wrong with the pair: its dark half piled up at the bottom-right corner as a smudge, and paired with a bright white 1px rim it put maximum contrast on exactly the two edges where the shadow was darkest, so every card read as hard-edged on the right and bottom. Now the card sits a shade above the page, the rim is a low-contrast warm hairline that behaves the same on all four sides, and the only directional cue is a single inset highlight along the top-left. */ --td-card-bg: #F4F1EB; --td-card-bg-2: #F8F6F2; --td-card-border: 1px solid rgba(158, 147, 130, 0.16); --td-card-backdrop: none; --td-card-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(120, 109, 92, 0.04), 0 10px 24px rgba(120, 109, 92, 0.10), 0 28px 56px rgba(120, 109, 92, 0.08); --td-card-shadow-hover: inset 1px 1px 0 rgba(255, 255, 255, 0.95), 0 2px 4px rgba(120, 109, 92, 0.05), 0 18px 36px rgba(120, 109, 92, 0.13), 0 44px 80px rgba(120, 109, 92, 0.11); --td-card-shadow-inset: inset 2px 3px 8px rgba(158, 147, 130, 0.26), inset -1px -1px 0 rgba(255, 255, 255, 0.85); --td-card-shadow-flat: inset 1px 1px 0 rgba(255, 255, 255, 0.80), 0 1px 2px rgba(120, 109, 92, 0.03), 0 6px 16px rgba(120, 109, 92, 0.07), 0 16px 34px rgba(120, 109, 92, 0.06); --td-well-bg: #EBE6DF; --td-field-bg: #EDE8E1; --td-header-bg: rgba(239, 235, 229, 0.82); --td-header-blur: blur(18px) saturate(160%); --td-header-line: rgba(14, 13, 12, 0.09); --td-overlay: rgba(239, 235, 229, 0.95); --td-glow: radial-gradient(60% 60% at 50% 0%, rgba(248, 104, 0, 0.10), transparent 70%); --td-hairline-accent: rgba(194, 82, 0, 0.30); --td-scrim: rgba(14, 13, 12, 0.55); --td-shimmer: rgba(255, 255, 255, 0.75); } /* ============================================================================= DARK THEME - restrained frosted glass. 14px blur, low-alpha fill, single orange-tinted hairline. Never neon. ========================================================================== */ [data-theme="dark"], .td-tone-dark { color-scheme: dark; --td-bg: #070707; --td-bg-alt: #0D0D10; --td-bg-deep: #050506; --td-ink: #F6F3EF; --td-ink-2: #C7C1B8; --td-ink-3: #948D83; --td-ink-4: #6A645C; --td-line: rgba(255, 255, 255, 0.10); --td-line-2: rgba(255, 255, 255, 0.17); --td-accent: #FF8A2B; /* lifted for contrast on near-black */ --td-accent-ink: #070707; --td-on-accent: #FFFFFF; --td-card-bg: rgba(255, 255, 255, 0.045); --td-card-bg-2: rgba(255, 255, 255, 0.075); --td-card-border: 1px solid rgba(255, 255, 255, 0.09); --td-card-backdrop: blur(14px) saturate(150%); --td-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 48px -28px rgba(0, 0, 0, 0.95); --td-card-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 34px 68px -30px rgba(0, 0, 0, 1), 0 0 0 1px rgba(248, 104, 0, 0.22); --td-card-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.5); --td-card-shadow-flat: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 32px -24px rgba(0, 0, 0, 0.9); --td-well-bg: rgba(255, 255, 255, 0.03); --td-field-bg: rgba(255, 255, 255, 0.05); --td-header-bg: rgba(7, 7, 7, 0.62); --td-header-blur: blur(16px) saturate(150%); --td-header-line: rgba(255, 255, 255, 0.08); --td-overlay: rgba(7, 7, 7, 0.93); --td-glow: radial-gradient(58% 58% at 50% 0%, rgba(248, 104, 0, 0.16), transparent 72%); --td-hairline-accent: rgba(248, 104, 0, 0.30); --td-scrim: rgba(0, 0, 0, 0.62); --td-shimmer: rgba(255, 255, 255, 0.16); } /* System preference, only while the visitor has made no explicit choice. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --td-bg: #070707; --td-bg-alt: #0D0D10; --td-bg-deep: #050506; --td-ink: #F6F3EF; --td-ink-2: #C7C1B8; --td-ink-3: #948D83; --td-ink-4: #6A645C; --td-line: rgba(255, 255, 255, 0.10); --td-line-2: rgba(255, 255, 255, 0.17); --td-accent: #FF8A2B; --td-accent-ink: #070707; --td-card-bg: rgba(255, 255, 255, 0.045); --td-card-bg-2: rgba(255, 255, 255, 0.075); --td-card-border: 1px solid rgba(255, 255, 255, 0.09); --td-card-backdrop: blur(14px) saturate(150%); --td-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 48px -28px rgba(0, 0, 0, 0.95); --td-card-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 34px 68px -30px rgba(0, 0, 0, 1), 0 0 0 1px rgba(248, 104, 0, 0.22); --td-card-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.5); --td-card-shadow-flat: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 32px -24px rgba(0, 0, 0, 0.9); --td-well-bg: rgba(255, 255, 255, 0.03); --td-field-bg: rgba(255, 255, 255, 0.05); --td-header-bg: rgba(7, 7, 7, 0.62); --td-header-line: rgba(255, 255, 255, 0.08); --td-overlay: rgba(7, 7, 7, 0.93); --td-glow: radial-gradient(58% 58% at 50% 0%, rgba(248, 104, 0, 0.16), transparent 72%); --td-hairline-accent: rgba(248, 104, 0, 0.30); --td-scrim: rgba(0, 0, 0, 0.62); --td-shimmer: rgba(255, 255, 255, 0.16); } } /* Tone islands: a section can pin itself dark or light regardless of theme. Production Bible: dark for major statements / AI / innovation / CTA, light for detail, proof and editorial. */ .td-tone-dark, .td-tone-light { background-color: var(--td-bg); color: var(--td-ink); } /* Browsers without backdrop-filter fall back to an opaque glass fill. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-theme="dark"], .td-tone-dark { --td-card-bg: rgba(28, 28, 34, 0.92); --td-card-bg-2: rgba(38, 38, 46, 0.94); --td-header-bg: rgba(7, 7, 7, 0.97); } :root:not([data-theme="light"]) { --td-header-bg: rgba(239, 235, 229, 0.98); } }