:root {

  /*  Background  */
  --bg:              #ffffff;
  --bg-raised:       #f8f8fa;
  --surface:         #f1f2f4;
  --surface-hover:   #e8e9ed;
  --surface-active:  #dfe0e5;

  /*  Border  */
  --border:          #d4d5db;
  --border-strong:   #b8bac2;
  --border-subtle:   #e4e5ea;

  /*  Foreground / text  */
  --fg:              #131419;
  --fg-secondary:    #4e5264;
  --muted:           #7e8290;
  --faint:           #b0b3bd;

  /*  Accent  */
  --accent:          #5468e0;
  --accent-hover:    #4758cc;
  --accent-strong:   #3d4cb8;
  --accent-bg:       rgba(84, 104, 224, 0.07);
  --accent-bg-hover: rgba(84, 104, 224, 0.13);

  /*  Semantic  */
  --success:         #1a8f54;
  --success-bg:      rgba(26, 143, 84, 0.07);
  --warning:         #b07818;
  --warning-bg:      rgba(176, 120, 24, 0.07);
  --error:           #c93c3c;
  --error-bg:        rgba(201, 60, 60, 0.07);
  --info:            #2e7db5;
  --info-bg:         rgba(46, 125, 181, 0.07);

  /*  Overlay / depth  */
  --overlay:         rgba(0, 0, 0, 0.2);
  --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:       0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:       0 8px 32px rgba(0, 0, 0, 0.10);

  /*  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;
}

[data-theme="dark"] {

  /*  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(249, 250, 255, 0.554);

  /*  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);
}

*,
*::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;
}

nav {
    font-size: 13px;
}

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

.footer {
    flex-direction: row;
    height: 28;
  }

.expand-on-hover-button {
  transition: all 0.2s ease;

  font-family: var(--mono);
  font-size: 15;
  color: var(--fg);
  border: 1px solid var(--border);
  background-color: var(--bg);
  height: 3em;
  display: block;
  align-content: center;
  align-items: center;
  text-align: center;
  width: 10em;
  border-radius: var(--radius-md);
}
.expand-on-hover-button:hover {
  scale: 1.05;
}


@media (max-width: 640px) {

  h1 {
    font-size: 32px !important;
  }

  .footer {
    flex-direction: column;
    height: 36;
  }

  nav {
    font-size: 16px;
  }

  .project-grid {
    scrollbar-width: 10px;
  }
  
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-1deg); }
  30% { transform: rotate(1deg); }
  45% { transform: rotate(-1deg); }
  60% { transform: rotate(1deg); }
  75% { transform: rotate(-1deg); }
}

.wiggle {
  animation: wiggle 0.4s ease-in-out infinite;
}


