/* Helios v2 design system tokens (local copy) */
:root{
/* Base neutrals — the system is monochrome; colour comes from imagery only */
--white:#FFFFFF;
--gray-50:#F7F7F7;
--gray-100:#F4F4F4;
--gray-150:#EFEFEF;
--gray-200:#E6E6E6;
--gray-300:#D4D4D4;
--gray-400:#A8A8A8;
--gray-500:#7A7A7A;
--gray-600:#5E5E5E;
--gray-700:#3A3A3A;
--gray-800:#2A2A2A;
--gray-850:#232323;
--gray-900:#1C1C1C;
--gray-950:#141414;
--black:#0B0B0B;

/* Imagery-derived accents (use sparingly — for data, focus, or tints only) */
--ember-500:#E2552B;
--ember-300:#F2A07A;
--dusk-500:#3E5466;
--meadow-500:#4E7A3A;

/* Semantic — light surfaces */
--surface-page:var(--white);
--surface-subtle:var(--gray-100);
--surface-card:var(--gray-100);
--surface-inverse:var(--gray-900);
--surface-inverse-card:var(--gray-850);
--surface-chip:var(--white);

--text-strong:var(--gray-900);
--text-body:var(--gray-900);
--text-muted:var(--gray-500);
--text-soft:var(--gray-400);
--text-inverse:var(--white);
--text-inverse-muted:#9A9A9A;

--border-hairline:var(--gray-200);
--border-strong:var(--gray-300);
--border-inverse:rgba(255,255,255,.12);

/* Buttons */
--btn-light-bg:var(--gray-100);
--btn-light-bg-hover:var(--gray-150);
--btn-light-fg:var(--gray-900);
--btn-dark-bg:var(--gray-900);
--btn-dark-bg-hover:var(--black);
--btn-dark-fg:var(--white);

/* Tags on dark cards */
--tag-dark-bg:#555555;
--tag-dark-fg:#DADADA;
--tag-light-bg:var(--gray-100);
--tag-light-fg:var(--gray-600);

--focus-ring:var(--gray-900);
--overlay-scrim:rgba(20,20,20,.45);
}

:root{
--font-sans:'Inter Tight',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;

/* Scale (desktop px, measured from 1x reference screens) */
--fs-wordmark:clamp(96px,14vw,240px); /* @kind font */
--fs-display:clamp(64px,8vw,120px); /* @kind font */
--fs-h1:clamp(40px,4vw,56px); /* @kind font */
--fs-h2:clamp(32px,3vw,44px); /* @kind font */
--fs-h3:24px; /* @kind font */
--fs-lead:20px; /* @kind font */
--fs-body:18px; /* @kind font */
--fs-small:16px; /* @kind font */
--fs-caption:14px; /* @kind font */

--lh-tight:0.95; /* @kind font */
--lh-heading:1.02; /* @kind font */
--lh-snug:1.15; /* @kind font */
--lh-body:1.25; /* @kind font */

--tracking-wordmark:-0.055em; /* @kind font */
--tracking-display:-0.045em; /* @kind font */
--tracking-heading:-0.035em; /* @kind font */
--tracking-body:-0.02em; /* @kind font */

/* Semantic */
--type-heading:var(--weight-semibold) var(--fs-h1)/var(--lh-heading) var(--font-sans); /* @kind font */
--type-body:var(--weight-semibold) var(--fs-body)/var(--lh-body) var(--font-sans); /* @kind font */
}

:root{
--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-30:120px;
--space-40:160px;
--space-60:240px;

--container-max:1400px;
--container-narrow:780px;
--gutter:52px;
--grid-gap:6px;
--section-pad:var(--space-40);
--nav-height:96px;

/* Radii */
--radius-xs:4px;
--radius-sm:6px;
--radius-md:8px;
--radius-lg:20px;
--radius-xl:32px;
--radius-pill:999px;

/* Elevation — the system is nearly flat */
--shadow-none:none;
--shadow-float:0 30px 60px -20px rgba(0,0,0,.35);
--shadow-card-dark:0 -20px 60px rgba(0,0,0,.4);

/* Motion */
--ease-out:cubic-bezier(.22,1,.36,1); /* @kind other */
--ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
--dur-fast:160ms; /* @kind other */
--dur-base:320ms; /* @kind other */
--dur-slow:800ms; /* @kind other */
--blur-reveal:12px; /* @kind other */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--tracking-body);color:var(--text-body);background:var(--surface-page)}
h1,h2,h3,h4,p{margin:0;text-wrap:pretty}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--text-muted)}