/* Thesia Technologies — design tokens * Source of truth: project/design-system/DESIGN.md * Palette + typography are LOCKED per the FINAL BRAND ASSET PACKAGE. * Framework convention: .div-site is added to by the mu-plugin. */ .div-site { /* ── Brand masters (LOCKED — do not add hues) ── */ --th-carbon: #0A0D12; --th-porcelain: #EEF4FB; --th-steel: #9AACBF; --th-electric-blue: #5AA2FF; /* ── Derived (color-mix only, never new hex) ── */ --th-line-on-dark: color-mix(in srgb, var(--th-porcelain) 14%, transparent); --th-line-on-light: color-mix(in srgb, var(--th-carbon) 12%, transparent); --th-accent-wash: color-mix(in srgb, var(--th-electric-blue) 18%, transparent); --th-surface-elev: color-mix(in srgb, var(--th-porcelain) 4%, var(--th-carbon)); --th-text-muted: var(--th-steel); --th-muted-on-light: color-mix(in srgb, var(--th-carbon) 58%, var(--th-porcelain)); /* ── Typography ── */ --th-font-display: Sora, "Segoe UI", system-ui, sans-serif; --th-font-body: Manrope, "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif; --th-font-mono: "JetBrains Mono", Menlo, Consolas, "SF Mono", monospace; --th-weight-display: 700; --th-weight-ui: 600; --th-weight-mono: 500; /* ── Spacing ── */ --th-space-2xs: 4px; --th-space-xs: 8px; --th-space-sm: 12px; --th-space-md: 16px; --th-space-lg: 24px; --th-space-xl: 32px; --th-space-2xl: 48px; --th-space-3xl: 64px; --th-space-4xl: 80px; --th-space-5xl: 104px; --th-space-6xl: 130px; --th-space-7xl: 160px; /* ── Layout ── */ --th-layout-container: 1360px; --th-layout-content: 1160px; --th-layout-prose: 68ch; /* ── Radius ── */ --th-radius-none: 0; --th-radius-xs: 2px; --th-radius-sm: 3px; --th-radius-md: 4px; --th-radius-lg: 6px; --th-radius-pill: 999px; /* ── Motion ── */ --th-duration-fast: 160ms; --th-duration-base: 280ms; --th-duration-slow: 520ms; --th-easing-calm: cubic-bezier(0.22, 0.61, 0.36, 1); --th-easing-enter: cubic-bezier(0, 0, 0.28, 1); } /* ── Type scale ── */ .div-site .th-type-display-xl { font-family: var(--th-font-display); font-weight: 700; font-size: clamp(58px, 7.6vw, 124px); line-height: 0.88; letter-spacing: -0.03em; } .div-site .th-type-h1 { font-family: var(--th-font-display); font-weight: 700; font-size: clamp(42px, 5vw, 72px); line-height: 0.94; letter-spacing: -0.025em; } .div-site .th-type-h2 { font-family: var(--th-font-display); font-weight: 700; font-size: clamp(32px, 3.4vw, 52px); line-height: 1.02; letter-spacing: -0.02em; } .div-site .th-type-h3 { font-family: var(--th-font-display); font-weight: 700; font-size: clamp(22px, 2vw, 30px); line-height: 1.16; letter-spacing: -0.01em; } .div-site .th-type-lede { font-family: var(--th-font-body); font-weight: 500; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.62; } .div-site .th-type-body { font-family: var(--th-font-body); font-weight: 400; font-size: 16px; line-height: 1.65; } .div-site .th-type-label { font-family: var(--th-font-body); font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; } .div-site .th-type-eyebrow { font-family: var(--th-font-body); font-weight: 600; font-size: 10px; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; } .div-site .th-type-mono { font-family: var(--th-font-mono); font-weight: 500; font-size: 12px; line-height: 1.4; letter-spacing: 0.02em; }