/* Devbox Kaitech design system tokens -- copied verbatim from the design
system's tokens/*.css (Claude Design handoff, 2026-09-29) so the CMS and the
design stay in lockstep. Edit tokens in the design system, then re-copy;
CMS-specific styling belongs in devbox-theme.css, not here.
Chivo Mono is loaded from Google Fonts via a in the page head.
Host Grotesk is self-hosted from /fonts (ExtraBold 800 omitted -- the
system retires it from headings). */
@font-face{font-family:"Host Grotesk";src:url("/fonts/HostGrotesk-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("/fonts/HostGrotesk-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("/fonts/HostGrotesk-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("/fonts/HostGrotesk-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("/fonts/HostGrotesk-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
/* ---- tokens/colors.css ---- */
/* Base palette — the "Devbox + Kaitech" swatch group from Devbox-Kaitech_RGB.ase,
using the brand's own colour names. These are the entire palette. Everything
else here is a neutral ramp or a semantic alias built on top of them. */
:root{
/* Brand core — Dark Grey, Cloud White, Engine Orange, Rich Cobalt */
--dark-grey:#232323;
--cloud-white:#f6f6f6;
--engine-orange:#f55a16;
--rich-cobalt:#0b2cf5;
/* Additional accents — available to both brands as needed */
--medium-blue:#4154f9;
--bright-scarlet:#ff4e46;
--white:#ffffff;
/* Short aliases used throughout the system */
--ink:var(--dark-grey);
--paper:var(--cloud-white);
/* Devbox accent (engineering / build) */
--devbox-blue:var(--rich-cobalt);
--devbox-blue-lift:var(--medium-blue);
/* Kaitech accent (partnership / breakthrough) */
--kaitech-orange:var(--engine-orange);
/* Named neutrals — Brand Style Guide v1.0 § 3 */
--cool-grey:#8C9099; /* CMYK 48 38 32 2 — 3.2:1 on white: icons, rules, large type only */
--soft-grey:#E8EAEF; /* CMYK 7 5 3 0 — quiet grounds and dividers */
/* Neutral ramp — cool, built around Cool Grey (500) and Soft Grey (150), Dark Grey to white */
--n-950:#232323;
--n-900:#2c2e33;
--n-800:#3d4047;
--n-700:#54585f;
--n-600:#6e727a;
--n-500:#8c9099;
--n-400:#9fa3ab;
--n-300:#b3b6bd;
--n-250:#c5c8ce;
--n-200:#d6d9df;
--n-150:#e8eaef;
--n-100:#f0f1f4;
--n-50:#f6f6f6;
--n-0:#ffffff;
/* Semantic status */
--status-success:#00a14b;
--status-warning:#f7941d;
--status-danger:var(--bright-scarlet);
--status-info:var(--rich-cobalt);
/* ---- Semantic aliases: use these in product code ---- */
--accent:var(--devbox-blue);
--accent-lift:var(--devbox-blue-lift);
--accent-contrast:var(--white);
--text-primary:var(--ink);
--text-secondary:var(--n-700);
--text-tertiary:var(--n-600); /* 4.8:1 on white; --n-500 Cool Grey is 3.2:1 and not for text */
--text-inverse:var(--white);
--text-accent:var(--accent);
--text-link:var(--accent);
--text-link-hover:var(--ink);
--surface-page:var(--paper);
--surface-card:var(--white);
--surface-sunken:var(--n-100);
--surface-inverse:var(--ink);
--surface-accent:var(--accent);
--surface-hover:var(--n-100);
--surface-active:var(--n-150);
/* Accent tints — derived from --accent, so they follow the active brand.
--accent-tint: quiet chips and fills. --accent-tint-deep: full-bleed bands. */
--accent-tint:color-mix(in srgb,var(--accent) 8%,var(--white));
--accent-tint-deep:color-mix(in srgb,var(--accent) 22%,var(--white));
--border-hairline:var(--n-200);
--border-strong:var(--ink);
--border-subtle:var(--n-150);
--border-accent:var(--accent);
--border-focus:var(--accent);
}
/* Brand scopes. Put [data-brand="kaitech"] on , a , or any wrapper
to swap the accent pair without touching component code. */
[data-brand="devbox"]{--accent:var(--devbox-blue);--accent-lift:var(--devbox-blue-lift);--accent-contrast:var(--white)}
[data-brand="kaitech"]{--accent:var(--engine-orange);--accent-lift:var(--bright-scarlet);--accent-contrast:var(--white)}
/* Inverse scope — dark industrial panels. */
[data-theme="inverse"]{
--text-primary:var(--white);
--text-secondary:var(--n-300);
--text-tertiary:var(--n-500);
--text-link:var(--white);
--text-link-hover:var(--accent-lift);
--surface-page:var(--ink);
--surface-card:var(--n-900);
--surface-sunken:#1a1a1a;
--surface-inverse:var(--paper);
--surface-hover:var(--n-800);
--surface-active:var(--n-700);
--border-hairline:var(--n-800);
--border-subtle:var(--n-900);
--border-strong:var(--white);
}
/* ---- tokens/typography.css ---- */
:root{
--font-core:"Host Grotesk","Helvetica Neue",Arial,sans-serif; /* fallbacks confirmed by the team */
--font-display:var(--font-core);
--font-body:var(--font-core);
/* Chivo Mono — the brand's second voice. Not for code: it carries secondary
body copy in designated sections (client principles, project blurbs,
service copy, team bios, metric values). */
--font-mono:"Chivo Mono","Courier New",monospace; /* fallback confirmed by the team */
--font-detail:var(--font-mono);
--fw-light:300; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-extrabold:800; /* @kind font */
/* Display / headline scale — set tight, Bold, negative tracking.
ExtraBold 800 is loaded but retired from headings (Style Guide § 4: headings are Bold and Semibold). */
--fs-display-1:88px;
--fs-display-2:64px;
--fs-display-3:48px;
--fs-h1:36px;
--fs-h2:28px;
--fs-h3:22px;
--fs-h4:16px; /* 12pt */
/* Text scale */
--fs-lead:20px;
/* Sub-headers — Style Guide § 4. Sub-header 1: Host Grotesk Regular. Sub-header 2: Chivo Mono Regular. */
--fs-subheader:20px;
--fs-body:16px;
--fs-small:14px;
--fs-caption:12px;
--fs-eyebrow:12px;
--lh-tight:0.98; /* @kind font */
--lh-display:1.04; /* @kind font */
--lh-heading:1.15; /* @kind font */
--lh-body:1.55; /* @kind font */
--lh-loose:1.7; /* @kind font */
--ls-display:-0.03em; /* @kind font */
--ls-heading:-0.02em; /* @kind font */
--ls-body:0em; /* @kind font */
--ls-eyebrow:0.14em; /* @kind font */
--ls-wordmark:0.32em; /* @kind font */
/* Semantic type aliases */
--text-display-weight:var(--fw-bold);
--text-heading-weight:var(--fw-bold); /* H1–H2 */
--text-heading-sm-weight:var(--fw-semibold); /* H3–H4 */
--text-body-weight:var(--fw-light); /* Style Guide § 4: body is Host Grotesk Light */
--text-label-weight:var(--fw-light); /* Style Guide § 4: labels Light 14px */
--text-subheader-weight:var(--fw-regular);
--text-ui-weight:var(--fw-medium);
}
/* ---- tokens/spacing.css ---- */
:root{
--space-0:0px;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-32:128px;
--space-40:160px;
--gutter:var(--space-6);
--section-y:var(--space-32);
--section-y-compact:var(--space-20);
--container-max:1240px;
--container-narrow:720px;
--measure:66ch; /* @kind other */
}
/* ---- tokens/borders.css ---- */
:root{
/* Industrial: square by default. Radius is a deliberate exception, never a default. */
--radius-none:0px;
--radius-sm:2px;
--radius-md:4px;
--radius-lg:8px;
--radius-pill:999px;
--border-width-hairline:1px; /* @kind spacing */
--border-width-strong:2px; /* @kind spacing */
--focus-ring-width:2px; /* @kind spacing */
--focus-ring-offset:2px; /* @kind spacing */
}
/* ---- tokens/elevation.css ---- */
:root{
/* Shadows are rare — hairline borders carry separation. These exist for
overlays and lifted cards only. */
--shadow-none:none;
--shadow-1:0 1px 2px rgba(35,35,35,.06);
--shadow-2:0 4px 12px rgba(35,35,35,.08);
--shadow-3:0 16px 40px rgba(35,35,35,.12);
--shadow-inset-hairline:inset 0 0 0 1px var(--border-hairline);
}
/* ---- tokens/motion.css ---- */
:root{
--dur-instant:80ms; /* @kind other */
--dur-fast:140ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:320ms; /* @kind other */
--ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
--ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
--ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
--transition-ui:all var(--dur-fast) var(--ease-standard); /* @kind other */
/* Scroll reveal — exact values from the Devbox site (Layout.astro) */
--dur-reveal:480ms; /* @kind other */
--ease-reveal:cubic-bezier(.22,1,.36,1); /* @kind other */
--reveal-rise:18px; /* @kind spacing */
--reveal-stagger:65ms; /* @kind other */
--reveal-stagger-max:195ms; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--dur-instant:0ms; /* @kind other */
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
}}