/* ========================================================================== RadGo public website — design tokens Source of truth: Stitch project "RadGo Enterprise Radiology Website" (projects/4845470017972590704), design theme: light, Plus Jakarta Sans headlines, Inter body, JetBrains Mono labels, ROUND_EIGHT, custom colour #0b192c. Every colour, size, radius and shadow in radgo-site.css resolves to a token here. ========================================================================== */ :root { /* ---- Brand & semantic colour (Stitch named colours) ------------------ */ --radgo-primary: #0e1c2f; /* primary-container: dark panels, primary CTAs */ --radgo-primary-dark: #000000; /* primary: header CTA, active pills */ --radgo-on-primary: #ffffff; --radgo-primary-muted: #77849c; /* on-primary-container */ --radgo-accent: #006a68; /* secondary: teal accent */ --radgo-on-accent: #ffffff; --radgo-accent-soft: #83f5f1; /* secondary-container */ --radgo-accent-ink: #00706e; /* on-secondary-container */ --radgo-accent-dim: #65d8d4; /* secondary-fixed-dim */ --radgo-accent-bright: #89f2ff; /* tertiary-fixed: accent text on navy */ --radgo-tint: #525f75; /* surface-tint */ --radgo-viewer: #001f23; /* tertiary-container: DICOM canvas */ --radgo-viewer-bone: #0b1319; --radgo-viewer-lung: #051119; --radgo-viewer-soft: #0f172a; --radgo-scan-blue: #2563eb; /* mock-up scan strokes (logo blue set) */ --radgo-scan-sky: #38bdf8; --radgo-scan-light: #60a5fa; --radgo-scan-mid: #3b82f6; --radgo-logo-navy: #0b192c; --radgo-logo-teal: #0f9d9a; --radgo-logo-cyan: #22c7d6; --radgo-surface: #f8f9ff; /* surface / background */ --radgo-surface-alt: #eff4ff; /* surface-container-low */ --radgo-surface-container: #e5eeff; /* surface-container */ --radgo-surface-high: #dce9ff; /* surface-container-high */ --radgo-surface-highest: #d3e4fe; /* surface-container-highest */ --radgo-surface-raised: #ffffff; /* surface-container-lowest: cards */ --radgo-surface-dim: #cbdbf5; /* surface-dim: body text on navy */ --radgo-border: #c5c6cd; /* outline-variant */ --radgo-outline: #75777d; /* outline */ --radgo-text: #0b1c30; /* on-surface */ --radgo-text-muted: #44474c; /* on-surface-variant */ --radgo-success: #006a68; /* the accent doubles as the positive state */ --radgo-success-soft: #83f5f1; --radgo-warning: #8a5a00; --radgo-warning-soft: #ffddb3; --radgo-danger: #ba1a1a; /* error */ --radgo-on-danger: #ffffff; --radgo-danger-soft: #ffdad6; /* error-container */ --radgo-danger-ink: #93000a; /* on-error-container */ /* Translucent layers used on navy and glass surfaces */ --radgo-glass-on-dark: rgb(255 255 255 / 0.10); --radgo-glass-on-dark-strong: rgb(255 255 255 / 0.15); --radgo-glass-on-dark-hover: rgb(255 255 255 / 0.20); --radgo-header-bg: rgb(248 249 255 / 0.80); --radgo-pill-bg: rgb(255 255 255 / 0.90); --radgo-border-soft: rgb(197 198 205 / 0.20); --radgo-row-danger: rgb(255 218 214 / 0.20); --radgo-glow-accent: rgb(131 245 241 / 0.30); --radgo-glow-tint: rgb(82 95 117 / 0.10); --radgo-accent-line: rgb(0 106 104 / 0.40); --radgo-accent-wash: rgb(131 245 241 / 0.10); --radgo-accent-wash-end: rgb(0 106 104 / 0.10); --radgo-danger-dot: rgb(186 26 26 / 0.70); --radgo-scrim: rgb(14 28 47 / 0.45); /* ---- Typography ------------------------------------------------------ */ --radgo-font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; --radgo-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --radgo-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; /* Stitch type scale: [size, line-height, tracking] */ --radgo-text-display: 36px; --radgo-leading-display: 44px; --radgo-tracking-display: -0.02em; --radgo-text-display-sm: 28px; --radgo-leading-display-sm: 36px; --radgo-tracking-display-sm: -0.01em; --radgo-text-headline-lg: 28px; --radgo-leading-headline-lg: 36px; --radgo-tracking-headline-lg: -0.015em; --radgo-text-headline-md: 22px; --radgo-leading-headline-md: 28px; --radgo-tracking-headline-md: -0.01em; --radgo-text-headline-sm: 18px; --radgo-leading-headline-sm: 24px; --radgo-tracking-headline-sm: -0.005em; --radgo-text-body-lg: 16px; --radgo-leading-body-lg: 24px; --radgo-text-body-md: 14px; --radgo-leading-body-md: 20px; --radgo-text-body-sm: 13px; --radgo-leading-body-sm: 18px; --radgo-text-label-lg: 14px; --radgo-leading-label-lg: 20px; --radgo-text-label-md: 12px; --radgo-leading-label-md: 16px; --radgo-tracking-label-md: 0.01em; --radgo-text-label-sm: 11px; --radgo-leading-label-sm: 14px; --radgo-tracking-label-sm: 0.03em; --radgo-text-code: 12px; --radgo-leading-code: 16px; --radgo-text-micro: 10px; --radgo-leading-micro: 12px; --radgo-text-caption: 12px; --radgo-tracking-tight: -0.025em; --radgo-tracking-wide: 0.025em; --radgo-tracking-wider: 0.05em; --radgo-tracking-widest: 0.1em; --radgo-weight-regular: 400; --radgo-weight-medium: 500; --radgo-weight-semibold: 600; --radgo-weight-bold: 700; --radgo-weight-heavy: 800; /* ---- Spacing (Stitch: space-xs … space-xl, margins, section rhythm) ---- */ --radgo-space-2xs: 2px; --radgo-space-xs: 4px; --radgo-space-sm: 8px; --radgo-space-2: 10px; --radgo-space-3: 12px; --radgo-space-md: 16px; --radgo-space-lg: 24px; --radgo-space-xl: 32px; --radgo-space-2xl: 48px; --radgo-space-section-sm: 80px; --radgo-space-section: 96px; --radgo-gutter: 16px; --radgo-margin-mobile: 16px; --radgo-margin-tablet: 24px; --radgo-margin-desktop: 32px; /* ---- Radius (ROUND_EIGHT) -------------------------------------------- */ --radgo-radius-xs: 4px; --radgo-radius-sm: 6px; --radgo-radius-md: 8px; --radgo-radius-lg: 12px; --radgo-radius-xl: 16px; --radgo-radius-2xl: 24px; --radgo-radius-full: 9999px; /* ---- Elevation ------------------------------------------------------- */ --radgo-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --radgo-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10); --radgo-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10); --radgo-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10); --radgo-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --radgo-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --radgo-shadow-footer: 0 -1px 8px rgb(0 0 0 / 0.02); --radgo-focus-ring: 0 0 0 3px var(--radgo-accent-soft), 0 0 0 5px var(--radgo-accent); /* ---- Layout ---------------------------------------------------------- */ --radgo-header-height: 80px; --radgo-width-page: 1280px; /* max-w-7xl */ --radgo-width-narrow: 896px; /* max-w-4xl */ --radgo-width-copy: 768px; /* max-w-3xl */ --radgo-width-lede: 672px; /* max-w-2xl */ --radgo-width-note: 384px; /* max-w-sm */ --radgo-width-phone: 256px; --radgo-height-phone: 440px; --radgo-width-floating-viewer: 420px; /* Breakpoints (reference values; media queries cannot read custom properties): sm 640px · md 768px · lg 1024px · xl 1280px */ /* ---- Motion ---------------------------------------------------------- */ --radgo-ease: cubic-bezier(0.4, 0, 0.2, 1); --radgo-duration-fast: 150ms; --radgo-duration: 300ms; } /* Arabic uses one family for every role that carries words — headlines, body and labels — so Arabic text never switches typeface mid-sentence. Monospace stays for codes and numbers. */ :root:lang(ar) { --radgo-font-display: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, sans-serif; --radgo-font-body: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; /* Codes, times and DICOM values stay monospaced; any Arabic word inside falls back to the same Arabic family instead of an arbitrary system font. */ --radgo-font-mono: "JetBrains Mono", "IBM Plex Sans Arabic", ui-monospace, monospace; --radgo-tracking-display: 0; --radgo-tracking-display-sm: 0; --radgo-tracking-headline-lg: 0; --radgo-tracking-headline-md: 0; --radgo-tracking-headline-sm: 0; --radgo-tracking-tight: 0; --radgo-tracking-wide: 0; --radgo-tracking-wider: 0; --radgo-tracking-widest: 0; --radgo-tracking-label-sm: 0; --radgo-tracking-label-md: 0; }