/* ==========================================================================
   jasoncjs.com Design System
   ========================================================================== */

:root {
  /* Colors */
  --color-text-primary: #18181b;
  --color-text-secondary: #3f3f46;
  --color-text-muted: #a2a2a9;
  --color-link: #0073ff;
  --color-background: #ffffff;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-weight: 500;
  --letter-spacing: -0.02em;
  --line-height: 1.4;

  /* Font sizes */
  --font-size-desktop: 16px;
  --font-size-mobile: 14px;

  /* Spacing */
  --padding-desktop: 72px;
  --padding-mobile-x: 24px;
  --padding-mobile-y: 64px;
  --max-width: 450px;
  --section-gap: 32px;
  --item-gap: 8px;
  --item-gap-small: 6px;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

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

html {
  font-size: var(--font-size-desktop);
}

body {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  letter-spacing: var(--letter-spacing);
  line-height: var(--line-height);
  color: var(--color-text-primary);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-link);
  text-decoration: underline;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-desktop);
  min-height: 100vh;
}

.content {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  width: 100%;
  max-width: var(--max-width);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-header {
  display: flex;
  flex-direction: column;
}

.name {
  color: var(--color-text-primary);
}

.location {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.5;
}

.location-text {
  color: var(--color-text-primary);
}

.location-arrow {
  color: var(--color-text-primary);
}

.location-time {
  color: var(--color-text-secondary);
}

.bio {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.bio p {
  color: var(--color-text-primary);
}

/* ==========================================================================
   Sections (Contact, Projects, Work)
   ========================================================================== */

.section {
  display: flex;
  flex-direction: column;
  gap: var(--item-gap);
}

.section-title {
  color: var(--color-text-primary);
}

.section-list {
  display: flex;
  flex-direction: column;
  gap: var(--item-gap-small);
}

/* ==========================================================================
   Numbered List Items
   ========================================================================== */

.list-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list-number {
  display: flex;
  width: 19px;
  color: var(--color-text-muted);
}

.list-number span {
  width: 50%;
  text-align: center;
}

.list-link {
  color: var(--color-link);
  text-decoration: underline;
}

/* ==========================================================================
   Mobile Styles
   ========================================================================== */

@media (max-width: 768px) {
  html {
    font-size: var(--font-size-mobile);
  }

  .container {
    padding: var(--padding-mobile-y) var(--padding-mobile-x);
  }

  .hero {
    gap: 16px;
  }

  .section-list {
    gap: 4px;
  }

  .list-number {
    width: 17px;
  }
}