/* ========================================
   HoHeTo Kyle — Design System Variables
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Instrument+Sans:wght@400;500;600&display=swap');

:root {
  --color-bg:           #0d1f1f;
  --color-bg-panel:     #0b1a1a;
  --color-surface:      rgba(255,255,255,0.05);
  --color-border:       rgba(255,255,255,0.15);
  --color-border-hover: rgba(8, 210, 193, 0.5);
  --color-primary:      #08D2C1;
  --color-primary-dark: #06b5a6;
  --color-primary-glow: rgba(8, 210, 193, 0.3);
  --color-text-heading: #FFFFFF;
  --color-text-body:    #F3F3F3;
  --color-text-muted:   rgba(255,255,255,0.45);
  --color-text-link:    #08D2C1;
  --font-display: 'Exo 2', sans-serif;
  --font-body:    'Instrument Sans', sans-serif;
  --radius-sm: 5px;
  --radius-md: 8px;
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text-body); }
a { color: var(--color-text-link); text-decoration: none; }
a:hover { opacity: 0.85; }
button { cursor: pointer; font-family: var(--font-body); border: none; outline: none; }
input { font-family: var(--font-body); outline: none; }