/* nol.satu design system v2.0.0. Generated from tokens/tokens.json by scripts/build-tokens.mjs. Do not edit by hand. */ /* Usage (Tailwind v4): @import "tailwindcss"; @import "@nolsatu/design-system/tailwind.css"; // in the monorepo; elsewhere copy https://design.nolsatu.id/tokens/tailwind.css Colours are semantic and switch with data-theme automatically: bg-surface text-fg border-line bg-brand text-on-brand. Composite type utilities: type-h1, type-body, type-label ... */ /* Theme switching: set data-theme="light" | "dark" on (or any subtree). With no attribute, the OS preference wins. */ :root { --ns-palette-teal-50: #F0F8F6; --ns-palette-teal-100: #E2F2EE; --ns-palette-teal-200: #BFE5DC; --ns-palette-teal-300: #86DCCB; --ns-palette-teal-400: #4CC9B0; --ns-palette-teal-500: #1E9985; --ns-palette-teal-600: #0F7466; --ns-palette-teal-700: #0B5C51; --ns-palette-teal-800: #0B463F; --ns-palette-teal-900: #0E332D; --ns-palette-teal-950: #06201B; --ns-palette-berry-50: #FCF0F5; --ns-palette-berry-100: #F8DCE8; --ns-palette-berry-200: #F2B9D1; --ns-palette-berry-300: #EB7BA8; --ns-palette-berry-400: #DB5590; --ns-palette-berry-500: #C23A74; --ns-palette-berry-600: #A3245A; --ns-palette-berry-700: #841D49; --ns-palette-berry-800: #641638; --ns-palette-berry-900: #3F0E24; --ns-palette-stone-0: #FFFFFF; --ns-palette-stone-25: #FAF9F6; --ns-palette-stone-50: #F3F1EC; --ns-palette-stone-100: #EAE7E0; --ns-palette-stone-200: #E3DFD6; --ns-palette-stone-300: #CFC9BE; --ns-palette-stone-400: #A69E93; --ns-palette-stone-450: #968E83; --ns-palette-stone-500: #857D72; --ns-palette-stone-550: #736B62; --ns-palette-stone-600: #6B645C; --ns-palette-stone-700: #4A443E; --ns-palette-stone-800: #34302A; --ns-palette-stone-850: #24201C; --ns-palette-stone-900: #1C1916; --ns-palette-stone-925: #181613; --ns-palette-stone-950: #14120F; --ns-palette-green-50: #E6F4E9; --ns-palette-green-300: #9BE0AF; --ns-palette-green-400: #5CCB7E; --ns-palette-green-600: #1F7A3A; --ns-palette-green-700: #17632E; --ns-palette-green-900: #13301C; --ns-palette-amber-50: #FDF3DC; --ns-palette-amber-300: #F7D38A; --ns-palette-amber-400: #F2B533; --ns-palette-amber-500: #C98A04; --ns-palette-amber-700: #7A4F00; --ns-palette-amber-900: #3A2A07; --ns-palette-red-50: #FCE9E7; --ns-palette-red-300: #F8A7A0; --ns-palette-red-400: #F06B5F; --ns-palette-red-600: #C0342B; --ns-palette-red-700: #A02A22; --ns-palette-red-900: #3D1614; --ns-palette-blue-50: #E8EEFC; --ns-palette-blue-300: #B0C6FA; --ns-palette-blue-400: #7FA2F5; --ns-palette-blue-600: #2F5FD0; --ns-palette-blue-700: #244CA8; --ns-palette-blue-900: #17254A; --ns-font-family-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --ns-font-family-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ns-font-family-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ns-font-weight-regular: 400; --ns-font-weight-medium: 500; --ns-font-weight-semibold: 600; --ns-font-weight-bold: 700; --ns-space-0: 0px; --ns-space-1: 4px; --ns-space-2: 8px; --ns-space-3: 12px; --ns-space-4: 16px; --ns-space-5: 20px; --ns-space-6: 24px; --ns-space-8: 32px; --ns-space-10: 40px; --ns-space-12: 48px; --ns-space-16: 64px; --ns-space-20: 80px; --ns-space-24: 96px; --ns-space-0-5: 2px; --ns-space-1-5: 6px; --ns-radius-2xs: 4px; --ns-radius-xs: 6px; --ns-radius-sm: 12px; --ns-radius-md: 18px; --ns-radius-lg: 24px; --ns-radius-full: 9999px; --ns-size-control-sm: 28px; --ns-size-control-md: 34px; --ns-size-control-lg: 42px; --ns-size-icon-sm: 16px; --ns-size-icon-md: 20px; --ns-size-icon-lg: 24px; --ns-size-focus-ring: 2px; --ns-size-focus-offset: 2px; --ns-duration-instant: 0ms; --ns-duration-fast: 120ms; --ns-duration-base: 180ms; --ns-duration-slow: 280ms; --ns-duration-slower: 420ms; --ns-easing-standard: cubic-bezier(0.2, 0, 0, 1); --ns-easing-enter: cubic-bezier(0, 0, 0.2, 1); --ns-easing-exit: cubic-bezier(0.4, 0, 1, 1); --ns-easing-snap: cubic-bezier(0.34, 1.4, 0.64, 1); --ns-z-base: 0; --ns-z-raised: 1; --ns-z-sticky: 10; --ns-z-dropdown: 100; --ns-z-overlay: 200; --ns-z-modal: 300; --ns-z-toast: 400; --ns-z-tooltip: 500; --ns-breakpoint-sm: 640px; --ns-breakpoint-md: 768px; --ns-breakpoint-lg: 1024px; --ns-breakpoint-xl: 1280px; --ns-breakpoint-2xl: 1536px; --ns-text-display-xl-size: clamp(2.5rem, 2.0455rem + 1.8182vw, 3.5rem); --ns-text-display-xl-line-height: 1.05; --ns-text-display-xl-weight: 700; --ns-text-display-xl-tracking: -0.035em; --ns-text-display-lg-size: clamp(2rem, 1.6591rem + 1.3636vw, 2.75rem); --ns-text-display-lg-line-height: 1.1; --ns-text-display-lg-weight: 700; --ns-text-display-lg-tracking: -0.03em; --ns-text-h1-size: clamp(1.75rem, 1.5795rem + 0.6818vw, 2.125rem); --ns-text-h1-line-height: 1.15; --ns-text-h1-weight: 600; --ns-text-h1-tracking: -0.025em; --ns-text-h2-size: clamp(1.375rem, 1.2614rem + 0.4545vw, 1.625rem); --ns-text-h2-line-height: 1.2; --ns-text-h2-weight: 600; --ns-text-h2-tracking: -0.02em; --ns-text-h3-size: 1.25rem; --ns-text-h3-line-height: 1.3; --ns-text-h3-weight: 600; --ns-text-h3-tracking: -0.015em; --ns-text-h4-size: 1rem; --ns-text-h4-line-height: 1.35; --ns-text-h4-weight: 600; --ns-text-h4-tracking: -0.01em; --ns-text-body-lg-size: 1.0625rem; --ns-text-body-lg-line-height: 1.6; --ns-text-body-lg-weight: 400; --ns-text-body-lg-tracking: 0em; --ns-text-body-size: 0.9375rem; --ns-text-body-line-height: 1.55; --ns-text-body-weight: 400; --ns-text-body-tracking: 0em; --ns-text-body-sm-size: 0.8125rem; --ns-text-body-sm-line-height: 1.5; --ns-text-body-sm-weight: 400; --ns-text-body-sm-tracking: 0em; --ns-text-caption-size: 0.75rem; --ns-text-caption-line-height: 1.4; --ns-text-caption-weight: 500; --ns-text-caption-tracking: 0.005em; --ns-text-label-size: 0.6875rem; --ns-text-label-line-height: 1.45; --ns-text-label-weight: 500; --ns-text-label-tracking: 0.07em; --ns-text-code-size: 0.8125rem; --ns-text-code-line-height: 1.55; --ns-text-code-weight: 400; --ns-text-code-tracking: 0em; } :root, [data-theme="light"] { --ns-color-canvas: #FAF9F6; --ns-color-surface: #FFFFFF; --ns-color-surface-subtle: #F3F1EC; --ns-color-surface-hover: #EAE7E0; --ns-color-surface-inverse: #1C1916; --ns-color-line: #E3DFD6; --ns-color-line-strong: #CFC9BE; --ns-color-line-control: #968E83; --ns-color-fg: #1C1916; --ns-color-fg-muted: #6B645C; --ns-color-fg-subtle: #857D72; --ns-color-fg-inverse: #FAF9F6; --ns-color-brand: #0F7466; --ns-color-brand-hover: #0B5C51; --ns-color-brand-active: #0B463F; --ns-color-brand-subtle: #E2F2EE; --ns-color-brand-fg: #0B5C51; --ns-color-on-brand: #FFFFFF; --ns-color-accent: #A3245A; --ns-color-accent-hover: #841D49; --ns-color-accent-subtle: #FCF0F5; --ns-color-accent-fg: #841D49; --ns-color-on-accent: #FFFFFF; --ns-color-focus: #0F7466; --ns-color-scrim: rgba(20, 18, 15, 0.48); --ns-color-success: #1F7A3A; --ns-color-success-subtle: #E6F4E9; --ns-color-success-fg: #17632E; --ns-color-on-success: #FFFFFF; --ns-color-warning: #C98A04; --ns-color-warning-subtle: #FDF3DC; --ns-color-warning-fg: #7A4F00; --ns-color-on-warning: #1C1916; --ns-color-danger: #C0342B; --ns-color-danger-subtle: #FCE9E7; --ns-color-danger-fg: #A02A22; --ns-color-on-danger: #FFFFFF; --ns-color-info: #2F5FD0; --ns-color-info-subtle: #E8EEFC; --ns-color-info-fg: #244CA8; --ns-color-on-info: #FFFFFF; --ns-color-cat-action: #DA5B79; --ns-color-cat-action-subtle: #FFE8EB; --ns-color-cat-action-fg: #7D2E41; --ns-color-cat-idea: #B08505; --ns-color-cat-idea-subtle: #FCEDCD; --ns-color-cat-idea-fg: #624800; --ns-color-cat-structure: #408DEA; --ns-color-cat-structure-subtle: #E4F0FE; --ns-color-cat-structure-fg: #1D4D87; --ns-color-cat-growth: #6B9E1F; --ns-color-cat-growth-subtle: #E5F5D6; --ns-color-cat-growth-fg: #385805; --ns-color-cat-flow: #D76821; --ns-color-cat-flow-subtle: #FFEADF; --ns-color-cat-flow-fg: #7B3606; --ns-color-cat-warmth: #AA6CD4; --ns-color-cat-warmth-subtle: #F5E9FF; --ns-color-cat-warmth-fg: #5F3979; --ns-color-mark-left: #A3245A; --ns-color-mark-right: #0F7466; --ns-color-mark-overlap: #0E332D; --ns-shadow-xs: 0 1px 2px rgba(28, 25, 22, 0.06); --ns-shadow-sm: 0 1px 3px rgba(28, 25, 22, 0.08), 0 1px 2px rgba(28, 25, 22, 0.04); --ns-shadow-md: 0 8px 20px -6px rgba(28, 25, 22, 0.14), 0 2px 4px rgba(28, 25, 22, 0.05); --ns-shadow-lg: 0 20px 48px -10px rgba(28, 25, 22, 0.22), 0 4px 12px rgba(28, 25, 22, 0.06); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ns-color-canvas: #14120F; --ns-color-surface: #1C1916; --ns-color-surface-subtle: #181613; --ns-color-surface-hover: #24201C; --ns-color-surface-inverse: #F3F1EC; --ns-color-line: #34302A; --ns-color-line-strong: #4A443E; --ns-color-line-control: #736B62; --ns-color-fg: #F3F1EC; --ns-color-fg-muted: #A69E93; --ns-color-fg-subtle: #857D72; --ns-color-fg-inverse: #1C1916; --ns-color-brand: #4CC9B0; --ns-color-brand-hover: #86DCCB; --ns-color-brand-active: #BFE5DC; --ns-color-brand-subtle: #0E332D; --ns-color-brand-fg: #86DCCB; --ns-color-on-brand: #06201B; --ns-color-accent: #EB7BA8; --ns-color-accent-hover: #F2B9D1; --ns-color-accent-subtle: #3F0E24; --ns-color-accent-fg: #F2B9D1; --ns-color-on-accent: #3F0E24; --ns-color-focus: #4CC9B0; --ns-color-scrim: rgba(0, 0, 0, 0.64); --ns-color-success: #5CCB7E; --ns-color-success-subtle: #13301C; --ns-color-success-fg: #9BE0AF; --ns-color-on-success: #14120F; --ns-color-warning: #F2B533; --ns-color-warning-subtle: #3A2A07; --ns-color-warning-fg: #F7D38A; --ns-color-on-warning: #14120F; --ns-color-danger: #F06B5F; --ns-color-danger-subtle: #3D1614; --ns-color-danger-fg: #F8A7A0; --ns-color-on-danger: #14120F; --ns-color-info: #7FA2F5; --ns-color-info-subtle: #17254A; --ns-color-info-fg: #B0C6FA; --ns-color-on-info: #14120F; --ns-color-cat-action: #F87F99; --ns-color-cat-action-subtle: #472028; --ns-color-cat-action-fg: #FEC7CF; --ns-color-cat-idea: #D6A20A; --ns-color-cat-idea-subtle: #3C2B02; --ns-color-cat-idea-fg: #F3D392; --ns-color-cat-structure: #6DADFF; --ns-color-cat-structure-subtle: #182E4B; --ns-color-cat-structure-fg: #BEDAFE; --ns-color-cat-growth: #8BBD50; --ns-color-cat-growth-subtle: #243411; --ns-color-cat-growth-fg: #C4E4A5; --ns-color-cat-flow: #F68A4F; --ns-color-cat-flow-subtle: #462311; --ns-color-cat-flow-fg: #FECBB1; --ns-color-cat-warmth: #C88EF1; --ns-color-cat-warmth-subtle: #372544; --ns-color-cat-warmth-fg: #E7CAFF; --ns-color-mark-left: #EB7BA8; --ns-color-mark-right: #4CC9B0; --ns-color-mark-overlap: #F3F1EC; --ns-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --ns-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03); --ns-shadow-md: 0 8px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05); --ns-shadow-lg: 0 24px 56px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06); color-scheme: dark; } } [data-theme="dark"] { --ns-color-canvas: #14120F; --ns-color-surface: #1C1916; --ns-color-surface-subtle: #181613; --ns-color-surface-hover: #24201C; --ns-color-surface-inverse: #F3F1EC; --ns-color-line: #34302A; --ns-color-line-strong: #4A443E; --ns-color-line-control: #736B62; --ns-color-fg: #F3F1EC; --ns-color-fg-muted: #A69E93; --ns-color-fg-subtle: #857D72; --ns-color-fg-inverse: #1C1916; --ns-color-brand: #4CC9B0; --ns-color-brand-hover: #86DCCB; --ns-color-brand-active: #BFE5DC; --ns-color-brand-subtle: #0E332D; --ns-color-brand-fg: #86DCCB; --ns-color-on-brand: #06201B; --ns-color-accent: #EB7BA8; --ns-color-accent-hover: #F2B9D1; --ns-color-accent-subtle: #3F0E24; --ns-color-accent-fg: #F2B9D1; --ns-color-on-accent: #3F0E24; --ns-color-focus: #4CC9B0; --ns-color-scrim: rgba(0, 0, 0, 0.64); --ns-color-success: #5CCB7E; --ns-color-success-subtle: #13301C; --ns-color-success-fg: #9BE0AF; --ns-color-on-success: #14120F; --ns-color-warning: #F2B533; --ns-color-warning-subtle: #3A2A07; --ns-color-warning-fg: #F7D38A; --ns-color-on-warning: #14120F; --ns-color-danger: #F06B5F; --ns-color-danger-subtle: #3D1614; --ns-color-danger-fg: #F8A7A0; --ns-color-on-danger: #14120F; --ns-color-info: #7FA2F5; --ns-color-info-subtle: #17254A; --ns-color-info-fg: #B0C6FA; --ns-color-on-info: #14120F; --ns-color-cat-action: #F87F99; --ns-color-cat-action-subtle: #472028; --ns-color-cat-action-fg: #FEC7CF; --ns-color-cat-idea: #D6A20A; --ns-color-cat-idea-subtle: #3C2B02; --ns-color-cat-idea-fg: #F3D392; --ns-color-cat-structure: #6DADFF; --ns-color-cat-structure-subtle: #182E4B; --ns-color-cat-structure-fg: #BEDAFE; --ns-color-cat-growth: #8BBD50; --ns-color-cat-growth-subtle: #243411; --ns-color-cat-growth-fg: #C4E4A5; --ns-color-cat-flow: #F68A4F; --ns-color-cat-flow-subtle: #462311; --ns-color-cat-flow-fg: #FECBB1; --ns-color-cat-warmth: #C88EF1; --ns-color-cat-warmth-subtle: #372544; --ns-color-cat-warmth-fg: #E7CAFF; --ns-color-mark-left: #EB7BA8; --ns-color-mark-right: #4CC9B0; --ns-color-mark-overlap: #F3F1EC; --ns-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --ns-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03); --ns-shadow-md: 0 8px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05); --ns-shadow-lg: 0 24px 56px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06); color-scheme: dark; } /* Type styles */ .ns-type-display-xl { font-family: var(--ns-font-family-display); font-size: var(--ns-text-display-xl-size); line-height: var(--ns-text-display-xl-line-height); font-weight: var(--ns-text-display-xl-weight); letter-spacing: var(--ns-text-display-xl-tracking); text-wrap: balance; } .ns-type-display-lg { font-family: var(--ns-font-family-display); font-size: var(--ns-text-display-lg-size); line-height: var(--ns-text-display-lg-line-height); font-weight: var(--ns-text-display-lg-weight); letter-spacing: var(--ns-text-display-lg-tracking); text-wrap: balance; } .ns-type-h1 { font-family: var(--ns-font-family-display); font-size: var(--ns-text-h1-size); line-height: var(--ns-text-h1-line-height); font-weight: var(--ns-text-h1-weight); letter-spacing: var(--ns-text-h1-tracking); text-wrap: balance; } .ns-type-h2 { font-family: var(--ns-font-family-display); font-size: var(--ns-text-h2-size); line-height: var(--ns-text-h2-line-height); font-weight: var(--ns-text-h2-weight); letter-spacing: var(--ns-text-h2-tracking); text-wrap: balance; } .ns-type-h3 { font-family: var(--ns-font-family-display); font-size: var(--ns-text-h3-size); line-height: var(--ns-text-h3-line-height); font-weight: var(--ns-text-h3-weight); letter-spacing: var(--ns-text-h3-tracking); text-wrap: balance; } .ns-type-h4 { font-family: var(--ns-font-family-display); font-size: var(--ns-text-h4-size); line-height: var(--ns-text-h4-line-height); font-weight: var(--ns-text-h4-weight); letter-spacing: var(--ns-text-h4-tracking); text-wrap: balance; } .ns-type-body-lg { font-family: var(--ns-font-family-sans); font-size: var(--ns-text-body-lg-size); line-height: var(--ns-text-body-lg-line-height); font-weight: var(--ns-text-body-lg-weight); letter-spacing: var(--ns-text-body-lg-tracking); } .ns-type-body { font-family: var(--ns-font-family-sans); font-size: var(--ns-text-body-size); line-height: var(--ns-text-body-line-height); font-weight: var(--ns-text-body-weight); letter-spacing: var(--ns-text-body-tracking); } .ns-type-body-sm { font-family: var(--ns-font-family-sans); font-size: var(--ns-text-body-sm-size); line-height: var(--ns-text-body-sm-line-height); font-weight: var(--ns-text-body-sm-weight); letter-spacing: var(--ns-text-body-sm-tracking); } .ns-type-caption { font-family: var(--ns-font-family-sans); font-size: var(--ns-text-caption-size); line-height: var(--ns-text-caption-line-height); font-weight: var(--ns-text-caption-weight); letter-spacing: var(--ns-text-caption-tracking); } .ns-type-label { font-family: var(--ns-font-family-mono); font-size: var(--ns-text-label-size); line-height: var(--ns-text-label-line-height); font-weight: var(--ns-text-label-weight); letter-spacing: var(--ns-text-label-tracking); text-transform: uppercase; } .ns-type-code { font-family: var(--ns-font-family-mono); font-size: var(--ns-text-code-size); line-height: var(--ns-text-code-line-height); font-weight: var(--ns-text-code-weight); letter-spacing: var(--ns-text-code-tracking); } @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *)); @theme { --color-*: initial; --color-white: #FFFFFF; --color-black: #000000; --color-teal-50: #F0F8F6; --color-teal-100: #E2F2EE; --color-teal-200: #BFE5DC; --color-teal-300: #86DCCB; --color-teal-400: #4CC9B0; --color-teal-500: #1E9985; --color-teal-600: #0F7466; --color-teal-700: #0B5C51; --color-teal-800: #0B463F; --color-teal-900: #0E332D; --color-teal-950: #06201B; --color-berry-50: #FCF0F5; --color-berry-100: #F8DCE8; --color-berry-200: #F2B9D1; --color-berry-300: #EB7BA8; --color-berry-400: #DB5590; --color-berry-500: #C23A74; --color-berry-600: #A3245A; --color-berry-700: #841D49; --color-berry-800: #641638; --color-berry-900: #3F0E24; --color-stone-0: #FFFFFF; --color-stone-25: #FAF9F6; --color-stone-50: #F3F1EC; --color-stone-100: #EAE7E0; --color-stone-200: #E3DFD6; --color-stone-300: #CFC9BE; --color-stone-400: #A69E93; --color-stone-450: #968E83; --color-stone-500: #857D72; --color-stone-550: #736B62; --color-stone-600: #6B645C; --color-stone-700: #4A443E; --color-stone-800: #34302A; --color-stone-850: #24201C; --color-stone-900: #1C1916; --color-stone-925: #181613; --color-stone-950: #14120F; --color-green-50: #E6F4E9; --color-green-300: #9BE0AF; --color-green-400: #5CCB7E; --color-green-600: #1F7A3A; --color-green-700: #17632E; --color-green-900: #13301C; --color-amber-50: #FDF3DC; --color-amber-300: #F7D38A; --color-amber-400: #F2B533; --color-amber-500: #C98A04; --color-amber-700: #7A4F00; --color-amber-900: #3A2A07; --color-red-50: #FCE9E7; --color-red-300: #F8A7A0; --color-red-400: #F06B5F; --color-red-600: #C0342B; --color-red-700: #A02A22; --color-red-900: #3D1614; --color-blue-50: #E8EEFC; --color-blue-300: #B0C6FA; --color-blue-400: #7FA2F5; --color-blue-600: #2F5FD0; --color-blue-700: #244CA8; --color-blue-900: #17254A; --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --text-*: initial; --text-display-xl: clamp(2.5rem, 2.0455rem + 1.8182vw, 3.5rem); --text-display-xl--line-height: 1.05; --text-display-xl--letter-spacing: -0.035em; --text-display-xl--font-weight: 700; --text-display-lg: clamp(2rem, 1.6591rem + 1.3636vw, 2.75rem); --text-display-lg--line-height: 1.1; --text-display-lg--letter-spacing: -0.03em; --text-display-lg--font-weight: 700; --text-h1: clamp(1.75rem, 1.5795rem + 0.6818vw, 2.125rem); --text-h1--line-height: 1.15; --text-h1--letter-spacing: -0.025em; --text-h1--font-weight: 600; --text-h2: clamp(1.375rem, 1.2614rem + 0.4545vw, 1.625rem); --text-h2--line-height: 1.2; --text-h2--letter-spacing: -0.02em; --text-h2--font-weight: 600; --text-h3: 1.25rem; --text-h3--line-height: 1.3; --text-h3--letter-spacing: -0.015em; --text-h3--font-weight: 600; --text-h4: 1rem; --text-h4--line-height: 1.35; --text-h4--letter-spacing: -0.01em; --text-h4--font-weight: 600; --text-body-lg: 1.0625rem; --text-body-lg--line-height: 1.6; --text-body-lg--letter-spacing: 0em; --text-body-lg--font-weight: 400; --text-body: 0.9375rem; --text-body--line-height: 1.55; --text-body--letter-spacing: 0em; --text-body--font-weight: 400; --text-body-sm: 0.8125rem; --text-body-sm--line-height: 1.5; --text-body-sm--letter-spacing: 0em; --text-body-sm--font-weight: 400; --text-caption: 0.75rem; --text-caption--line-height: 1.4; --text-caption--letter-spacing: 0.005em; --text-caption--font-weight: 500; --text-label: 0.6875rem; --text-label--line-height: 1.45; --text-label--letter-spacing: 0.07em; --text-label--font-weight: 500; --text-code: 0.8125rem; --text-code--line-height: 1.55; --text-code--letter-spacing: 0em; --text-code--font-weight: 400; --radius-*: initial; --radius-2xs: 4px; --radius-xs: 6px; --radius-sm: 12px; --radius-md: 18px; --radius-lg: 24px; --radius-full: 9999px; --ease-*: initial; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-enter: cubic-bezier(0, 0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-snap: cubic-bezier(0.34, 1.4, 0.64, 1); --breakpoint-*: initial; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --spacing: 4px; --default-transition-duration: 180ms; --default-transition-timing-function: cubic-bezier(0.2, 0, 0, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } @theme inline { --shadow-*: initial; --color-canvas: var(--ns-color-canvas); --color-surface: var(--ns-color-surface); --color-surface-subtle: var(--ns-color-surface-subtle); --color-surface-hover: var(--ns-color-surface-hover); --color-surface-inverse: var(--ns-color-surface-inverse); --color-line: var(--ns-color-line); --color-line-strong: var(--ns-color-line-strong); --color-line-control: var(--ns-color-line-control); --color-fg: var(--ns-color-fg); --color-fg-muted: var(--ns-color-fg-muted); --color-fg-subtle: var(--ns-color-fg-subtle); --color-fg-inverse: var(--ns-color-fg-inverse); --color-brand: var(--ns-color-brand); --color-brand-hover: var(--ns-color-brand-hover); --color-brand-active: var(--ns-color-brand-active); --color-brand-subtle: var(--ns-color-brand-subtle); --color-brand-fg: var(--ns-color-brand-fg); --color-on-brand: var(--ns-color-on-brand); --color-accent: var(--ns-color-accent); --color-accent-hover: var(--ns-color-accent-hover); --color-accent-subtle: var(--ns-color-accent-subtle); --color-accent-fg: var(--ns-color-accent-fg); --color-on-accent: var(--ns-color-on-accent); --color-focus: var(--ns-color-focus); --color-scrim: var(--ns-color-scrim); --color-success: var(--ns-color-success); --color-success-subtle: var(--ns-color-success-subtle); --color-success-fg: var(--ns-color-success-fg); --color-on-success: var(--ns-color-on-success); --color-warning: var(--ns-color-warning); --color-warning-subtle: var(--ns-color-warning-subtle); --color-warning-fg: var(--ns-color-warning-fg); --color-on-warning: var(--ns-color-on-warning); --color-danger: var(--ns-color-danger); --color-danger-subtle: var(--ns-color-danger-subtle); --color-danger-fg: var(--ns-color-danger-fg); --color-on-danger: var(--ns-color-on-danger); --color-info: var(--ns-color-info); --color-info-subtle: var(--ns-color-info-subtle); --color-info-fg: var(--ns-color-info-fg); --color-on-info: var(--ns-color-on-info); --color-cat-action: var(--ns-color-cat-action); --color-cat-action-subtle: var(--ns-color-cat-action-subtle); --color-cat-action-fg: var(--ns-color-cat-action-fg); --color-cat-idea: var(--ns-color-cat-idea); --color-cat-idea-subtle: var(--ns-color-cat-idea-subtle); --color-cat-idea-fg: var(--ns-color-cat-idea-fg); --color-cat-structure: var(--ns-color-cat-structure); --color-cat-structure-subtle: var(--ns-color-cat-structure-subtle); --color-cat-structure-fg: var(--ns-color-cat-structure-fg); --color-cat-growth: var(--ns-color-cat-growth); --color-cat-growth-subtle: var(--ns-color-cat-growth-subtle); --color-cat-growth-fg: var(--ns-color-cat-growth-fg); --color-cat-flow: var(--ns-color-cat-flow); --color-cat-flow-subtle: var(--ns-color-cat-flow-subtle); --color-cat-flow-fg: var(--ns-color-cat-flow-fg); --color-cat-warmth: var(--ns-color-cat-warmth); --color-cat-warmth-subtle: var(--ns-color-cat-warmth-subtle); --color-cat-warmth-fg: var(--ns-color-cat-warmth-fg); --color-mark-left: var(--ns-color-mark-left); --color-mark-right: var(--ns-color-mark-right); --color-mark-overlap: var(--ns-color-mark-overlap); --shadow-xs: var(--ns-shadow-xs); --shadow-sm: var(--ns-shadow-sm); --shadow-md: var(--ns-shadow-md); --shadow-lg: var(--ns-shadow-lg); } @utility type-display-xl { font-family: var(--font-display); font-size: var(--text-display-xl); line-height: var(--text-display-xl--line-height); letter-spacing: var(--text-display-xl--letter-spacing); font-weight: var(--text-display-xl--font-weight); } @utility type-display-lg { font-family: var(--font-display); font-size: var(--text-display-lg); line-height: var(--text-display-lg--line-height); letter-spacing: var(--text-display-lg--letter-spacing); font-weight: var(--text-display-lg--font-weight); } @utility type-h1 { font-family: var(--font-display); font-size: var(--text-h1); line-height: var(--text-h1--line-height); letter-spacing: var(--text-h1--letter-spacing); font-weight: var(--text-h1--font-weight); } @utility type-h2 { font-family: var(--font-display); font-size: var(--text-h2); line-height: var(--text-h2--line-height); letter-spacing: var(--text-h2--letter-spacing); font-weight: var(--text-h2--font-weight); } @utility type-h3 { font-family: var(--font-display); font-size: var(--text-h3); line-height: var(--text-h3--line-height); letter-spacing: var(--text-h3--letter-spacing); font-weight: var(--text-h3--font-weight); } @utility type-h4 { font-family: var(--font-display); font-size: var(--text-h4); line-height: var(--text-h4--line-height); letter-spacing: var(--text-h4--letter-spacing); font-weight: var(--text-h4--font-weight); } @utility type-body-lg { font-family: var(--font-sans); font-size: var(--text-body-lg); line-height: var(--text-body-lg--line-height); letter-spacing: var(--text-body-lg--letter-spacing); font-weight: var(--text-body-lg--font-weight); } @utility type-body { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--text-body--line-height); letter-spacing: var(--text-body--letter-spacing); font-weight: var(--text-body--font-weight); } @utility type-body-sm { font-family: var(--font-sans); font-size: var(--text-body-sm); line-height: var(--text-body-sm--line-height); letter-spacing: var(--text-body-sm--letter-spacing); font-weight: var(--text-body-sm--font-weight); } @utility type-caption { font-family: var(--font-sans); font-size: var(--text-caption); line-height: var(--text-caption--line-height); letter-spacing: var(--text-caption--letter-spacing); font-weight: var(--text-caption--font-weight); } @utility type-label { font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--text-label--line-height); letter-spacing: var(--text-label--letter-spacing); font-weight: var(--text-label--font-weight); text-transform: uppercase; } @utility type-code { font-family: var(--font-mono); font-size: var(--text-code); line-height: var(--text-code--line-height); letter-spacing: var(--text-code--letter-spacing); font-weight: var(--text-code--font-weight); }