/*
 * homepage.css
 * Plain-CSS replacement for the Tailwind CDN dependency on index.html.
 * Mirrors every utility class currently used on that page via semantic
 * class selectors. Not yet linked — added inert so the next commit can
 * verify the markup switch safely.
 *
 * Organisation:
 *   1. Color tokens (CSS custom properties)
 *   2. Base / page defaults
 *   3. Layout helpers
 *   4. Site header & navigation
 *   5. Hero section
 *   6. Main content & sections
 *   7. Tool cards (project grid)
 *   8. Skills section
 *   9. Site footer
 *  10. Responsive overrides (sm → md → lg)
 */

/* ============================================================
   1. COLOR TOKENS
   Tailwind v3 default palette — exact hex values.
   ============================================================ */
:root {
  /* gray */
  --gray-50:  #f9fafb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* white */
  --white: #ffffff;

  /* blue */
  --blue-100: #dbeafe;
  --blue-400: #60a5fa;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;

  /* purple */
  --purple-100: #f3e8ff;
  --purple-400: #c084fc;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;

  /* teal */
  --teal-100: #ccfbf1;
  --teal-600: #0d9488;
  --teal-700: #0f766e;

  /* green */
  --green-100: #dcfce7;
  --green-400: #4ade80;
  --green-600: #16a34a;
  --green-700: #15803d;

  /* orange */
  --orange-100: #ffedd5;
  --orange-600: #ea580c;
  --orange-700: #c2410c;

  /* emerald */
  --emerald-100: #d1fae5;
  --emerald-600: #059669;
  --emerald-700: #047857;

  /* yellow */
  --yellow-600: #ca8a04;

  /* gray-800 alias used for border */
  --gray-800-border: #1f2937;
}

/* ============================================================
   2. BASE / PAGE DEFAULTS
   Preflight-equivalent normalization — previously supplied by
   Tailwind's CDN Preflight while loaded; needed explicitly now.
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.5;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: inherit;
}

h1, h2, h3, h4, h5, h6,
p,
blockquote, dl, dd, figure, pre {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

ol, ul, menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: inherit;
}

svg {
  display: block;
  vertical-align: middle;
}

.page-body {
  background-color: var(--gray-50);
}

/* ============================================================
   3. LAYOUT HELPERS
   Replaces: max-w-7xl mx-auto px-4 sm:px-6 lg:px-8
   ============================================================ */
.container {
  max-width: 80rem; /* 1280px — Tailwind max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;   /* px-4 */
  padding-right: 1rem;
}

/* ============================================================
   4. SITE HEADER & NAVIGATION
   ============================================================ */
.site-header {
  background-color: var(--white);
  /* shadow-sm */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.site-header .container {
  /* nothing extra needed; .container already handles padding */
}

.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;    /* py-6 */
  padding-bottom: 1.5rem;
}

.site-header__brand {
  display: flex;
  align-items: center;
}

.site-title {
  font-size: 1.5rem;       /* text-2xl */
  line-height: 2rem;       /* text-2xl default line-height */
  font-weight: 700;        /* font-bold */
  color: var(--gray-900);
}

/* Navigation hidden by default on mobile; shown at md via media query */
.site-nav {
  display: none;
  gap: 2rem;               /* space-x-8 */
}

.nav-link {
  color: var(--gray-500);
  text-decoration: none;
  transition: color 150ms ease;
}

.nav-link:hover {
  color: var(--gray-900);
}

/* ============================================================
   5. HERO SECTION
   ============================================================ */
.hero {
  /* bg-gradient-to-r from-blue-600 to-purple-700 */
  background: linear-gradient(to right, var(--blue-600), var(--purple-700));
  color: var(--white);
}

.hero .container {
  padding-top: 6rem;      /* py-24 */
  padding-bottom: 6rem;
}

.hero__inner {
  text-align: center;
}

.hero-title {
  font-size: 2.25rem;     /* text-4xl */
  line-height: 2.5rem;    /* text-4xl default line-height */
  font-weight: 700;
  margin-bottom: 1.5rem;  /* mb-6 */
}

.hero-subtitle {
  font-size: 1.25rem;     /* text-xl */
  line-height: 1.75rem;   /* text-xl default line-height */
  margin-bottom: 2rem;    /* mb-8 */
  color: var(--blue-100);
}

.hero-description {
  font-size: 1.125rem;    /* text-lg */
  line-height: 1.75rem;   /* text-lg default line-height */
  margin-bottom: 3rem;    /* mb-12 */
  color: var(--blue-100);
  max-width: 48rem;       /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   6. MAIN CONTENT & SECTIONS
   ============================================================ */
.main-content {
  /* max-w-7xl handled by .container; just add vertical padding */
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 4rem;      /* py-16 */
  padding-bottom: 4rem;
}

/* About */
.section-about {
  margin-bottom: 5rem;    /* mb-20 */
}

.section-about__inner {
  text-align: center;
  margin-bottom: 3rem;    /* mb-12 */
}

.section-heading {
  font-size: 1.875rem;    /* text-3xl */
  line-height: 2.25rem;   /* text-3xl default line-height */
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 1rem;    /* mb-4 */
}

.section-lead {
  font-size: 1.125rem;    /* text-lg */
  line-height: 1.75rem;   /* text-lg default line-height */
  color: var(--gray-600);
  max-width: 48rem;       /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}

/* Projects section header */
.projects {
  /* no extra styles needed — inherits from main-content flow */
}

.projects__header {
  text-align: center;
  margin-bottom: 3rem;    /* mb-12 */
}

.projects__subheading {
  font-size: 1.125rem;    /* text-lg */
  line-height: 1.75rem;   /* text-lg default line-height */
  color: var(--gray-600);
}

/* ============================================================
   7. TOOL CARDS (projects grid)
   ============================================================ */
.projects-grid {
  display: grid;
  gap: 2rem;              /* gap-8 */
  /* mobile: 1 column (default) */
  grid-template-columns: 1fr;
}

.tool-card {
  background-color: var(--white);
  border-radius: 0.5rem;  /* rounded-lg */
  /* shadow-md */
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  overflow: hidden;
  transition: box-shadow 300ms ease; /* transition-shadow duration-300 */
}

.tool-card:hover {
  /* shadow-lg */
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.tool-card__body {
  padding: 1.5rem;        /* p-6 */
}

/* Icon box */
.tool-card__icon-box {
  width: 3rem;            /* w-12 */
  height: 3rem;           /* h-12 */
  border-radius: 0.5rem;  /* rounded-lg */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;    /* mb-4 */
}

.tool-card__icon {
  width: 1.5rem;          /* w-6 */
  height: 1.5rem;         /* h-6 */
}

/* Color variants — icon box background */
.tool-card--blue   .tool-card__icon-box { background-color: var(--blue-100); }
.tool-card--purple .tool-card__icon-box { background-color: var(--purple-100); }
.tool-card--teal   .tool-card__icon-box { background-color: var(--teal-100); }
.tool-card--green  .tool-card__icon-box { background-color: var(--green-100); }
.tool-card--orange .tool-card__icon-box { background-color: var(--orange-100); }
.tool-card--emerald .tool-card__icon-box { background-color: var(--emerald-100); }

/* Color variants — icon color */
.tool-card--blue   .tool-card__icon { color: var(--blue-600); }
.tool-card--purple .tool-card__icon { color: var(--purple-600); }
.tool-card--teal   .tool-card__icon { color: var(--teal-600); }
.tool-card--green  .tool-card__icon { color: var(--green-600); }
.tool-card--orange .tool-card__icon { color: var(--orange-600); }
.tool-card--emerald .tool-card__icon { color: var(--emerald-600); }

.tool-card__title {
  font-size: 1.25rem;     /* text-xl */
  line-height: 1.75rem;   /* text-xl default line-height */
  font-weight: 600;       /* font-semibold */
  color: var(--gray-900);
  margin-bottom: 0.5rem;  /* mb-2 */
}

.tool-card__copy {
  color: var(--gray-600);
  margin-bottom: 1rem;    /* mb-4 */
}

/* CTA button — base */
.tool-card__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;   /* px-4 py-2 */
  color: var(--white);
  border-radius: 0.5rem;  /* rounded-lg */
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 200ms ease; /* transition-colors duration-200 */
}

/* CTA color variants */
.tool-card--blue   .tool-card__cta { background-color: var(--blue-600); }
.tool-card--blue   .tool-card__cta:hover { background-color: var(--blue-700); }

.tool-card--purple .tool-card__cta { background-color: var(--purple-600); }
.tool-card--purple .tool-card__cta:hover { background-color: var(--purple-700); }

.tool-card--teal   .tool-card__cta { background-color: var(--teal-600); }
.tool-card--teal   .tool-card__cta:hover { background-color: var(--teal-700); }

.tool-card--green  .tool-card__cta { background-color: var(--green-600); }
.tool-card--green  .tool-card__cta:hover { background-color: var(--green-700); }

.tool-card--orange .tool-card__cta { background-color: var(--orange-600); }
.tool-card--orange .tool-card__cta:hover { background-color: var(--orange-700); }

.tool-card--emerald .tool-card__cta { background-color: var(--emerald-600); }
.tool-card--emerald .tool-card__cta:hover { background-color: var(--emerald-700); }

.tool-card__cta-arrow {
  width: 1rem;            /* w-4 */
  height: 1rem;           /* h-4 */
  margin-left: 0.5rem;    /* ml-2 */
}

/* ============================================================
   8. SKILLS SECTION
   ============================================================ */
.skills {
  margin-top: 5rem;       /* mt-20 */
  background-color: var(--gray-900);
  color: var(--white);
  border-radius: 0.5rem;  /* rounded-lg */
  padding: 2rem;          /* p-8 */
}

.skills__header {
  text-align: center;
  margin-bottom: 2rem;    /* mb-8 */
}

.skills__heading {
  font-size: 1.875rem;    /* text-3xl */
  line-height: 2.25rem;   /* text-3xl default line-height */
  font-weight: 700;
  margin-bottom: 1rem;    /* mb-4 */
  color: var(--white);
}

.skills__subheading {
  color: var(--gray-300);
}

.skills-grid {
  display: grid;
  gap: 1.5rem;            /* gap-6 */
  grid-template-columns: 1fr;
}

.skill {
  text-align: center;
}

.skill-badge {
  width: 4rem;            /* w-16 */
  height: 4rem;           /* h-16 */
  border-radius: 9999px;  /* rounded-full */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;    /* mb-4 */
}

.skill-badge__label {
  font-size: 1.5rem;      /* text-2xl */
  line-height: 2rem;      /* text-2xl default line-height */
  font-weight: 700;
}

/* Color variants */
.skill-badge--blue   { background-color: var(--blue-600); }
.skill-badge--green  { background-color: var(--green-600); }
.skill-badge--purple { background-color: var(--purple-600); }
.skill-badge--yellow { background-color: var(--yellow-600); }

.skill-label {
  font-weight: 600;       /* font-semibold */
  margin-bottom: 0.5rem;  /* mb-2 */
  color: var(--white);
}

.skill-detail {
  font-size: 0.875rem;    /* text-sm */
  line-height: 1.25rem;   /* text-sm default line-height */
  color: var(--gray-300);
}

/* ============================================================
   9. SITE FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--gray-900);
  color: var(--white);
  padding-top: 3rem;      /* py-12 */
  padding-bottom: 3rem;
}

.footer-grid {
  display: grid;
  gap: 2rem;              /* gap-8 */
  grid-template-columns: 1fr;
}

.footer-heading {
  font-size: 1.125rem;    /* text-lg */
  line-height: 1.75rem;   /* text-lg default line-height */
  font-weight: 600;
  margin-bottom: 1rem;    /* mb-4 */
  color: var(--white);
}

.footer-copy {
  color: var(--gray-300);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  /* space-y-2 */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--gray-300);
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  transition: color 150ms ease;
}

.footer-links a:hover {
  color: var(--white);
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;           /* space-y-3 */
  color: var(--gray-300);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;           /* space-x-3 */
}

.contact-icon {
  width: 1.25rem;         /* w-5 */
  height: 1.25rem;        /* h-5 */
  flex-shrink: 0;
}

.contact-icon--email  { color: var(--blue-400); }
.contact-icon--phone  { color: var(--green-400); }
.contact-icon--location { color: var(--purple-400); }

.footer-contact a {
  color: inherit;
  text-decoration: none;
  transition: color 150ms ease;
}

.footer-contact a:hover {
  color: var(--white);
}

.footer-legal {
  border-top: 1px solid var(--gray-800-border);
  margin-top: 2rem;       /* mt-8 */
  padding-top: 2rem;      /* pt-8 */
  text-align: center;
  color: var(--gray-400);
}

/* ============================================================
   10. RESPONSIVE OVERRIDES
   ============================================================ */

/* sm — 640px */
@media (min-width: 640px) {
  .container,
  .main-content,
  .site-footer .container {
    padding-left: 1.5rem;  /* sm:px-6 */
    padding-right: 1.5rem;
  }
}

/* md — 768px */
@media (min-width: 768px) {
  /* Show nav */
  .site-nav {
    display: flex;
  }

  /* Hero title grows */
  .hero-title {
    font-size: 3.75rem;   /* md:text-6xl */
    line-height: 1;       /* text-6xl default line-height */
  }

  /* Hero subtitle grows */
  .hero-subtitle {
    font-size: 1.5rem;    /* md:text-2xl */
    line-height: 2rem;    /* text-2xl default line-height */
  }

  /* Projects grid: 2 columns */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Skills grid: 2 columns */
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer grid: 3 columns */
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* lg — 1024px */
@media (min-width: 1024px) {
  .container,
  .main-content,
  .site-footer .container {
    padding-left: 2rem;   /* lg:px-8 */
    padding-right: 2rem;
  }

  /* Projects grid: 3 columns */
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Skills grid: 4 columns */
  .skills-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}