/* joinedcontext design tokens, generated by tokens/build_tokens.py, do not edit. Source: joinedcontext.tokens.json */
:root {
  --jc-color-navy-50: #eef0fb; /* Lightest tint, hover on light backgrounds, navy-tinted sections */
  --jc-color-navy-100: #d9ddf5; /* Light background for a highlighted block */
  --jc-color-navy-200: #b3bbeb; /* Borders and dividers on light backgrounds */
  --jc-color-navy-300: #8fa3ff; /* Navy for dark backgrounds (logo dark, links in dark mode) */
  --jc-color-navy-400: #6b7fe0; /* Icons on dark backgrounds, secondary accents */
  --jc-color-navy-500: #4a5bc4; /* Interactive elements, button hover */
  --jc-color-navy-600: #2f3f9e; /* LOGO navy (light). Primary buttons, headings. 8.6:1 on white. */
  --jc-color-navy-700: #26337f; /* Hover/active state of the primary button */
  --jc-color-navy-800: #1c2660; /* Dark text on light navy tints */
  --jc-color-navy-900: #131a42; /* Darkest navy, hero and footer backgrounds */
  --jc-color-aqua-50: #e6f7f9; /* Background of info blocks and aqua-tinted sections */
  --jc-color-aqua-100: #c2ecf1; /* Light tag background */
  --jc-color-aqua-200: #8fdbe5; /* Borders and charts on light backgrounds */
  --jc-color-aqua-300: #4dd6e0; /* Aqua for dark backgrounds (logo dark). 11.5:1 on black. */
  --jc-color-aqua-400: #22b8c7; /* Icons, charts */
  --jc-color-aqua-500: #0e8fa3; /* LOGO aqua (light). Icons, charts, buttons (3.6:1: not for body text, use 600 for text). */
  --jc-color-aqua-600: #0b7485; /* Link hover, text on aqua-50 */
  --jc-color-aqua-700: #095a68; /* Dark aqua text */
  --jc-color-aqua-800: #06414b; /* Background of dark aqua blocks */
  --jc-color-blend-50: #e9f1fb; /* Lightest tint, blend-tinted blocks */
  --jc-color-blend-100: #cfe1f6; /* Light background, tags */
  --jc-color-blend-200: #a4c6ec; /* Borders, charts on light backgrounds */
  --jc-color-blend-300: #74a9e3; /* Blend for dark backgrounds. 8.5:1 on black. */
  --jc-color-blend-400: #4a8bd0; /* Icons, charts */
  --jc-color-blend-500: #1e67a0; /* Mid-gradient stop, diagram accent. 6.1:1 on white. */
  --jc-color-blend-600: #185480; /* Text on blend-50, dark-mode gradient stop */
  --jc-color-blend-700: #124062; /* Dark blend text */
  --jc-color-blend-800: #0c2c44; /* Background of dark blend blocks */
  --jc-color-neutral-0: #ffffff; /* Pure white */
  --jc-color-neutral-50: #f6f7fb; /* Page background (light), same as the logo light background */
  --jc-color-neutral-100: #eceef5; /* Card and section backgrounds */
  --jc-color-neutral-200: #dde1ee; /* Borders and dividers: a hairline, the shadow does the rest */
  --jc-color-neutral-300: #b4b9cc; /* Disabled elements, placeholders */
  --jc-color-neutral-400: #8f95ab; /* Secondary text on dark, placeholders */
  --jc-color-neutral-500: #646b82; /* Secondary text on light (>=4.5:1) */
  --jc-color-neutral-700: #3a3f52; /* Primary text on light, softer than black */
  --jc-color-neutral-850: #1a1e30; /* Borders and raised surfaces in dark mode */
  --jc-color-neutral-900: #14172a; /* Headings, darkest text */
  --jc-color-neutral-950: #0b0d16; /* Card background in dark mode */
  --jc-color-neutral-1000: #000000; /* Page background (dark), same as the logo dark background */
  --jc-color-signal-success: #1e8a5a; /* Success, online, validated (AA on white) */
  --jc-color-signal-warning: #b7791f; /* Warning, pending (AA on white) */
  --jc-color-signal-error: #c8402c; /* Error, offline, invalid (AA on white) */
  --jc-color-signal-info: #0e8fa3; /* Information, uses the brand aqua */
  --jc-font-family-brand: "Space Grotesk", Inter, system-ui, sans-serif; /* Headings and logo. Space Grotesk (OFL), Inter/system fallback. */
  --jc-font-family-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Body text. Inter has wide diacritic coverage (sk/cs/pl/hu). */
  --jc-font-family-mono: "JetBrains Mono", "SF Mono", Consolas, monospace; /* Code, NGSI-LD payloads, URNs. */
  --jc-font-weight-regular: 400; /* Body text */
  --jc-font-weight-medium: 500; /* Emphasis, menus */
  --jc-font-weight-bold: 700; /* Headings, logo (700/700) */
  --jc-font-size-xs: 0.75rem; /* 12px: meta, tags */
  --jc-font-size-sm: 0.875rem; /* 14px: captions */
  --jc-font-size-md: 1rem; /* 16px: base, never smaller for body text */
  --jc-font-size-lg: 1.25rem; /* 20px: lead */
  --jc-font-size-xl: 1.5625rem; /* 25px: h3 */
  --jc-font-size-2xl: 1.953rem; /* 31px: h2 */
  --jc-font-size-3xl: 2.441rem; /* 39px: h1 */
  --jc-font-size-4xl: 3.052rem; /* 49px: hero */
  --jc-font-size-5xl: 3.815rem; /* 61px: hero on wide screens */
  --jc-font-leading-tight: 1.15; /* Headings */
  --jc-font-leading-normal: 1.5; /* Text (WCAG 1.4.12 minimum) */
  --jc-font-leading-loose: 1.7; /* Long-form reading */
  --jc-font-leading-display: 1.05; /* Hero and large headings */
  --jc-font-tracking-logo: -0.013rem; /* -0.4px at 30px = wordmark letter-spacing */
  --jc-font-tracking-heading: -0.01rem; /* Slightly tightened headings */
  --jc-font-tracking-normal: 0rem; /* Text */
  --jc-font-tracking-display: -0.022rem; /* Hero: large text takes more tightening */
  --jc-font-tracking-wide: 0.06rem; /* Small caps, eyebrows, diagram labels */
  --jc-space-1: 0.25rem; /* 4px */
  --jc-space-2: 0.5rem; /* 8px */
  --jc-space-3: 0.75rem; /* 12px */
  --jc-space-4: 1rem; /* 16px: base */
  --jc-space-6: 1.5rem; /* 24px */
  --jc-space-8: 2rem; /* 32px */
  --jc-space-12: 3rem; /* 48px */
  --jc-space-16: 4rem; /* 64px: sections */
  --jc-space-24: 6rem; /* 96px: hero */
  --jc-radius-sm: 6px; /* Tags, inputs */
  --jc-radius-md: 10px; /* Buttons */
  --jc-radius-lg: 16px; /* Cards, panels */
  --jc-radius-xl: 24px; /* Large surfaces: code card, hero panel */
  --jc-radius-full: 999px; /* Pills, avatars */
  --jc-border-default: 1px solid #dde1ee; /* Regular border (light) */
  --jc-border-focus: 2px solid #0e8fa3; /* Focus ring, WCAG 2.4.11, offset 2px */
  --jc-shadow-sm: 0px 1px 2px 0px rgb(20 23 42 / 0.05), 0px 2px 6px -1px rgb(20 23 42 / 0.08); /* Cards at rest */
  --jc-shadow-md: 0px 2px 4px -1px rgb(20 23 42 / 0.06), 0px 10px 24px -6px rgb(20 23 42 / 0.14); /* Card under the cursor, dropdown, sticky header */
  --jc-shadow-lg: 0px 4px 8px -2px rgb(20 23 42 / 0.06), 0px 28px 56px -16px rgb(20 23 42 / 0.22); /* Code card, modal, floating panel */
  --jc-motion-duration-fast: 120ms; /* Hover, focus */
  --jc-motion-duration-base: 200ms; /* Open, transitions */
  --jc-motion-duration-slow: 400ms; /* Modals, large changes */
  --jc-motion-easing-standard: cubic-bezier(0.2,0,0,1); /* Regular transitions */
  --jc-motion-easing-emphasized: cubic-bezier(0.3,0,0,1); /* Entrance of important elements */
  --jc-motion-transition-default: 200ms cubic-bezier(0.2,0,0,1) 0ms; /* Default transition */
  --jc-logo-minHeight: 24px; /* Minimum on-screen height of the horizontal logo */
  --jc-sem-bg-page: #f6f7fb; /* Page background */
  --jc-sem-bg-surface: #ffffff; /* Cards, panels */
  --jc-sem-bg-muted: #eceef5; /* Sections, table headers */
  --jc-sem-bg-raised: #eceef5; /* A chip or bar sitting on a card */
  --jc-sem-bg-brand: #2f3f9e; /* Solid brand background (hero, footer), white text on it */
  --jc-sem-bg-brandSoft: #eef0fb; /* Navy-tinted section or footer background, primary text on it */
  --jc-sem-bg-accent: #e6f7f9; /* Soft highlight for info blocks */
  --jc-sem-text-primary: #14172a; /* Body text 15.6:1 */
  --jc-sem-text-secondary: #646b82; /* Captions, meta 4.9:1 */
  --jc-sem-text-brand: #2f3f9e; /* Headings, brand text 8.6:1 */
  --jc-sem-text-accent: #0b7485; /* Links, highlighted words: aqua.600 is >=4.5:1 (aqua.500 = 3.6:1, graphics only) */
  --jc-sem-text-onBrand: #ffffff; /* Text on bg.brand and on gradient.brand */
  --jc-sem-text-disabled: #b4b9cc; /* Disabled text, not AA, never for important information */
  --jc-sem-border-default: #dde1ee; /* Regular borders */
  --jc-sem-border-subtle: #eceef5; /* Hairline dividers */
  --jc-sem-border-strong: #b4b9cc; /* Form field borders */
  --jc-sem-border-focus: #0e8fa3; /* Focus ring, 2px, visible on every background */
  --jc-sem-action-primary: #2f3f9e; /* Primary button */
  --jc-sem-action-primaryHover: #26337f; /* Primary button hover */
  --jc-sem-action-secondary: #0e8fa3; /* Secondary button */
  --jc-sem-action-secondaryHover: #0b7485; /* Secondary button hover */
  --jc-sem-tint-navyBg: #eef0fb; /* Navy tile background */
  --jc-sem-tint-navyFg: #26337f; /* Icon or text on navyBg */
  --jc-sem-tint-aquaBg: #e6f7f9; /* Aqua tile background */
  --jc-sem-tint-aquaFg: #095a68; /* Icon or text on aquaBg */
  --jc-sem-tint-blendBg: #e9f1fb; /* Blend tile background */
  --jc-sem-tint-blendFg: #124062; /* Icon or text on blendBg */
  --jc-sem-mark-a: #2f3f9e; /* Mark and diagrams: navy stroke, gradients, accents */
  --jc-sem-mark-b: #0e8fa3; /* Mark and diagrams: aqua stroke, gradients, accents */
  --jc-sem-mark-c: #1e67a0; /* Diagrams: the third accent where a and b meet */
  --jc-sem-gradient-brand: linear-gradient(135deg, #2f3f9e 0%, #1e67a0 50%, #0b7485 100%); /* Bold brand gradient for bands, primary buttons and step numbers; text.onBrand passes AA on every stop */
  --jc-sem-gradient-soft: linear-gradient(135deg, #eef0fb 0%, #e6f7f9 100%); /* Tinted gradient for hero and page-head backgrounds; text.primary on it */
  --jc-sem-gradient-text: linear-gradient(90deg, #2f3f9e 0%, #0b7485 100%); /* Gradient for display headlines via background-clip: text; both stops pass AA on bg.page */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --jc-sem-bg-page: #000000; /* Page background, black */
  --jc-sem-bg-surface: #0b0d16; /* Cards, panels */
  --jc-sem-bg-muted: #14172a; /* Sections */
  --jc-sem-bg-raised: #1a1e30; /* A chip or bar sitting on a card */
  --jc-sem-bg-brand: #131a42; /* Solid brand background */
  --jc-sem-bg-brandSoft: #131a42; /* Navy-tinted section or footer background */
  --jc-sem-bg-accent: #06414b; /* Soft highlight for info blocks */
  --jc-sem-text-primary: #f6f7fb; /* Body text */
  --jc-sem-text-secondary: #b4b9cc; /* Captions, meta */
  --jc-sem-text-brand: #8fa3ff; /* Headings, brand text (logo dark navy) */
  --jc-sem-text-accent: #4dd6e0; /* Links (logo dark aqua) */
  --jc-sem-text-onBrand: #ffffff; /* Text on bg.brand and on gradient.brand */
  --jc-sem-text-disabled: #646b82; /* Disabled text */
  --jc-sem-border-default: #1a1e30; /* Regular borders, they have to show in the dark */
  --jc-sem-border-subtle: #14172a; /* Hairline dividers */
  --jc-sem-border-strong: #3a3f52; /* Form field borders */
  --jc-sem-border-focus: #4dd6e0; /* Focus ring */
  --jc-sem-action-primary: #8fa3ff; /* Primary button (neutral.1000 text on it) */
  --jc-sem-action-primaryHover: #b3bbeb; /* Primary button hover */
  --jc-sem-action-secondary: #4dd6e0; /* Secondary button */
  --jc-sem-action-secondaryHover: #8fdbe5; /* Secondary button hover */
  --jc-sem-tint-navyBg: #131a42; /* Navy tile background */
  --jc-sem-tint-navyFg: #8fa3ff; /* Icon or text on navyBg */
  --jc-sem-tint-aquaBg: #06414b; /* Aqua tile background */
  --jc-sem-tint-aquaFg: #4dd6e0; /* Icon or text on aquaBg */
  --jc-sem-tint-blendBg: #0c2c44; /* Blend tile background */
  --jc-sem-tint-blendFg: #74a9e3; /* Icon or text on blendBg */
  --jc-sem-mark-a: #8fa3ff; /* Mark and diagrams: navy stroke on dark */
  --jc-sem-mark-b: #4dd6e0; /* Mark and diagrams: aqua stroke on dark */
  --jc-sem-mark-c: #74a9e3; /* Diagrams: the third accent on dark */
  --jc-sem-gradient-brand: linear-gradient(135deg, #26337f 0%, #185480 50%, #095a68 100%); /* Bold brand gradient on dark; text.onBrand passes AA on every stop */
  --jc-sem-gradient-soft: linear-gradient(135deg, #131a42 0%, #06414b 100%); /* Tinted gradient for hero and page-head backgrounds on dark; text.primary on it */
  --jc-sem-gradient-text: linear-gradient(90deg, #8fa3ff 0%, #4dd6e0 100%); /* Gradient for display headlines on dark; both stops pass AA on bg.page */
}
}
:root[data-theme="dark"] {
  --jc-sem-bg-page: #000000; /* Page background, black */
  --jc-sem-bg-surface: #0b0d16; /* Cards, panels */
  --jc-sem-bg-muted: #14172a; /* Sections */
  --jc-sem-bg-raised: #1a1e30; /* A chip or bar sitting on a card */
  --jc-sem-bg-brand: #131a42; /* Solid brand background */
  --jc-sem-bg-brandSoft: #131a42; /* Navy-tinted section or footer background */
  --jc-sem-bg-accent: #06414b; /* Soft highlight for info blocks */
  --jc-sem-text-primary: #f6f7fb; /* Body text */
  --jc-sem-text-secondary: #b4b9cc; /* Captions, meta */
  --jc-sem-text-brand: #8fa3ff; /* Headings, brand text (logo dark navy) */
  --jc-sem-text-accent: #4dd6e0; /* Links (logo dark aqua) */
  --jc-sem-text-onBrand: #ffffff; /* Text on bg.brand and on gradient.brand */
  --jc-sem-text-disabled: #646b82; /* Disabled text */
  --jc-sem-border-default: #1a1e30; /* Regular borders, they have to show in the dark */
  --jc-sem-border-subtle: #14172a; /* Hairline dividers */
  --jc-sem-border-strong: #3a3f52; /* Form field borders */
  --jc-sem-border-focus: #4dd6e0; /* Focus ring */
  --jc-sem-action-primary: #8fa3ff; /* Primary button (neutral.1000 text on it) */
  --jc-sem-action-primaryHover: #b3bbeb; /* Primary button hover */
  --jc-sem-action-secondary: #4dd6e0; /* Secondary button */
  --jc-sem-action-secondaryHover: #8fdbe5; /* Secondary button hover */
  --jc-sem-tint-navyBg: #131a42; /* Navy tile background */
  --jc-sem-tint-navyFg: #8fa3ff; /* Icon or text on navyBg */
  --jc-sem-tint-aquaBg: #06414b; /* Aqua tile background */
  --jc-sem-tint-aquaFg: #4dd6e0; /* Icon or text on aquaBg */
  --jc-sem-tint-blendBg: #0c2c44; /* Blend tile background */
  --jc-sem-tint-blendFg: #74a9e3; /* Icon or text on blendBg */
  --jc-sem-mark-a: #8fa3ff; /* Mark and diagrams: navy stroke on dark */
  --jc-sem-mark-b: #4dd6e0; /* Mark and diagrams: aqua stroke on dark */
  --jc-sem-mark-c: #74a9e3; /* Diagrams: the third accent on dark */
  --jc-sem-gradient-brand: linear-gradient(135deg, #26337f 0%, #185480 50%, #095a68 100%); /* Bold brand gradient on dark; text.onBrand passes AA on every stop */
  --jc-sem-gradient-soft: linear-gradient(135deg, #131a42 0%, #06414b 100%); /* Tinted gradient for hero and page-head backgrounds on dark; text.primary on it */
  --jc-sem-gradient-text: linear-gradient(90deg, #8fa3ff 0%, #4dd6e0 100%); /* Gradient for display headlines on dark; both stops pass AA on bg.page */
}
.jc-h1 { font-family: var(--jc-font-family-brand); font-size: var(--jc-font-size-3xl); font-weight: var(--jc-font-weight-bold); letter-spacing: var(--jc-font-tracking-heading); line-height: var(--jc-font-leading-tight); } /* Page title */
.jc-h2 { font-family: var(--jc-font-family-brand); font-size: var(--jc-font-size-2xl); font-weight: var(--jc-font-weight-bold); letter-spacing: var(--jc-font-tracking-heading); line-height: var(--jc-font-leading-tight); } /* Section heading */
.jc-h3 { font-family: var(--jc-font-family-brand); font-size: var(--jc-font-size-xl); font-weight: var(--jc-font-weight-medium); letter-spacing: var(--jc-font-tracking-normal); line-height: var(--jc-font-leading-tight); } /* Subheading */
.jc-body { font-family: var(--jc-font-family-body); font-size: var(--jc-font-size-md); font-weight: var(--jc-font-weight-regular); letter-spacing: var(--jc-font-tracking-normal); line-height: var(--jc-font-leading-normal); } /* Body text */
.jc-small { font-family: var(--jc-font-family-body); font-size: var(--jc-font-size-sm); font-weight: var(--jc-font-weight-regular); letter-spacing: var(--jc-font-tracking-normal); line-height: var(--jc-font-leading-normal); } /* Meta, captions */
.jc-code { font-family: var(--jc-font-family-mono); font-size: var(--jc-font-size-sm); font-weight: var(--jc-font-weight-regular); letter-spacing: var(--jc-font-tracking-normal); line-height: var(--jc-font-leading-normal); } /* Code, JSON-LD */
@media (prefers-reduced-motion: reduce) { :root { --jc-motion-duration-fast: 0ms; --jc-motion-duration-base: 0ms; --jc-motion-duration-slow: 0ms; } }
:focus-visible { outline: var(--jc-border-focus); outline-offset: 2px; }