/* humbertoacosta.net — hand-crafted Tailwind subset
   Covers exactly the utility classes used by the 6 pages
   + custom theme (ink / muted / line / accent) + preflight */

/* -----------------------------------------------------------
   1. Preflight (minimal CSS reset, à la Tailwind base)
----------------------------------------------------------- */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e5e5;
}
::before, ::after { --tw-content: ''; }
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
body { margin: 0; line-height: inherit; }
hr { height: 0; color: inherit; border-top-width: 1px; }
abbr[title] { text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1em;
}
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button, select { text-transform: none; }
button, [type='button'], [type='reset'], [type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
}
:-moz-focusring { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }
progress { vertical-align: baseline; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
summary { display: list-item; }
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
fieldset { margin: 0; padding: 0; }
legend { padding: 0; }
ol, ul, menu { list-style: none; margin: 0; padding: 0; }
dialog { padding: 0; }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
button, [role="button"] { cursor: pointer; }
:disabled { cursor: default; }
img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}
img, video { max-width: 100%; height: auto; }

/* -----------------------------------------------------------
   2. Body defaults the page sets directly
----------------------------------------------------------- */
body {
  background-color: #ffffff;
  color: #0a0a0a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------------------------
   3. Layout & typography utilities
----------------------------------------------------------- */
.scroll-smooth { scroll-behavior: smooth; }

/* display */
.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

/* position */
.relative { position: relative; }

/* width / height */
.w-3\.5 { width: 0.875rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.h-3\.5 { height: 0.875rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }

/* max-width */
.max-w-xl  { max-width: 36rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }

/* margin */
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-6  { margin-top: 1.5rem; }
.mt-16 { margin-top: 4rem; }
.mt-20 { margin-top: 5rem; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-7  { margin-bottom: 1.75rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }

/* padding */
.p-7   { padding: 1.75rem; }
.px-5  { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6  { padding-left: 1.5rem;  padding-right: 1.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-5  { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-8  { padding-top: 2rem; padding-bottom: 2rem; }
.pt-5  { padding-top: 1.25rem; }
.pt-6  { padding-top: 1.5rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-16 { padding-top: 4rem; }
.pt-20 { padding-top: 5rem; }
.pb-6  { padding-bottom: 1.5rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-16 { padding-bottom: 4rem; }
.pl-5  { padding-left: 1.25rem; }

/* gap */
.gap-1\.5 { gap: 0.375rem; }
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-x-5 { column-gap: 1.25rem; }
.gap-y-2 { row-gap: 0.5rem; }

/* space-y (margin-top on siblings) */
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }

/* flex / grid alignment */
.flex-wrap { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }

/* borders */
.border   { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }
.border-line { border-color: #e5e5e5; }
.rounded-full { border-radius: 9999px; }
.rounded-xl   { border-radius: 0.75rem; }

/* backgrounds */
.bg-white { background-color: #ffffff; }
.bg-ink   { background-color: #0a0a0a; }

/* text colors */
.text-white         { color: #ffffff; }
.text-ink           { color: #0a0a0a; }
.text-muted         { color: #737373; }
.text-line          { color: #e5e5e5; }
.text-neutral-600   { color: #525252; }
.text-neutral-700   { color: #404040; }

/* font sizes (size / line-height) */
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-5xl  { font-size: 3rem;     line-height: 1; }

/* font weight */
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }

/* font family */
.font-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* tracking (letter-spacing) */
.tracking-tight   { letter-spacing: -0.025em; }
.tracking-tighter { letter-spacing: -0.03em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }

/* leading (line-height) */
.leading-relaxed     { line-height: 1.625; }
.leading-snug        { line-height: 1.375; }
.leading-\[1\.05\]   { line-height: 1.05; }

/* text utilities */
.uppercase { text-transform: uppercase; }
.italic    { font-style: italic; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* lists */
.list-disc { list-style-type: disc; }
.marker\:text-neutral-400 > ::marker,
.marker\:text-neutral-400::marker { color: #a3a3a3; }

/* grid template columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* transforms / transitions */
.transition-all       { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }

/* group helper (for `group-hover:` to target descendants) */
.group { /* marker class */ }

/* -----------------------------------------------------------
   4. Pseudo-class variants (hover / group-hover)
----------------------------------------------------------- */
.hover\:bg-accent:hover     { background-color: #1d4ed8; }
.hover\:border-ink:hover    { border-color: #0a0a0a; }
.hover\:text-accent:hover   { color: #1d4ed8; }
.hover\:text-ink:hover      { color: #0a0a0a; }
.hover\:-translate-y-0\.5:hover { transform: translateY(-0.125rem); }

.group:hover .group-hover\:text-ink     { color: #0a0a0a; }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }

/* -----------------------------------------------------------
   5. Responsive variants (sm: ≥ 640px)
----------------------------------------------------------- */
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:pt-20       { padding-top: 5rem; }
  .sm\:pt-24       { padding-top: 6rem; }
  .sm\:text-2xl    { font-size: 1.5rem; line-height: 2rem; }
  .sm\:text-6xl    { font-size: 3.75rem; line-height: 1; }
}

/* -----------------------------------------------------------
   6. Site-specific custom CSS originally inline in <style>
----------------------------------------------------------- */
html, body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
a, button {
  transition: color 150ms ease, border-color 150ms ease,
              background-color 150ms ease, transform 150ms ease;
}
.fade-in { animation: fadeUp 600ms ease-out both; }
.fade-in.delay-1 { animation-delay: 80ms; }
.fade-in.delay-2 { animation-delay: 160ms; }
.fade-in.delay-3 { animation-delay: 240ms; }
.fade-in.delay-4 { animation-delay: 320ms; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fade-in { animation: none; }
  html { scroll-behavior: auto; }
}

/* -----------------------------------------------------------
   7. Print-friendly styles for the resume pages
----------------------------------------------------------- */
@media print {
  header, footer, .no-print { display: none !important; }
  body { background: white; color: black; }
  main { max-width: 100% !important; padding: 0 !important; }
  section { page-break-inside: avoid; }
  a { color: black !important; text-decoration: none !important; }
}