/* Unbound Labs — landing page v1 stylesheet
   Generated from the Unbound Labs design system (tokens + base).
   Everything below is design-system truth: do not hand-edit values, change them in the system. */

/* ── tokens/fonts.css ── */
/* Unbound Labs webfonts — Google Fonts CDN.
   SUBSTITUTION FLAG: no original brand font files were supplied. Space Grotesk was selected by the
   Unbound Labs team as the display/headline face (chosen against Chakra Petch, Saira,
   Rajdhani and Archivo). Supply licensed brand fonts and these rules get swapped. */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Chakra+Petch:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ── tokens/colors.css ── */
:root{
/* ── Brand ───────────────────────────────── */
--ul-ink:#0B0C0C;           /* logo black */
--ul-mint:#5FC7A6;          /* logo accent */
--ul-paper:#FFFFFF;

/* ── Mint scale ──────────────────────────── */
--mint-50:#EDF9F5;--mint-100:#D3F0E6;--mint-200:#B4E5D5;--mint-300:#93D8C2;
--mint-400:#77CEB3;--mint-500:#5FC7A6;--mint-600:#3EA98A;--mint-700:#2C8069;
--mint-800:#1E5A4A;--mint-900:#12352C;

/* ── Neutral scale (cool, slightly green-shifted) ── */
--neutral-0:#FFFFFF;--neutral-25:#FAFBFA;--neutral-50:#F4F6F5;--neutral-100:#EAEDEC;
--neutral-200:#DCE0DE;--neutral-300:#C2C8C6;--neutral-400:#9AA29F;--neutral-500:#767E7C;
--neutral-600:#565E5C;--neutral-700:#3A4241;--neutral-800:#242A29;--neutral-900:#141817;
--neutral-950:#0B0C0C;

/* ── Semantic status ─────────────────────── */
--status-success:#2C8069;--status-success-bg:#EDF9F5;
--status-warning:#B67A12;--status-warning-bg:#FBF3E3;
--status-danger:#C0402F;--status-danger-bg:#FBEEEC;
--status-info:#2E6E9E;--status-info-bg:#EDF4FA;

/* ── Semantic aliases: light surface ─────── */
--surface-page:var(--neutral-25);
--surface-card:var(--neutral-0);
--surface-sunken:var(--neutral-50);
--surface-inverse:var(--ul-ink);
--surface-accent:var(--mint-50);

--text-strong:var(--neutral-950);
--text-body:var(--neutral-700);
--text-muted:var(--neutral-500);
--text-inverse:var(--neutral-0);
--text-accent:var(--mint-700);
--text-link:var(--neutral-950);
--text-link-hover:var(--mint-700);

--border-subtle:var(--neutral-200);
--border-default:var(--neutral-300);
--border-strong:var(--neutral-950);
--border-accent:var(--mint-500);
--focus-ring:var(--mint-600);

/* ── Semantic aliases: inverse (dark) surface ── */
--on-inverse-text:var(--neutral-0);
--on-inverse-muted:#9AA29F;
--on-inverse-border:#2A2F2E;
--on-inverse-surface:#141817;
}
[data-theme="dark"]{
--surface-page:var(--ul-ink);
--surface-card:#141817;
--surface-sunken:#101312;
--surface-inverse:var(--neutral-0);
--surface-accent:#12352C;
--text-strong:var(--neutral-0);
--text-body:#C2C8C6;
--text-muted:#9AA29F;
--text-inverse:var(--ul-ink);
--text-accent:var(--mint-400);
--text-link:var(--neutral-0);
--text-link-hover:var(--mint-400);
--border-subtle:#222726;
--border-default:#2F3634;
--border-strong:var(--neutral-0);
--border-accent:var(--mint-500);
}

/* ── tokens/typography.css ── */
:root{
--font-display:"Space Grotesk","Chakra Petch",system-ui,sans-serif;
--font-body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
/* the logotype voice — squared techno, reserved for the wordmark and the signature line */
--font-wordmark:"Chakra Petch","Space Grotesk",system-ui,sans-serif;

--fs-display-1:clamp(48px,7vw,84px); /* @kind font */
--fs-display-2:clamp(38px,5vw,60px); /* @kind font */
--fs-h1:44px; /* @kind font */
--fs-h2:32px; /* @kind font */
--fs-h3:24px; /* @kind font */
--fs-h4:19px; /* @kind font */
--fs-body-lg:19px; /* @kind font */
--fs-body:16px; /* @kind font */
--fs-body-sm:14px; /* @kind font */
--fs-caption:13px; /* @kind font */
--fs-label:12px; /* @kind font */

--lh-tight:1.04; /* @kind other */
--lh-snug:1.18; /* @kind other */
--lh-heading:1.24; /* @kind other */
--lh-body:1.62; /* @kind other */
--lh-relaxed:1.75; /* @kind other */

--fw-regular:400; /* @kind other */
--fw-medium:500; /* @kind other */
--fw-semibold:600; /* @kind other */
--fw-bold:700; /* @kind other */

/* the wordmark voice: wide letterspaced uppercase */
--ls-wordmark:0.16em; /* @kind other */
--ls-label:0.14em; /* @kind other */
--ls-display:-0.015em; /* @kind other */
--ls-body:0; /* @kind other */

--text-eyebrow-size:var(--fs-label); /* @kind font */
--text-eyebrow-tracking:var(--ls-label); /* @kind other */
}

/* ── tokens/spacing.css ── */
:root{
--space-0:0;--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-page:24px;
--container-max:1200px;
--container-narrow:760px;
--section-y:var(--space-32);
--section-y-tight:var(--space-20);
}

/* ── tokens/shape.css ── */
:root{
/* the mark is built from hard mitred angles — radii stay small and deliberate */
--radius-none:0;--radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:10px;
--radius-pill:999px;
--radius-card:var(--radius-md);
--radius-control:var(--radius-sm);

--border-w:1px;--border-w-strong:2px;

--shadow-none:none;
--shadow-xs:0 1px 2px rgba(11,12,12,.05);
--shadow-sm:0 1px 3px rgba(11,12,12,.06),0 1px 2px rgba(11,12,12,.04);
--shadow-md:0 4px 14px rgba(11,12,12,.07);
--shadow-lg:0 18px 40px rgba(11,12,12,.10);
--shadow-inset-hairline:inset 0 0 0 1px var(--border-subtle);
--shadow-focus:0 0 0 3px rgba(95,199,166,.38);
}

/* ── tokens/motion.css ── */
:root{
--ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in:cubic-bezier(.5,0,.9,.2); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:180ms; /* @kind other */
--dur-slow:320ms; /* @kind other */
--dur-reveal:520ms; /* @kind other */
--transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard); /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
--dur-reveal:0ms; /* @kind other */
}}

/* ── tokens/base.css ── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--text-strong);letter-spacing:var(--ls-display);line-height:var(--lh-heading);margin:0 0 var(--space-4)}
h1{font-size:var(--fs-h1);font-weight:var(--fw-bold)}
h2{font-size:var(--fs-h2);font-weight:var(--fw-semibold)}
h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold)}
h4{font-size:var(--fs-h4);font-weight:var(--fw-semibold)}
p{margin:0 0 var(--space-4);text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--border-accent);transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--mint-700)}
::selection{background:var(--mint-200);color:var(--ul-ink)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.ul-eyebrow{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.ul-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter-page)}