/* HOOLUA design tokens v1.0 */
:root {
  /* surfaces */
  --hl-night:        #070B14;   /* page background   */
  --hl-surface:      #0E1524;   /* cards, panels     */
  --hl-line:         #1C2638;   /* borders           */
  /* text */
  --hl-cloud:        #F2F4F7;   /* headings, logo    */
  --hl-slate:        #94A0B4;   /* body              */
  --hl-slate-dim:    #5B677A;   /* captions          */
  /* accents */
  --hl-gold:         #C9A45C;   /* Capital/master    */
  --hl-gold-light:   #E3C88E;
  --hl-cyan:         #00E5FF;   /* Labs start        */
  --hl-violet:       #7B5CFF;   /* Labs end          */
  --hl-labs-gradient:
      linear-gradient(90deg, #00E5FF 0%, #1FB8FF 45%, #7B5CFF 100%);
  --hl-labs-glow:    0 0 24px rgba(0,229,255,.35);
  /* type */
  --hl-font-display: 'Saira', 'Eurostile', 'Michroma', system-ui, sans-serif;
  --hl-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hl-font-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --hl-radius-card:  12px;
  --hl-radius-pill:  999px;
}

body { background: var(--hl-night); color: var(--hl-slate);
       font: 400 16px/1.6 var(--hl-font-body); }
h1, h2, .display { font-family: var(--hl-font-display);
       font-stretch: 125%; font-weight: 800;
       text-transform: uppercase; color: var(--hl-cloud);
       letter-spacing: .02em; line-height: 1.1; }
.eyebrow { font: 500 12px var(--hl-font-mono);
       letter-spacing: .14em; text-transform: uppercase;
       color: var(--hl-gold); }
.btn { border-radius: var(--hl-radius-pill);
       padding: 12px 22px; font-weight: 600; }
.btn-capital { background: var(--hl-gold); color: var(--hl-night); }
.btn-capital:hover { background: var(--hl-gold-light); }
.btn-labs { background: var(--hl-labs-gradient);
       color: var(--hl-night); }
.btn-labs:hover { box-shadow: var(--hl-labs-glow); }
.btn-ghost { border: 1px solid rgb(242 244 247 / .24);
       color: var(--hl-cloud); background: transparent; }
.card { background: var(--hl-surface);
       border: 1px solid var(--hl-line);
       border-radius: var(--hl-radius-card); }
[data-brand="labs"] .eyebrow { color: var(--hl-cyan); }
:focus-visible { outline: 2px solid var(--hl-cyan);
       outline-offset: 2px; }