/* generated from assets/design/tokens.json - do not edit by hand */

@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-300.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/fonts/manrope-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --color-light-surface: #FFFFFF;
  --color-light-surface-dim: #D3DAE9;
  --color-light-surface-bright: #F8F9FF;
  --color-light-surface-container-lowest: #FFFFFF;
  --color-light-surface-container-low: #EFF4FF;
  --color-light-surface-container: #E6EEFD;
  --color-light-surface-container-high: #E1E8F8;
  --color-light-surface-container-highest: #DBE3F2;
  --color-light-on-surface: #141C27;
  --color-light-on-surface-variant: #46474B;
  --color-light-inverse-surface: #29313C;
  --color-light-inverse-on-surface: #EAF1FF;
  --color-light-outline: #76777B;
  --color-light-outline-variant: #C6C6CB;
  --color-light-surface-tint: #5D5E64;
  --color-light-primary: #000000;
  --color-light-on-primary: #FFFFFF;
  --color-light-primary-container: #1A1B21;
  --color-light-on-primary-container: #82838A;
  --color-light-inverse-primary: #C6C6CD;
  --color-light-secondary: #3349DB;
  --color-light-on-secondary: #FFFFFF;
  --color-light-secondary-container: #5065F5;
  --color-light-on-secondary-container: #FFFBFF;
  --color-light-tertiary: #000000;
  --color-light-on-tertiary: #FFFFFF;
  --color-light-tertiary-container: #00201D;
  --color-light-on-tertiary-container: #00948A;
  --color-light-error: #BA1A1A;
  --color-light-on-error: #FFFFFF;
  --color-light-error-container: #FFDAD6;
  --color-light-on-error-container: #93000A;
  --color-light-primary-fixed: #E2E2E9;
  --color-light-primary-fixed-dim: #C6C6CD;
  --color-light-on-primary-fixed: #1A1B21;
  --color-light-on-primary-fixed-variant: #45474C;
  --color-light-secondary-fixed: #DFE0FF;
  --color-light-secondary-fixed-dim: #BCC3FF;
  --color-light-on-secondary-fixed: #000D60;
  --color-light-on-secondary-fixed-variant: #142FC6;
  --color-light-tertiary-fixed: #79F7EA;
  --color-light-tertiary-fixed-dim: #5ADACE;
  --color-light-on-tertiary-fixed: #00201D;
  --color-light-on-tertiary-fixed-variant: #00504A;
  --color-light-background: #FAFAF8;
  --color-light-on-background: #141C27;
  --color-light-surface-variant: #DBE3F2;
  --color-light-border: #E5E7EB;
  --color-light-success: #16845B;
  --color-light-warning: #C77A13;
  --color-light-critical: #C53D4D;
  --color-light-midnight-navy: #0A0B10;
  --color-light-accent: #5267F7;
  --color-light-crawler-progress: #4FD1C5;
  --color-light-placeholder: #76777B;
  --color-dark-midnight-background: #0A0B10;
  --color-dark-midnight-on-background-strong: #FFFFFF;
  --color-dark-midnight-on-background-body: #E2E2E9;
  --color-dark-midnight-on-background-muted: #C6C6CD;
  --color-dark-midnight-accent: #5267F7;
  --color-dark-midnight-accent-cyan: #79F7EA;
  --color-dark-midnight-cta-background: #5065F5;
  --color-dark-midnight-cta-background-hover: #3349DB;
  --color-dark-midnight-on-cta: #FFFBFF;
  --color-dark-midnight-border-subtle: rgba(229, 231, 235, 0.2);
  --color-dark-midnight-border-subtle-strong: rgba(229, 231, 235, 0.3);
  --color-dark-midnight-node-gradient-start: #5267F7;
  --color-dark-midnight-node-gradient-end: #4FD1C5;
  --color-usage-rules-status-hexes-as-text: success/warning/critical hexes are reserved for graphical elements (>=3:1 non-text contrast) or large text; small status labels (label-caps size) use on-surface text paired with a colored dot/icon (see _resolutions.R6).;
  --color-usage-rules-status-pill-surface: Status pills render on surface #FFFFFF with a 1px border token, not on inverse-on-surface tint (see _resolutions.R5).;
  --color-usage-rules-on-primary-container: Only for text atop the dark primary-container surface; never as a muted/placeholder color on light surfaces.;
  --typography-font-family-display: Manrope;
  --typography-font-family-text: Inter;
  --typography-font-family-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --typography-wordmark-search-font-family: Manrope;
  --typography-wordmark-search-font-size: 24px;
  --typography-wordmark-search-font-weight: 800;
  --typography-wordmark-search-line-height: 32px;
  --typography-wordmark-search-letter-spacing: -0.04em;
  --typography-wordmark-refined-font-family: Manrope;
  --typography-wordmark-refined-font-size: 24px;
  --typography-wordmark-refined-font-weight: 300;
  --typography-wordmark-refined-line-height: 32px;
  --typography-wordmark-refined-letter-spacing: 0.02em;
  --typography-headline-lg-font-family: Manrope;
  --typography-headline-lg-font-size: 32px;
  --typography-headline-lg-font-weight: 600;
  --typography-headline-lg-line-height: 40px;
  --typography-headline-lg-letter-spacing: -0.02em;
  --typography-headline-lg-mobile-font-family: Manrope;
  --typography-headline-lg-mobile-font-size: 24px;
  --typography-headline-lg-mobile-font-weight: 600;
  --typography-headline-lg-mobile-line-height: 32px;
  --typography-body-md-font-family: Inter;
  --typography-body-md-font-size: 16px;
  --typography-body-md-font-weight: 400;
  --typography-body-md-line-height: 24px;
  --typography-body-sm-font-family: Inter;
  --typography-body-sm-font-size: 14px;
  --typography-body-sm-font-weight: 400;
  --typography-body-sm-line-height: 20px;
  --typography-label-caps-font-family: Inter;
  --typography-label-caps-font-size: 12px;
  --typography-label-caps-font-weight: 600;
  --typography-label-caps-line-height: 16px;
  --typography-label-caps-letter-spacing: 0.05em;
  --typography-label-caps-text-transform: uppercase;
  --typography-snippet-font-family: Inter;
  --typography-snippet-font-size: 15px;
  --typography-snippet-font-weight: 400;
  --typography-snippet-line-height: 22px;
  --typography-wordmark-composition-part1-text: SEARCH;
  --typography-wordmark-composition-part1-token: wordmark-search;
  --typography-wordmark-composition-part2-text: .ITISYOU;
  --typography-wordmark-composition-part2-token: wordmark-refined;
  --typography-minimum-text-size: 12px;
  --spacing-unit: 4px;
  --spacing-container-max-width: 1280px;
  --spacing-search-result-width: 680px;
  --spacing-gutter: 24px;
  --spacing-margin-mobile: 16px;
  --spacing-margin-desktop: 40px;
  --spacing-header-height: 64px;
  --spacing-search-field-height-desktop: 64px;
  --spacing-search-field-height-mobile: 56px;
  --spacing-grid-desktop: 12-column grid, 24px gutters;
  --spacing-grid-mobile: single column, 16px margins;
  --spacing-grid-rhythm: 4px baseline grid governs all vertical spacing;
  --radius-sharp: 2px;
  --radius-sm: 0.25rem;
  --radius-default: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --radius-usage-sharp: Technical indicators and status bars (uptime bars, progress tracks);
  --radius-usage-default: Standard components: buttons, cards (8px);
  --radius-usage-full: Main search field pill, badges/pills, circular icon buttons, interactive nodes;
  --border-width: 1px;
  --border-color: #E5E7EB;
  --border-dark-subtle: rgba(229, 231, 235, 0.2);
  --shadow-level0: none;
  --shadow-level1: none — hierarchy via tonal layer: surface #FFFFFF on background #FAFAF8;
  --shadow-ambient: 0 1px 4px 0 rgba(0, 0, 0, 0.02);
  --shadow-ambient-alt: 1px solid #E5E7EB (border alternative to Level-2 shadow, per DESIGN.md);
  --shadow-glow-text: 0 0 10px rgba(82, 103, 247, 0.5);
  --shadow-glow-box: 0 0 20px rgba(82, 103, 247, 0.3);
  --shadow-glow-cyan: 0 0 20px rgba(79, 209, 197, 0.3);
  --focus-ring: 2px solid #5267F7;
  --focus-offset: 2px;
  --motion-duration-fast: 150ms;
  --motion-duration-standard: 300ms;
  --motion-duration-slow: 500ms;
  --motion-duration-progress-fill: 1000ms;
  --motion-duration-node-flow: 3000ms;
  --motion-easing-standard: ease;
  --motion-easing-node-flow: linear;
  --component-search-field-height-desktop: 64px;
  --component-search-field-height-mobile: 56px;
  --component-search-field-radius: full;
  --component-search-field-focus: 2px solid #5267F7 ring, 2px offset;
  --component-search-field-surface: #FFFFFF on background #FAFAF8;
  --component-badge-live-background: #000000;
  --component-badge-live-text: #FFFFFF;
  --component-badge-live-position: top-right of wordmark;
  --component-badge-live-min-font-size: 12px (label-caps);
  --component-badge-live-radius: sm;
  --component-badge-future-border: 1px dashed #E5E7EB;
  --component-badge-future-style: ghost;
  --component-crawler-progress-track-height: 4px;
  --component-crawler-progress-fill: #4FD1C5;
  --component-crawler-progress-corners: sharp (2px);
  --component-interactive-node-shape: circle, 1px stroke;
  --component-interactive-node-active-pathway: animated gradient #5267F7 -> #4FD1C5;
  --component-hit-area-min: 44px;
}

.theme-midnight {

}