/* 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;
  --hl-violet:       #7B5CFF;
  /* 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-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); }
:focus-visible { outline: 2px solid var(--hl-cyan);
       outline-offset: 2px; }