/* RunaSec site styles. Was nine files under _ds/runasec-design-system-/, eight of which were also pulled in a second time by an @import barrel. Consolidated to the 339 custom properties the pages and the design-system bundle actually resolve, out of 725 the export shipped. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Lato:wght@400;700;900&family=Roboto:wght@400;500&family=Archivo+Narrow:wght@400..700&display=swap'); :root { --border-default: rgb(213,215,218); --border-subtle: rgb(233,234,235); --colors-background-bg-active: var(--colors-gray-light-mode-50); --colors-background-bg-active-2: var(--colors-gray-light-mode-50-2); --colors-background-bg-brand-solid: var(--colors-brand-600); --colors-background-bg-brand-solid-hover: var(--colors-brand-700); --colors-background-bg-disabled: var(--colors-gray-light-mode-100); --colors-background-bg-disabled-subtle: var(--colors-gray-light-mode-50); --colors-background-bg-error-primary: var(--colors-error-50-2); --colors-background-bg-primary: var(--colors-base-white); --colors-background-bg-primary-2: var(--colors-base-white-2); --colors-background-bg-primary-alt: var(--colors-base-white-2); --colors-background-bg-primary-alt-2: var(--colors-base-white); --colors-background-bg-primary-hover: var(--colors-gray-light-mode-50); --colors-background-bg-primary-hover-2: var(--colors-gray-light-mode-50-2); --colors-background-bg-primary-solid: var(--colors-gray-light-mode-950); --colors-background-bg-primary-solid-2: var(--colors-gray-light-mode-950-2); --colors-background-bg-secondary-alt: var(--colors-gray-light-mode-50); --colors-background-bg-secondary-hover: var(--colors-gray-light-mode-100); --colors-background-bg-secondary-hover-2: var(--colors-gray-light-mode-100-2); --colors-background-bg-success-secondary: var(--colors-success-100); --colors-background-bg-success-secondary-2: var(--colors-success-100-2); --colors-background-bg-tertiary: var(--colors-gray-light-mode-100); --colors-background-bg-tertiary-2: var(--colors-gray-light-mode-100-2); --colors-base-black: rgb(0,0,0); --colors-base-black-2: rgb(0,0,0); --colors-base-white: rgb(255,255,255); --colors-base-white-2: rgb(255,255,255); --colors-blue-100: rgb(209,233,255); --colors-blue-200: rgb(178,221,255); --colors-blue-200-2: rgb(178,221,255); --colors-blue-50: rgb(239,248,255); --colors-blue-50-2: rgb(239,248,255); --colors-blue-500: rgb(46,144,250); --colors-blue-light-100: rgb(224,242,254); --colors-blue-light-200: rgb(185,230,254); --colors-blue-light-200-2: rgb(185,230,254); --colors-blue-light-300: rgb(124,212,253); --colors-blue-light-300-2: rgb(124,212,253); --colors-blue-light-400: rgb(54,191,250); --colors-blue-light-50: rgb(240,249,255); --colors-blue-light-50-2: rgb(240,249,255); --colors-blue-light-500: rgb(11,165,236); --colors-blue-light-500-2: rgb(11,165,236); --colors-blue-light-600-2: rgb(0,134,201); --colors-blue-light-700: rgb(2,106,162); --colors-blue-light-700-2: rgb(2,106,162); --colors-blue-light-800: rgb(6,89,134); --colors-border-border-brand: var(--colors-brand-500); --colors-border-border-disabled: var(--colors-gray-light-mode-300); --colors-border-border-disabled-subtle: var(--colors-gray-light-mode-200-2); --colors-border-border-primary: var(--colors-gray-light-mode-300); --colors-border-border-primary-2: var(--colors-gray-light-mode-300-2); --colors-border-border-secondary: var(--colors-gray-light-mode-200); --colors-border-border-secondary-2: var(--colors-gray-light-mode-200-2); --colors-brand-100: rgb(244,235,255); --colors-brand-200: rgb(233,215,254); --colors-brand-200-2: rgb(233,215,254); --colors-brand-50: rgb(249,245,255); --colors-brand-50-2: rgb(249,245,255); --colors-brand-500: rgb(158,119,237); --colors-brand-600: rgb(127,86,217); --colors-brand-700: rgb(105,65,198); --colors-brand-700-2: rgb(105,65,198); --colors-brand-800: rgb(83,56,158); --colors-error-100: rgb(254,228,226); --colors-error-200: rgb(254,205,202); --colors-error-200-2: rgb(254,205,202); --colors-error-300-2: rgb(253,162,155); --colors-error-50: rgb(254,243,242); --colors-error-50-2: rgb(254,243,242); --colors-error-500: rgb(240,68,56); --colors-error-700: rgb(180,35,24); --colors-error-700-2: rgb(180,35,24); --colors-foreground-fg-disabled: var(--colors-gray-light-mode-400); --colors-foreground-fg-disabled-subtle: var(--colors-gray-light-mode-300); --colors-foreground-fg-primary-900: var(--colors-gray-light-mode-900-2); --colors-foreground-fg-quaternary-400: var(--colors-gray-light-mode-400); --colors-foreground-fg-quaternary-400-2: var(--colors-gray-light-mode-400-2); --colors-foreground-fg-success-primary: var(--colors-success-600); --colors-foreground-fg-success-secondary: var(--colors-success-500-2); --colors-foreground-fg-success-secondary-2: var(--colors-success-500); --colors-foreground-fg-white: var(--colors-base-white-2); --colors-foreground-fg-white-2: var(--colors-base-white); --colors-gray-blue-100: rgb(234,236,245); --colors-gray-blue-200: rgb(213,217,235); --colors-gray-blue-200-2: rgb(213,217,235); --colors-gray-blue-50: rgb(248,249,252); --colors-gray-blue-50-2: rgb(248,249,252); --colors-gray-light-mode-100: rgb(245,245,245); --colors-gray-light-mode-100-2: rgb(245,245,245); --colors-gray-light-mode-200: rgb(233,234,235); --colors-gray-light-mode-200-2: rgb(233,234,235); --colors-gray-light-mode-300: rgb(213,215,218); --colors-gray-light-mode-300-2: rgb(213,215,218); --colors-gray-light-mode-400: rgb(164,167,174); --colors-gray-light-mode-400-2: rgb(164,167,174); --colors-gray-light-mode-50: rgb(250,250,250); --colors-gray-light-mode-50-2: rgb(250,250,250); --colors-gray-light-mode-500: rgb(113,118,128); --colors-gray-light-mode-500-2: rgb(113,118,128); --colors-gray-light-mode-600: rgb(83,88,98); --colors-gray-light-mode-600-2: rgb(83,88,98); --colors-gray-light-mode-700: rgb(65,70,81); --colors-gray-light-mode-700-2: rgb(65,70,81); --colors-gray-light-mode-800: rgb(37,43,55); --colors-gray-light-mode-800-2: rgb(37,43,55); --colors-gray-light-mode-900: rgb(24,29,39); --colors-gray-light-mode-900-2: rgb(24,29,39); --colors-gray-light-mode-950: rgb(10,13,18); --colors-gray-light-mode-950-2: rgb(10,13,18); --colors-green-300: rgb(115,226,163); --colors-green-50: rgb(237,252,242); --colors-green-700: rgb(8,116,67); --colors-indigo-100: rgb(224,234,255); --colors-indigo-200: rgb(199,215,254); --colors-indigo-200-2: rgb(199,215,254); --colors-indigo-300: rgb(164,188,253); --colors-indigo-400: rgb(128,152,249); --colors-indigo-50: rgb(238,244,255); --colors-indigo-50-2: rgb(238,244,255); --colors-indigo-500: rgb(97,114,243); --colors-indigo-600: rgb(68,76,231); --colors-indigo-700: rgb(53,56,205); --colors-orange-100: rgb(253,234,215); --colors-orange-200: rgb(249,219,175); --colors-orange-200-2: rgb(249,219,175); --colors-orange-300: rgb(247,178,122); --colors-orange-400: rgb(243,135,68); --colors-orange-50: rgb(254,246,238); --colors-orange-50-2: rgb(254,246,238); --colors-orange-500: rgb(239,104,32); --colors-orange-700: rgb(185,56,21); --colors-orange-800: rgb(147,47,25); --colors-orange-dark-100: rgb(255,230,213); --colors-pink-100: rgb(252,231,246); --colors-pink-200: rgb(252,206,238); --colors-pink-200-2: rgb(252,206,238); --colors-pink-50: rgb(253,242,250); --colors-pink-50-2: rgb(253,242,250); --colors-purple-100: rgb(235,233,254); --colors-purple-200: rgb(217,214,254); --colors-purple-200-2: rgb(217,214,254); --colors-purple-50: rgb(244,243,255); --colors-purple-50-2: rgb(244,243,255); --colors-success-100: rgb(220,250,230); --colors-success-100-2: rgb(220,250,230); --colors-success-200: rgb(171,239,198); --colors-success-200-2: rgb(171,239,198); --colors-success-50: rgb(236,253,243); --colors-success-50-2: rgb(236,253,243); --colors-success-500: rgb(23,178,106); --colors-success-500-2: rgb(23,178,106); --colors-success-600: rgb(7,148,85); --colors-success-700: rgb(6,118,71); --colors-text-text-brand-secondary-700: var(--colors-brand-700); --colors-text-text-brand-secondary-700-2: var(--colors-brand-700-2); --colors-text-text-brand-secondary-hover: var(--colors-brand-800); --colors-text-text-primary-900: var(--colors-gray-light-mode-900); --colors-text-text-primary-900-2: var(--colors-gray-light-mode-900-2); --colors-text-text-primary-on-brand: var(--colors-base-white); --colors-text-text-quaternary-500: var(--colors-gray-light-mode-500); --colors-text-text-quaternary-500-2: var(--colors-gray-light-mode-500-2); --colors-text-text-secondary-700: var(--colors-gray-light-mode-700); --colors-text-text-secondary-700-2: var(--colors-gray-light-mode-700-2); --colors-text-text-secondary-hover: var(--colors-gray-light-mode-800); --colors-text-text-secondary-hover-2: var(--colors-gray-light-mode-800-2); --colors-text-text-tertiary-600: var(--colors-gray-light-mode-600); --colors-text-text-tertiary-600-2: var(--colors-gray-light-mode-600-2); --colors-text-text-tertiary-hover: var(--colors-gray-light-mode-700); --colors-text-text-white: var(--colors-base-white-2); --colors-text-text-white-2: var(--colors-base-white); --colors-warning-100: rgb(254,240,199); --colors-warning-200: rgb(254,223,137); --colors-warning-200-2: rgb(254,223,137); --colors-warning-300-2: rgb(254,200,75); --colors-warning-400-2: rgb(253,176,34); --colors-warning-50: rgb(255,250,235); --colors-warning-50-2: rgb(255,250,235); --colors-warning-700-2: rgb(181,71,8); --component-colors-alpha-alpha-black-100: rgb(0,0,0); --component-colors-components-tooltips-tooltip-supporting-text: var(--colors-gray-light-mode-300); --component-colors-utility-blue-light-utility-blue-light-100: var(--colors-blue-light-100); --component-colors-utility-blue-light-utility-blue-light-200: var(--colors-blue-light-200); --component-colors-utility-blue-light-utility-blue-light-200-2: var(--colors-blue-light-200-2); --component-colors-utility-blue-light-utility-blue-light-300: var(--colors-blue-light-300-2); --component-colors-utility-blue-light-utility-blue-light-50: var(--colors-blue-light-50); --component-colors-utility-blue-light-utility-blue-light-50-2: var(--colors-blue-light-50-2); --component-colors-utility-blue-light-utility-blue-light-500-2: var(--colors-blue-light-500-2); --component-colors-utility-blue-light-utility-blue-light-600: var(--colors-blue-light-600-2); --component-colors-utility-blue-light-utility-blue-light-700-2: var(--colors-blue-light-700-2); --component-colors-utility-blue-utility-blue-100: var(--colors-blue-100); --component-colors-utility-blue-utility-blue-200: var(--colors-blue-200); --component-colors-utility-blue-utility-blue-200-2: var(--colors-blue-200-2); --component-colors-utility-blue-utility-blue-50: var(--colors-blue-50); --component-colors-utility-blue-utility-blue-50-2: var(--colors-blue-50-2); --component-colors-utility-blue-utility-blue-500: var(--colors-blue-500); --component-colors-utility-brand-utility-brand-100: var(--colors-brand-100); --component-colors-utility-brand-utility-brand-200: var(--colors-brand-200); --component-colors-utility-brand-utility-brand-200-2: var(--colors-brand-200-2); --component-colors-utility-brand-utility-brand-50: var(--colors-brand-50); --component-colors-utility-brand-utility-brand-50-2: var(--colors-brand-50-2); --component-colors-utility-error-utility-error-100: var(--colors-error-100); --component-colors-utility-error-utility-error-200: var(--colors-error-200); --component-colors-utility-error-utility-error-200-2: var(--colors-error-200-2); --component-colors-utility-error-utility-error-300: var(--colors-error-300-2); --component-colors-utility-error-utility-error-50: var(--colors-error-50); --component-colors-utility-error-utility-error-50-2: var(--colors-error-50-2); --component-colors-utility-error-utility-error-700-2: var(--colors-error-700-2); --component-colors-utility-gray-blue-utility-gray-blue-100: var(--colors-gray-blue-100); --component-colors-utility-gray-blue-utility-gray-blue-200: var(--colors-gray-blue-200); --component-colors-utility-gray-blue-utility-gray-blue-200-2: var(--colors-gray-blue-200-2); --component-colors-utility-gray-blue-utility-gray-blue-50: var(--colors-gray-blue-50); --component-colors-utility-gray-blue-utility-gray-blue-50-2: var(--colors-gray-blue-50-2); --component-colors-utility-gray-utility-gray-100: var(--colors-gray-light-mode-100); --component-colors-utility-gray-utility-gray-200: var(--colors-gray-light-mode-200-2); --component-colors-utility-gray-utility-gray-200-2: var(--colors-gray-light-mode-200); --component-colors-utility-gray-utility-gray-300: var(--colors-gray-light-mode-300-2); --component-colors-utility-gray-utility-gray-50: var(--colors-gray-light-mode-50); --component-colors-utility-gray-utility-gray-50-2: var(--colors-gray-light-mode-50-2); --component-colors-utility-gray-utility-gray-700: var(--colors-gray-light-mode-700); --component-colors-utility-gray-utility-gray-700-2: var(--colors-gray-light-mode-700-2); --component-colors-utility-green-utility-green-300: var(--colors-green-300); --component-colors-utility-green-utility-green-50: var(--colors-green-50); --component-colors-utility-green-utility-green-700: var(--colors-green-700); --component-colors-utility-indigo-utility-indigo-100: var(--colors-indigo-100); --component-colors-utility-indigo-utility-indigo-200: var(--colors-indigo-200); --component-colors-utility-indigo-utility-indigo-200-2: var(--colors-indigo-200-2); --component-colors-utility-indigo-utility-indigo-50: var(--colors-indigo-50); --component-colors-utility-indigo-utility-indigo-50-2: var(--colors-indigo-50-2); --component-colors-utility-orange-dark-utility-orange-dark-100: var(--colors-orange-dark-100); --component-colors-utility-orange-utility-orange-100: var(--colors-orange-100); --component-colors-utility-orange-utility-orange-200: var(--colors-orange-200); --component-colors-utility-orange-utility-orange-200-2: var(--colors-orange-200-2); --component-colors-utility-orange-utility-orange-50: var(--colors-orange-50); --component-colors-utility-orange-utility-orange-50-2: var(--colors-orange-50-2); --component-colors-utility-pink-utility-pink-100: var(--colors-pink-100); --component-colors-utility-pink-utility-pink-200: var(--colors-pink-200); --component-colors-utility-pink-utility-pink-200-2: var(--colors-pink-200-2); --component-colors-utility-pink-utility-pink-50: var(--colors-pink-50); --component-colors-utility-pink-utility-pink-50-2: var(--colors-pink-50-2); --component-colors-utility-purple-utility-purple-100: var(--colors-purple-100); --component-colors-utility-purple-utility-purple-200: var(--colors-purple-200); --component-colors-utility-purple-utility-purple-200-2: var(--colors-purple-200-2); --component-colors-utility-purple-utility-purple-50: var(--colors-purple-50); --component-colors-utility-purple-utility-purple-50-2: var(--colors-purple-50-2); --component-colors-utility-success-utility-success-100: var(--colors-success-100); --component-colors-utility-success-utility-success-200: var(--colors-success-200); --component-colors-utility-success-utility-success-200-2: var(--colors-success-200-2); --component-colors-utility-success-utility-success-50: var(--colors-success-50); --component-colors-utility-success-utility-success-50-2: var(--colors-success-50-2); --component-colors-utility-warning-utility-warning-100: var(--colors-warning-100); --component-colors-utility-warning-utility-warning-200: var(--colors-warning-200); --component-colors-utility-warning-utility-warning-200-2: var(--colors-warning-200-2); --component-colors-utility-warning-utility-warning-300: var(--colors-warning-300-2); --component-colors-utility-warning-utility-warning-50: var(--colors-warning-50); --component-colors-utility-warning-utility-warning-50-2: var(--colors-warning-50-2); --component-colors-utility-warning-utility-warning-700-2: var(--colors-warning-700-2); --container-padding-mobile: var(--spacing-4-16px-2); --duration-base: 150ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --font-size-display-xs: 24; --font-size-text-lg: 18; --font-size-text-md: 16; --font-size-text-sm: 14; --font-size-text-xs: 12; --leading-display-xs: calc(var(--line-height-display-xs) * 1px); --leading-lg: calc(var(--line-height-text-lg) * 1px); --leading-md: calc(var(--line-height-text-md) * 1px); --leading-sm: calc(var(--line-height-text-sm) * 1px); --leading-xs: calc(var(--line-height-text-xs) * 1px); --line-height-display-xs: 32; --line-height-text-lg: 28; --line-height-text-md: 24; --line-height-text-sm: 20; --line-height-text-xs: 18; --radius-2xl: 16; --radius-xl: 12; --round-2xl: calc(var(--radius-2xl) * 1px); --round-xl: calc(var(--radius-xl) * 1px); --runa-font-cover: "Lato", "Inter", sans-serif; --runa-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --runa-font-wordmark: "Archivo Narrow", "Avenir Next Condensed", sans-serif; --runa-navy: rgb(19,19,72); --runa-purple-mark: rgb(173,122,255); --runa-shell-bg: rgb(0,0,0); --runa-shell-border: rgb(34,38,47); --runa-shell-raised: rgb(19,22,27); --shadow-lg: 0 12px 16px -4px rgba(10,13,18,0.08), 0 4px 6px -2px rgba(10,13,18,0.03); --shadow-md: 0 4px 6px -1px rgba(10,13,18,0.10), 0 2px 4px -2px rgba(10,13,18,0.06); --shadow-sm: 0 1px 3px 0 rgba(10,13,18,0.10), 0 1px 2px -1px rgba(10,13,18,0.10); --shadow-xs: 0 1px 2px 0 rgba(10,13,18,0.05); --spacing-0-0px: 0; --spacing-0-5-2px: 2; --spacing-0-5-2px-2: 2; --spacing-1-4px: 4; --spacing-1-4px-2: 4; --spacing-1-5-6px: 6; --spacing-1-5-6px-2: 6; --spacing-10-40px: 40; --spacing-16-64px: 64; --spacing-2-8px: 8; --spacing-2-8px-2: 8; --spacing-2xl: var(--spacing-5-20px); --spacing-3-12px: 12; --spacing-3-12px-2: 12; --spacing-3xl: var(--spacing-6-24px); --spacing-3xl-2: var(--spacing-6-24px-2); --spacing-4-16px: 16; --spacing-4-16px-2: 16; --spacing-5-20px: 20; --spacing-5xl: var(--spacing-10-40px); --spacing-6-24px: 24; --spacing-6-24px-2: 24; --spacing-7xl: var(--spacing-16-64px); --spacing-lg: var(--spacing-3-12px); --spacing-lg-2: var(--spacing-3-12px-2); --spacing-md: var(--spacing-2-8px); --spacing-md-2: var(--spacing-2-8px-2); --spacing-none: var(--spacing-0-0px); --spacing-sm: var(--spacing-1-5-6px); --spacing-sm-2: var(--spacing-1-5-6px-2); --spacing-xl: var(--spacing-4-16px); --spacing-xl-2: var(--spacing-4-16px-2); --spacing-xs: var(--spacing-1-4px); --spacing-xs-2: var(--spacing-1-4px-2); --spacing-xxs: var(--spacing-0-5-2px); --spacing-xxs-2: var(--spacing-0-5-2px-2); --surface-card: var(--colors-background-bg-primary); --surface-page: var(--colors-background-bg-primary); --surface-subtle: rgb(250,250,250); --text-display-xs: calc(var(--font-size-display-xs) * 1px); --text-lg: calc(var(--font-size-text-lg) * 1px); --text-md: calc(var(--font-size-text-md) * 1px); --text-primary: rgb(24,29,39); --text-secondary: rgb(83,88,98); --text-sm: calc(var(--font-size-text-sm) * 1px); --text-tertiary: rgb(113,118,128); --text-xs: calc(var(--font-size-text-xs) * 1px); } /* element defaults carried over from the kit's base.css */ a { color: var(--colors-brand-700); text-decoration: none; } a:hover { color: var(--colors-brand-800); text-decoration: underline; } /* Status badge (replaces the design-system Badge component in the product mockups) */ .runa-badge { display: flex; width: fit-content; align-items: center; padding: 2px 6px; border-radius: 6px; font: 500 12px/18px var(--runa-font-ui); white-space: nowrap; color: var(--component-colors-utility-gray-utility-gray-700); } .runa-badge--error { background: var(--component-colors-utility-error-utility-error-50); box-shadow: inset 0 0 0 1px var(--component-colors-utility-error-utility-error-200); } .runa-badge--warning { background: var(--component-colors-utility-warning-utility-warning-50); box-shadow: inset 0 0 0 1px var(--component-colors-utility-warning-utility-warning-200); } .runa-badge--success { background: var(--component-colors-utility-success-utility-success-50); box-shadow: inset 0 0 0 1px var(--component-colors-utility-success-utility-success-200); } .runa-badge--blue-light { background: var(--component-colors-utility-blue-light-utility-blue-light-50); box-shadow: inset 0 0 0 1px var(--component-colors-utility-blue-light-utility-blue-light-200); }