/* Helius website
   Tokens mirror brand/tokens.json, which mirrors src/theme.rs in the app.
   Change a colour there first, then here. */

@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;

  /* colour */
  --background:#000000;
  --panel:#111111;
  --primary:#ffb000;
  --header:#ff7a00;
  --on-header:#000000;
  --muted:#8a8a8a;
  --info:#5fd7ff;
  --positive:#00d26a;
  --negative:#ff5c5c;
  --warning:#ffd24d;
  --border:var(--primary);
  --border-active:var(--header);

  /* type */
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* space, line, radius */
  --space-1:4px;
  --space-2:8px;
  --space-4:16px;
  --space-6:24px;
  --space-7:28px;
  --space-10:40px;
  --space-12:48px;
  --space-18:72px;
  --line:1px;
  --radius-0:0px;

  /* page */
  --gutter:clamp(20px,7vw,104px);
  --column:760px;
}

/* ---------- base ---------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--background);
  color:var(--primary);
  font-family:var(--font-mono);
  font-size:16px;
  line-height:1.65;
  font-variant-ligatures:none;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
::selection{background:var(--header);color:var(--on-header)}
:focus-visible{outline:2px solid var(--info);outline-offset:3px}

/* ---------- page layout ---------- */

.wrap{padding:var(--space-10) var(--gutter) var(--space-18)}
.logo{display:block;height:36px;width:auto}
main{max-width:var(--column);margin-top:var(--space-12);display:flex;flex-direction:column;gap:var(--space-7)}
.hero{margin:0 0 12px;font-size:26px;line-height:1.35;font-weight:600;letter-spacing:-0.01em;color:var(--header)}
.cta{margin:12px 0 0}

/* ---------- components (see brand/guidelines.md) ---------- */

/* Panel */
.hl-panel{position:relative;border:var(--line) solid var(--border);border-radius:var(--radius-0);background:var(--panel);padding:26px clamp(var(--space-4),3vw,var(--space-6)) 22px;transition:border-color .15s ease}
.hl-panel:hover,.hl-panel:focus-within{border-color:var(--border-active)}
.hl-panel__title{position:absolute;top:-14px;left:15px;margin:0;padding:0 1ch;font-size:16px;line-height:1.65;font-weight:700;color:var(--header);background:linear-gradient(var(--background) 50%,var(--panel) 50%)}
.hl-panel p{margin:0}

/* Button */
.hl-button{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 2ch;border:0;border-radius:var(--radius-0);background:var(--header);color:var(--on-header);font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;transition:background-color .15s ease}
.hl-button:hover,.hl-button:focus-visible{background:var(--primary)}
.hl-button__chev{display:inline-block;transition:transform .15s ease}
.hl-button:hover .hl-button__chev{transform:translateX(3px)}

/* Link */
.hl-link{color:var(--info);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.hl-link:hover,.hl-link:focus-visible{background:var(--info);color:var(--on-header);text-decoration:none}

/* Status bar */
.hl-statusbar{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--space-7);background:var(--panel);padding:var(--space-1) var(--gutter)}
.hl-nav{display:flex;flex-wrap:wrap;gap:0 1ch;margin-left:-1ch;font-size:16px}
.hl-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 1ch;color:var(--primary);text-decoration:none}
.hl-nav a:hover,.hl-nav a:focus-visible{background:var(--header);color:var(--on-header);font-weight:700}
.hl-meta{display:inline-flex;align-items:center;min-height:44px;font-size:14px;line-height:1.5;color:var(--muted)}

/* Cursor */
.hl-cursor{display:inline-block;width:.55em;height:1.05em;margin-left:.25em;vertical-align:-.16em;background:var(--header);animation:hl-blink 1.1s steps(1,end) infinite}
@keyframes hl-blink{50%{opacity:0}}

/* ---------- small screens, reduced motion ---------- */

@media (max-width:640px){
  body{font-size:14.5px}
  .hero{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}