:root {

  /*  Background  */
  --bg:              #101114;
  --bg-raised:       #141518;
  --surface:         #1a1b1f;
  --surface-hover:   #212229;
  --surface-active:  #282a33;
 
  /*  Border  */
  --border:          #2c2d34;
  --border-strong:   #3d3f48;
  --border-subtle:   #232429;
 
  /*  Foreground / text  */
  --fg:              #e4e5e9;
  --fg-secondary:    #a0a3ad;
  --muted:           #5f6270;
  --faint:           #43454f;
 
  /*  Accent  */
  --accent:          #8a9dff;
  --accent-hover:    #9dacff;
  --accent-strong:   #7088ff;
  --accent-bg:       rgba(138, 157, 255, 0.08);
  --accent-bg-hover: rgba(138, 157, 255, 0.14);
 
  /*  Semantic  */
  --success:         #5ec98f;
  --success-bg:      rgba(94, 201, 143, 0.08);
  --warning:         #e0a855;
  --warning-bg:      rgba(224, 168, 85, 0.08);
  --error:           #e06565;
  --error-bg:        rgba(224, 101, 101, 0.08);
  --info:            #60a5d6;
  --info-bg:         rgba(96, 165, 214, 0.08);
 
  /*  Overlay / depth  */
  --overlay:         rgba(0, 0, 0, 0.55);
  --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md:       0 4px 16px rgba(0, 0, 0, 0.30);
  --shadow-lg:       0 8px 32px rgba(0, 0, 0, 0.35);
 
  /*  Radii  */
  --radius-sm:       4px;
  --radius-md:       6px;
  --radius-lg:       10px;
  --radius-xl:       16px;
 
  /*  Spacing  */
  --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;
 
  /*  Typography  */
  --text-xs:         11px;
  --text-sm:         13px;
  --text-base:       15px;
  --text-lg:         18px;
  --text-xl:         22px;
  --text-2xl:        28px;
  --text-3xl:        36px;
  --text-4xl:        42px;
  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
 
  /*  Transitions  */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(110, 231, 183, 0.25);
  color: var(--fg);
}

@media (max-width: 640px) {
  h1 {
    font-size: 32px !important;
  }
}