/* nol.satu design system v2.0.0. Generated from tokens/tokens.json by scripts/build-tokens.mjs. Do not edit by hand. */ /* 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); }