/* tokens — single source of truth. themes switch via [data-theme] on */ :root { /* brand */ --brand-electric-blue: #4891f9; --brand-blue: #0d1bff; --brand-blue-600: #2563eb; --brand-teal: #00e0c7; --brand-magenta: #ff0049; --brand-yellow: #fffb71; /* ink scale */ --ink-deep: #010f1f; --ink: #022342; --navy-800: #05305a; --navy-700: #0a3e7a; --paper: #f4f8fd; --paper-2: #eaf1fa; /* semantic brand aliases */ --primary: var(--brand-electric-blue); --primary-strong: var(--brand-blue-600); --accent: var(--brand-teal); --danger: var(--brand-magenta); --warning: var(--brand-yellow); --gradient-primary: linear-gradient(135deg, var(--brand-electric-blue), var(--brand-blue-600)); --gradient-accent: linear-gradient(135deg, var(--brand-teal), var(--brand-electric-blue)); --gradient-hairline: linear-gradient(90deg, var(--brand-teal), transparent); /* type */ --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 3.75rem); --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 3rem); --fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.25rem); --fs-h3: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); --fs-h4: 1.5rem; --fs-h5: 1.25rem; --fs-lead: 1.125rem; --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --lh-tight: 1.05; --lh-heading: 1.15; --lh-snug: 1.35; --lh-body: 1.625; --ls-tight: -0.03em; --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.08em; --ls-wider: 0.18em; /* spacing (4px base) */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 5rem; --space-11: 7rem; --space-12: 9rem; /* radii */ --radius-sm: 0.375rem; --radius: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-pill: 999px; /* layout */ --container: 90rem; --container-wide: 90rem; /* Widened from the kit's 48rem: at 48rem a prose column looked stranded in the 90rem page. 60rem still keeps a readable measure. */ --container-narrow: 60rem; --gutter: 1.5rem; /* The bar is sized by its tallest item plus the .site-header__inner rhythm (1.25rem block padding) and its 1px border, so this has to follow the wordmark rather than assume one. Below 1100px the 2.75rem nav toggle is the tallest item instead. */ --header-height: calc(var(--logo-height, 40px) + 2.5rem + 1px); /* motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur: 300ms; --dur-slow: 500ms; /* z-index */ --z-base: 1; --z-header: 100; --z-overlay: 900; --z-modal: 1000; } /* dark theme (default) */ /* The third selector makes the legacy blue band a dark island on a light page: tokens are inherited, so redeclaring them here is the whole switch. */ :root, [data-theme="dark"], .primaryblue_bg_wrap:has(.features_wrap.with_features_logo) { color-scheme: dark; --bg: var(--ink-deep); --bg-elevated: var(--ink); --bg-elevated-2: var(--navy-800); --bg-inset: #01152b; --surface: var(--ink); --surface-border: rgba(255, 255, 255, 0.08); --surface-border-strong: rgba(255, 255, 255, 0.16); --text: #e6edf7; --text-strong: #ffffff; --text-muted: #93a4be; --text-faint: #63748e; --text-on-brand: #ffffff; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --ring: var(--primary); --page-radial: radial-gradient(at 50% 0%, #0a3e7a 0%, #022342 38%, #010f1f 100%); --dot-grid: radial-gradient(circle at 1px 1px, rgba(72, 145, 249, 0.10) 1px, transparent 0); --card-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 20px 40px -24px rgba(0,0,0,0.7); --shadow-cta: 0 10px 30px -10px rgba(72,145,249,0.6), 0 0 0 1px rgba(255,255,255,0.08); --shadow-pop: 0 24px 60px -20px rgba(0,0,0,0.8); --code-keyword: var(--brand-electric-blue); --code-string: var(--brand-teal); --code-danger: var(--brand-magenta); --code-comment: var(--text-faint); } /* light theme */ [data-theme="light"] { color-scheme: light; --accent: var(--primary-strong); --gradient-accent: linear-gradient(135deg, var(--brand-blue-600), var(--brand-electric-blue)); --gradient-hairline: linear-gradient(90deg, var(--brand-blue-600), transparent); --bg: var(--paper); --bg-elevated: #ffffff; --bg-elevated-2: var(--paper-2); --bg-inset: #0b1c34; --surface: #ffffff; --surface-border: rgba(6, 24, 48, 0.10); --surface-border-strong: rgba(6, 24, 48, 0.18); --text: #0c2036; --text-strong: #041022; --text-muted: #4a5f7a; --text-faint: #7d8ea6; --text-on-brand: #ffffff; --border: rgba(6, 24, 48, 0.10); --border-strong: rgba(6, 24, 48, 0.18); --ring: var(--primary-strong); --page-radial: radial-gradient(at 50% 0%, #dcebff 0%, #eef4fc 38%, #f4f8fd 100%); --dot-grid: radial-gradient(circle at 1px 1px, rgba(13, 27, 255, 0.07) 1px, transparent 0); --card-shadow: 0 1px 2px rgba(6,24,48,0.04), 0 18px 40px -28px rgba(6,24,48,0.28); --shadow-cta: 0 12px 28px -12px rgba(37,99,235,0.5), 0 0 0 1px rgba(6,24,48,0.06); --shadow-pop: 0 24px 60px -22px rgba(6,24,48,0.28); --code-keyword: var(--brand-electric-blue); --code-string: var(--brand-teal); --code-danger: var(--brand-magenta); --code-comment: rgba(255,255,255,0.45); } /* Do not zero --dur* under prefers-reduced-motion: it kills every transition in the theme. Motion policy is per-component; html.a11y-no-motion is the off switch. */ /* the nav toggle outgrows the wordmark once the drawer takes over */ @media (max-width: 1099px) { :root { --header-height: calc(2.75rem + 2.5rem + 1px); } }