:root{
/* accents */
--c-red:#ff494c;--c-red-dark:#7e4243;--c-red-darker:#e00004;
--c-orange:#ff7700;--c-orange-darker:#b85600;
--c-green:#00c8a0;--c-green-darker:#00856a;
--c-blue:#4976ff;--c-blue-dark:#142040;--c-blue-disabled:#22397d;--c-blue-lighter:#7395ff;
--c-violet:#6637b2;--c-violet-light:#926bd1;
--c-white:#fff;--c-bg-black:#0d0e0f;
/* neutrals — dark to light */
--c-neutral-0:#111213;--c-neutral-1:#1e1f20;--c-neutral-1-2:#151617;--c-neutral-2:#242426;
--c-neutral-3:#292a2c;--c-neutral-4:#2f3032;--c-neutral-5:#343437;--c-neutral-6:#404145;
--c-neutral-7:#4d4e52;--c-neutral-8:#64666a;--c-neutral-9:#7e8087;--c-neutral-10:#95989c;
--c-neutral-11:#a8aaad;--c-neutral-12:#bec0c3;--c-neutral-13:#cdced1;--c-neutral-14:#e1e2e3;
--c-neutral-1200:#242629;
/* semantic aliases — house conventions from CONVENTIONS-SCSS.md §3 */
--surface-page:var(--c-bg-black);
--surface-card:transparent;
--surface-raised:var(--c-neutral-0);
--surface-hover:var(--c-neutral-1);
--text-heading:var(--c-white);
--text-body:var(--c-neutral-11);
--text-muted:var(--c-neutral-9);
--text-faint:var(--c-neutral-7);
--text-strong:var(--c-neutral-12);
--text-link:var(--c-blue-lighter);
--text-link-hover:var(--c-white);
--border-hairline:var(--c-neutral-2);
--border-field:var(--c-neutral-3);
--border-field-hover:var(--c-neutral-7);
--border-field-focus:var(--c-neutral-8);
--border-card:var(--c-neutral-1200);
--accent-primary:var(--c-blue);
--accent-primary-hover:var(--c-blue-lighter);
--status-success:var(--c-green);
--status-warning:var(--c-orange);
--status-critical:var(--c-red);
--status-info:var(--c-violet-light)
}
:root{
/* Every --t-* token is a complete `font` shorthand. Never write bare font-size/weight/family. */
--t-h1-500:normal 500 60px/68px Inter,sans-serif; /* @kind font */
--t-h2-500:normal 500 48px/62px Inter,sans-serif; /* @kind font */
--t-h2-300:normal 300 48px/62px Inter,sans-serif; /* @kind font */
--t-h3-600:normal 600 40px/52px Inter,sans-serif; /* @kind font */
--t-h3-300:normal 300 40px/52px Inter,sans-serif; /* @kind font */
--t-h4-600:normal 600 32px/44px Inter,sans-serif; /* @kind font */
--t-h4-300:normal 300 32px/44px Inter,sans-serif; /* @kind font */
--t-h5-600:normal 600 28px/40px Inter,sans-serif; /* @kind font */
--t-h5-500:normal 500 28px/40px Inter,sans-serif; /* @kind font */
--t-h5-300:normal 300 28px/40px Inter,sans-serif; /* @kind font */
--t-h6-500:normal 500 24px/32px Inter,sans-serif; /* @kind font */
--t-h7-600:normal 600 20px/32px Inter,sans-serif; /* @kind font */
--t-h7-500:normal 500 20px/32px Inter,sans-serif; /* @kind font */
--t-h7-300:normal 300 20px/32px Inter,sans-serif; /* @kind font */
--t-h8-500:normal 500 18px/28px Inter,sans-serif; /* @kind font */
--t-h8-300:normal 300 18px/28px Inter,sans-serif; /* @kind font */
--t-body-big-300:normal 300 16px/1.5 Inter,sans-serif; /* @kind font */
--t-body-big-400:normal 400 16px/1.5 Inter,sans-serif; /* @kind font */
--t-body-big-500:normal 500 16px/1.5 Inter,sans-serif; /* @kind font */
--t-body-primary-300:normal 300 14px/24px Inter,sans-serif; /* @kind font */
--t-body-primary-400:normal 400 14px/24px Inter,sans-serif; /* @kind font */
--t-body-primary-500:normal 500 14px/24px Inter,sans-serif; /* @kind font */
--t-body-primary-600:normal 600 14px/24px Inter,sans-serif; /* @kind font */
--t-body-primary-bullet-300:normal 300 14px/24px Inter,sans-serif; /* @kind font */
--t-body-small-300:normal 300 12px/20px Inter,sans-serif; /* @kind font */
--t-body-small-400:normal 400 12px/20px Inter,sans-serif; /* @kind font */
--t-body-small-500:normal 500 12px/20px Inter,sans-serif; /* @kind font */
--t-body-small-600:normal 600 12px/20px Inter,sans-serif; /* @kind font */
--t-url-300:normal 300 14px/24px Inter,sans-serif; /* @kind font */
--t-code-300:normal 300 12px/18px IBMPlexMono,monospace; /* @kind font */
--t-code-400:normal 400 12px/18px IBMPlexMono,monospace; /* @kind font */
/* blog / long-form only */
--t-blog-h1:normal 500 60px/68px Inter,sans-serif; /* @kind font */
--t-blog-h2:normal 600 32px/44px Inter,sans-serif; /* @kind font */
--t-blog-h3:normal 500 24px/36px Inter,sans-serif; /* @kind font */
--t-blog-h4:normal 600 20px/32px Inter,sans-serif; /* @kind font */
--t-blog-h5:normal 600 18px/28px Inter,sans-serif; /* @kind font */
--t-blog-h6:normal 700 16px/24px Inter,sans-serif; /* @kind font */
--t-blog-body-bullets:normal 300 16px/28px Inter,sans-serif; /* @kind font */
--t-blog-body-numerical:normal 300 16px/28px Inter,sans-serif; /* @kind font */
--t-blog-link:normal 300 16px/28px Inter,sans-serif; /* @kind font */
/* heading letter-spacing — always negative, paired with the matching token */
--ls-h1:-0.6px; /* @kind other */ --ls-h2:-0.48px; /* @kind other */ --ls-h3:-0.4px; /* @kind other */ --ls-h4:-0.32px; /* @kind other */
--ls-h5:-0.28px; /* @kind other */ --ls-h6:-0.24px; /* @kind other */ --ls-h7:-0.2px; /* @kind other */ --ls-h8:-0.18px; /* @kind other */
/* semantic aliases */
--text-display:var(--t-h1-500); /* @kind font */
--text-section-title:var(--t-h5-500); /* @kind font */
--text-card-title:var(--t-h8-500); /* @kind font */
--text-paragraph:var(--t-body-primary-400); /* @kind font */
--text-lede:var(--t-h8-300); /* @kind font */
--text-caption:var(--t-body-small-400); /* @kind font */
--text-code:var(--t-code-400) /* @kind font */
}
:root{
--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:20px;
--spacing-2xl:24px;--spacing-3xl:32px;--spacing-4xl:40px;--spacing-5xl:48px;--spacing-6xl:64px;
--spacing-7xl:80px;--spacing-8xl:96px;--spacing-9xl:120px;
--spacing-icons-button:8px;
/* semantic aliases */
--gutter-mobile:20px; /* @kind spacing */
--section-padding-block:60px; /* @kind spacing */
--section-padding-block-desktop:100px /* @kind spacing */
}
:root{
/* motion — the house transition is 200ms ease-in-out, applied per-property */
--motion-duration:200ms; /* @kind other */
--motion-easing:ease-in-out; /* @kind other */
--motion-duration-fast:150ms; /* @kind other */
--motion-duration-slow:350ms; /* @kind other */
--transition-default:200ms ease-in-out; /* @kind other */
/* card border: a 1px gradient hairline, masked. Applied via ::before. */
--grad-card-border:linear-gradient(318deg,#111213 -12.16%,#303236 99.14%); /* @kind other */
--grad-card-border-active:linear-gradient(to bottom right,rgba(73,118,255,0.96) 0%,rgba(73,118,255,0.16) 100%); /* @kind other */
--grad-card-hover-fill:radial-gradient(68.04% 71.07% at 0% 5%,rgba(255,255,255,0.08) 0%,rgba(22,23,26,0.14) 46%,rgba(13,14,15,0) 100%); /* @kind other */
--grad-control-active-fill:radial-gradient(68.04% 71.07% at 0% 5%,#16171a 0%,#0d0e0f 100%); /* @kind other */
/* dotted / dashed structural textures */
--dot-grid-image:radial-gradient(circle,#ffffff 1px,transparent 1px); /* @kind other */
--dot-grid-size:13px 13px; /* @kind other */
--dot-grid-opacity:0.15; /* @kind other */
--dash-size:8px; /* @kind other */
--dash-fill:50%; /* @kind other */
--dashed-color:var(--c-neutral-2); /* @kind other */
/* the only shadow in the system: the toggle knob */
--shadow-toggle-knob:drop-shadow(0 1px 1px rgba(0,0,0,0.15))
}
:root{
--nav-height:60px; /* @kind spacing */
--content-max-width:1200px; /* @kind spacing */
--content-columns:12; /* @kind other */
--content-column-gap:32px; /* @kind spacing */
--bp-xs:320px; /* @kind other */ --bp-sm:390px; /* @kind other */ --bp-md:768px; /* @kind other */ --bp-lg:990px; /* @kind other */ --bp-xl:1200px; /* @kind other */
/* radii — the only three in the codebase */
--radius-field:8px;
--radius-card:12px;
--radius-pill:100px
}
@media (min-width:990px){:root{--nav-height:68px}}