/* nine75 design system v1, generated from tokens.json. Light is the default (documents, email, print); the website runs Dark: . */ @font-face { font-family: 'Schibsted Grotesk'; src: url('fonts/schibsted-grotesk-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist'; src: url('fonts/geist-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --color-forest: #14352A; --color-deep: #0D241C; --color-saffron: #F29A1F; --color-silver: #F4F5F7; --color-white: #FFFFFF; --color-cream: #FDF3E4; --font-display: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif; --font-sans: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --text-mega: clamp(3.25rem, 1.2rem + 9vw, 10.5rem); --text-mega--line-height: 0.92; --text-mega--font-weight: 800; --text-mega--letter-spacing: -0.045em; --text-display-1: clamp(2.5rem, 1.4rem + 5vw, 6.5rem); --text-display-1--line-height: 0.96; --text-display-1--font-weight: 800; --text-display-1--letter-spacing: -0.04em; --text-display-2: clamp(2rem, 1.3rem + 3vw, 4.25rem); --text-display-2--line-height: 1; --text-display-2--font-weight: 800; --text-display-2--letter-spacing: -0.035em; --text-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.875rem); --text-h3--line-height: 1.15; --text-h3--font-weight: 800; --text-h3--letter-spacing: -0.02em; --text-lead: 22px; --text-lead--line-height: 1.5; --text-lead--font-weight: 400; --text-body: 16px; --text-body--line-height: 1.65; --text-body--font-weight: 400; --text-ui: 16px; --text-ui--line-height: 1.2; --text-ui--font-weight: 500; --text-small: 14px; --text-small--line-height: 1.5; --text-small--font-weight: 400; --text-label: 12px; --text-label--line-height: 1; --text-label--font-weight: 500; --text-label--letter-spacing: 0.08em; --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; --space-44: 176px; --container: 1320px; --measure: 68ch; --touch: 44px; --control: 52px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; --radius-icon: 22.6%; --radius-key: 30%; } :root, [data-theme="light"] { color-scheme: light; --color-bg: #F4F5F7; --color-bg-band: #FFFFFF; --color-surface: #FFFFFF; --color-surface-raised: #ECF0EE; --color-ink: #14352A; --color-ink-muted: #4B5D55; --color-ink-dim: #71847B; --color-logo: #14352A; --color-mark: #14352A; --color-line: #DCE2DF; --color-line-strong: #78897F; --color-accent: #F29A1F; --color-on-accent: #0D241C; --color-accent-soft: #FDF3E4; --color-focus: #14352A; --color-success: #1B6A45; --color-danger: #B3261E; --shadow-card: 0 1px 2px #14352a0f, 0 12px 32px -12px #14352a29; --shadow-glow: 0 0 0 1px #f29a1f59, 0 10px 32px -8px #f29a1f66; } [data-theme="dark"] { color-scheme: dark; --color-bg: #0D241C; --color-bg-band: #10291F; --color-surface: #14352A; --color-surface-raised: #1B4034; --color-ink: #F4F5F7; --color-ink-muted: #B3C5BC; --color-ink-dim: #7E978B; --color-logo: #FFFFFF; --color-mark: #F29A1F; --color-line: #24473A; --color-line-strong: #6F9083; --color-accent: #F29A1F; --color-on-accent: #0D241C; --color-accent-soft: #2D371F; --color-focus: #F29A1F; --color-success: #6FD6A3; --color-danger: #FF9186; --shadow-card: 0 1px 0 #ffffff0a inset, 0 20px 60px -20px #04100b99; --shadow-glow: 0 0 0 1px #f29a1f59, 0 10px 40px -8px #f29a1f73; }