@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400&display=swap");
/* KRYOS — design tokens, bundled for standalone hosting. */

/* ===== tokens/fonts.css ===== */
/* KRYOS webfonts. Geist is the whole system; Geist Mono is the detail layer.
   Weights deliberately subset: Geist 400 / 500 / 600, Geist Mono 400. No second family. */

/* ===== tokens/colors.css ===== */
:root{
/* --- Ink: the near-black stack. Cold-shifted, never pure #000. 5 elevation steps. --- */
--ink-000:#050706;
--ink-100:#080A09;
--ink-200:#0D1110;
--ink-300:#141918;
--ink-400:#1C2220;
--ink-500:#2A312E;

/* --- Bone: the warm neutral used for all text and for the one inverted section. --- */
--bone-100:#E8E4DC;
--bone-200:#C6C2B9;
--bone-300:#8D8B84;
--bone-400:#5E625D;
--bone-500:#3A3E3A;

/* --- Laser: the single accent. Instrument green, the colour of the borehole probe. --- */
--laser-500:#00FF9C;
--laser-600:#00C87B;
--laser-700:#008954;
--laser-a16:rgba(0,255,156,.16);
--laser-a08:rgba(0,255,156,.08);

/* --- Signal: data-visualisation only. Never used for UI chrome. --- */
--sig-warm:#FFB454;
--sig-alert:#FF5C4D;

/* --- Semantic aliases: the only names product code should reach for. --- */
--bg-base:var(--ink-100);
--bg-sunk:var(--ink-000);
--bg-raised:var(--ink-200);
--bg-panel:var(--ink-300);
--bg-inverse:var(--bone-100);

--text-primary:rgba(232,228,220,.92);
--text-body:rgba(232,228,220,.74);
--text-muted:rgba(232,228,220,.48);
--text-faint:rgba(232,228,220,.28);
--text-inverse:var(--ink-100);
--text-accent:var(--laser-500);

--border-hair:rgba(232,228,220,.10);
--border-mid:rgba(232,228,220,.18);
--border-strong:rgba(232,228,220,.34);
--border-accent:rgba(0,255,156,.42);

--accent:var(--laser-500);
--accent-dim:var(--laser-600);
--focus-ring:var(--laser-500);
}

/* ===== tokens/typography.css ===== */
:root{
--font-core:"Geist","Helvetica Neue",Arial,sans-serif;
--font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--font-display:"Geist","Helvetica Neue",Arial,sans-serif;

/* Display sizes are meant to be uncomfortable. The jump from --t-body to --t-d1 is >10x. */
--t-d1:clamp(4rem,14vw,17rem); /* @kind font */
--t-d2:clamp(3rem,8.5vw,8.5rem); /* @kind font */
--t-d3:clamp(2rem,4.4vw,4rem); /* @kind font */
--t-lead:clamp(1.25rem,2vw,1.75rem); /* @kind font */
--t-body-l:1.125rem; /* @kind font */
--t-body:1rem; /* @kind font */
--t-small:.8125rem; /* @kind font */
--t-micro:.6875rem; /* @kind font */
--t-nano:.625rem; /* @kind font */

--lh-display:.86; /* @kind font */
--lh-tight:1.04; /* @kind font */
--lh-head:1.14; /* @kind font */
--lh-body:1.55; /* @kind font */
--lh-mono:1.4; /* @kind font */

--tr-display:-.045em; /* @kind font */
--tr-tight:-.015em; /* @kind font */
--tr-body:0em; /* @kind font */
--tr-caps:.16em; /* @kind font */
--tr-caps-wide:.28em; /* @kind font */

--fw-core:400; /* @kind font */
--fw-core-mid:500; /* @kind font */
--fw-display:500; /* @kind font */
--fw-display-mid:600; /* @kind font */

--measure:60ch; /* @kind font */
--measure-tight:40ch; /* @kind font */
}

/* ===== tokens/spacing.css ===== */
:root{
/* Base unit 4px. The page runs on a small set of large jumps, not a fine ladder. */
--s-1:4px;
--s-2:8px;
--s-3:12px;
--s-4:16px;
--s-5:24px;
--s-6:32px;
--s-7:48px;
--s-8:64px;
--s-9:96px;
--s-10:128px;
--s-11:192px;
--s-12:288px;

--page-margin:clamp(20px,5vw,96px);
--gutter:clamp(16px,2.4vw,40px); /* @kind spacing */
--col:calc((100% - (11 * var(--gutter))) / 12); /* @kind spacing */
--section-pad:clamp(96px,14vh,224px);
--rail:88px; /* @kind spacing */
}

/* ===== tokens/motion.css ===== */
:root{
/* No default ease anywhere. --ease-core is the house curve: a long tail, like a drill settling. */
--ease-core:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-drill:cubic-bezier(.72,0,.24,1); /* @kind other */
--ease-cut:cubic-bezier(.9,0,.1,1); /* @kind other */
--ease-out-soft:cubic-bezier(.22,.61,.36,1); /* @kind other */

--dur-1:120ms; /* @kind other */
--dur-2:240ms; /* @kind other */
--dur-3:420ms; /* @kind other */
--dur-4:720ms; /* @kind other */
--dur-5:1200ms; /* @kind other */

--stagger:42ms; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
:root{
--dur-1:1ms; /* @kind other */
--dur-2:1ms; /* @kind other */
--dur-3:1ms; /* @kind other */
--dur-4:1ms; /* @kind other */
--dur-5:1ms; /* @kind other */
--stagger:0ms; /* @kind other */
}
}

/* ===== tokens/effects.css ===== */
:root{
/* Corners are square. Radius exists only for the pill control and the probe dot. */
--r-0:0px;
--r-1:2px;
--r-pill:100px;

--hair:1px; /* @kind other */
--rule-hair:1px solid var(--border-hair); /* @kind other */
--rule-mid:1px solid var(--border-mid); /* @kind other */

/* Dark pages do not cast shadows, they emit. */
--glow-laser:0 0 0 1px rgba(0,255,156,.32),0 0 28px rgba(0,255,156,.22);
--glow-laser-soft:0 0 40px rgba(0,255,156,.14);
--lift:0 24px 60px -20px rgba(0,0,0,.8);

--vignette:radial-gradient(120% 90% at 50% 20%,transparent 40%,rgba(5,7,6,.85) 100%); /* @kind other */
--grain-opacity:.05; /* @kind other */
--scan-opacity:.055; /* @kind other */

--blur-panel:14px; /* @kind other */
--panel-tint:rgba(232,228,220,.035);
}

/* ===== tokens/base.css ===== */
/* Minimal element defaults. Everything else is opt-in via tokens. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-base);color:var(--text-body);font-family:var(--font-core);font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--fw-core);letter-spacing:var(--tr-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;color:var(--text-primary);font-weight:var(--fw-core)}
p{margin:0;text-wrap:pretty}
a{color:var(--text-primary);text-decoration:none;text-underline-offset:.28em;text-decoration-thickness:1px;transition:color var(--dur-2) var(--ease-core)}
a:hover{color:var(--laser-500)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:1px solid var(--focus-ring);outline-offset:3px}
::selection{background:var(--laser-500);color:var(--ink-100)}
.kx-mono{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:var(--tr-caps);text-transform:uppercase;font-variant-numeric:tabular-nums}
.kx-display{font-family:var(--font-display);line-height:var(--lh-display);letter-spacing:var(--tr-display)}