/* ============================================================================
   BASE STYLES
   Brand tokens, fonts, body background, scrollbar.
   Edit color values here to retheme the whole site.
   ============================================================================ */

:root {
  --base:       #05070D;
  --surface:    #0B1020;
  --surface-2: #121A2E;
  --hairline:   #1E2A45;
  --ink:        #E7ECF5;
  --muted:      #8A96B2;
  --accent:     #4F8FFF;
  --accent-2:   #7A5CFF;
}

html, body {
  background: var(--base);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Inter", system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

/* Subtle global background — gives the page depth */
body {
  background-image:
    radial-gradient(1200px circle at 10% -10%, rgba(79,143,255,.08), transparent 50%),
    radial-gradient(900px circle at 110% 30%, rgba(122,92,255,.06), transparent 50%);
  background-attachment: fixed;
}

::selection {
  background: rgba(79,143,255,.35);
  color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1E2A45; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #2A3A5E; }

/* Utility container padding */
.container-px { padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px)  { .container-px { padding-left: 2rem;   padding-right: 2rem; } }
@media (min-width: 1024px) { .container-px { padding-left: 3rem;   padding-right: 3rem; } }

/* Faint grid background — used in hero and project placeholders */
.grid-faint {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* Glassmorphism surface */
.glass {
  background: linear-gradient(180deg, rgba(18,26,46,.7), rgba(11,16,32,.7));
  border: 1px solid var(--hairline);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Gradient text — used on headlines */
.text-gradient {
  background: linear-gradient(90deg, #E7ECF5 0%, #4F8FFF 60%, #7A5CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hide scrollbar utility */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }