@import "./fonts.css";
@import "./normalise.css";

:root {
  /* colors - tw zinc */
  --c-100: #f4f4f5;
  --c-200: #e4e4e7;
  --c-300: #d4d4d8;
  --c-400: #a1a1aa;
  --c-500: #71717a;
  --c-600: #52525b;
  --c-700: #3f3f46;
  --c-800: #27272a;
  --c-900: #18181b;
  --c-accent: #7570b3;

  --dark: var(--c-900);
  --light: var(--c-100);

  /* spacing */
  --spacing-0: 0; /* 0px */
  --spacing-0-5: 0.25rem; /* 4px */
  --spacing-1: 0.5rem; /* 8px */
  --spacing-2: 1rem; /* 16px */
  --spacing-3: 1.5rem; /* 24px */
  --spacing-4: 2rem; /* 32px */
  --spacing-5: 2.5rem; /* 40px */
  --spacing-6: 3rem; /* 48px */
  --spacing-7: 3.5rem; /* 56px */
  --spacing-8: 4rem; /* 64px */
  --spacing-9: 4.5rem; /* 72px */
  --spacing-10: 5rem; /* 96px */

  /* viewports */
  --media-sm: 640px;
  --media-md: 768px;
  --media-lg: 1024px;

  /* typography */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-1: 1rem; /* 16px */
  --font-size-2: 1.25rem; /* 20px */
  --font-size-3: 1.5rem; /* 24px */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* colors */
    --mono1: var(--c-100);
    --mono2: var(--c-200);
    --mono3: var(--c-300);
    --mono4: var(--c-400);
    --mono5: var(--c-500);
    --mono6: var(--c-600);
    --mono7: var(--c-700);
    --mono8: var(--c-800);

    --bg-color: var(--dark);
    --color: var(--light);

    --link-color: var(--mono2);
    --link-hover-color: var(--light);
    --link-decoration-color: var(--c-accent);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    /** colors */
    --mono1: var(--c-800);
    --mono2: var(--c-700);
    --mono3: var(--c-600);
    --mono4: var(--c-500);
    --mono5: var(--c-400);
    --mono6: var(--c-300);
    --mono7: var(--c-200);
    --mono8: var(--c-100);

    --bg-color: var(--light);
    --color: var(--dark);

    --link-color: var(--mono2);
    --link-hover-color: var(--light);
    --link-decoration-color: var(--c-accent);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

::-moz-selection {
  background-color: var(--c-accent);
  color: var(--c-100);
}

::selection {
  background-color: var(--c-accent);
  color: var(--c-100);
}

html {
  scroll-behavior: smooth;
}

body {
  font-size: 1rem;
  font-family: "Geist", system-ui, sans-serif;
  line-height: 1.5;
  background-color: var(--bg-color);
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
  color: var(--color);
}

a {
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--link-decoration-color);
  text-underline-position: under;
  text-underline-offset: -2px;
  transition: background-color 0.3s ease;
}

a:visited {
  color: var(--link-color);
}

a:hover {
  background-color: var(--c-accent);
  color: var(--link-hover-color);
}

.navbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  position: sticky;
  top: 0;
  background-color: var(--bg-color);
}

.navbar__title {
  font-family: "GeistMono", monospace;
}

.navbar__links {
  list-style-type: none;
  display: flex;
  gap: var(--spacing-4);
  margin: 0;
}

.header {
  min-height: 100svh;
  padding: var(--spacing-4);
}

.header__title {
  font-size: clamp(40px, 5vw, 56px);
  margin: 0;
  margin-top: var(--spacing-10);
  color: var(--c-accent);
}

.header__subtitle {
  margin: 0;
  max-width: 400px;
}

.header__subtitle:not(:first-of-type) {
  margin-top: var(--spacing-1);
}

.header__links {
  margin-top: var(--spacing-6);
}

.header__links-link {
  display: block;
  margin-top: var(--spacing-2);
  width: fit-content;
}

section {
  min-height: 100svh;
  padding: var(--spacing-4);
  scroll-margin-top: 50px;

  h2 {
    font-size: clamp(32px, 5vw, 48px);
    margin: 0;
    border-bottom: 1px solid var(--mono5);
    padding-bottom: 0.125em;
    color: var(--c-accent);
  }
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4);
}

.footer__links {
  margin: 0;
  list-style-type: none;
  display: flex;
  gap: 0 var(--spacing-2);
}

.work__list {
  list-style-type: none;
}

.work__list-item__link {
  display: block;
  font-size: 1em;
  font-weight: 700;
  width: fit-content;
}

.work__list-item {
  margin: var(--spacing-4) 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: auto;
}

.work__list-item__date {
  color: var(--mono3);
  grid-column: 1 / -1;
  font-size: var(--font-size-xs);
  margin-bottom: var(--spacing-0-5);
  text-transform: uppercase;
  letter-spacing: 0.1em;

  @media screen and (min-width: 640px) {
    grid-column: 1 / 4;
    margin: 0;
  }
}

.work__list-item__container {
  grid-column: 1 / -1;

  @media screen and (min-width: 640px) {
    grid-column: 4 / -1;
  }
}

.work__list-item__title {
  color: var(--mono2);
  font-size: 1em;
  margin: 0;
}

.work__list-item__role {
  color: var(--mono3);
  font-size: var(--font-size-sm);
}

.work__list-item__description {
  font-size: var(--font-size-sm);
}

.work__list-item__skills {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-1);
}

.work__list-item__skills-item {
  padding: var(--spacing-0-5) var(--spacing-1);
  border-radius: 999px;
  font-size: var(--font-size-xs);
  background-color: var(--mono8);
  border: 1px solid var(--mono5);
}