@import url(./style/content.css);
@import '@fortawesome/fontawesome-free/css/all.min.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 90%;
    --foreground: 20 14.3% 4.1%;

    --muted: 60 4.8% 95.9%;
    --muted-foreground: 25 5.3% 44.7%;

    --popover: 0 0% 100%;
    --popover-foreground: 20 14.3% 4.1%;

    --card: 0 0% 100%;
    --card-foreground: 20 14.3% 4.1%;

    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;

    --primary: 24 9.8% 10%;
    --primary-foreground: 60 9.1% 97.8%;

    --secondary: 60 4.8% 95.9%;
    --secondary-foreground: 24 9.8% 10%;

    --accent: 60 4.8% 95.9%;
    --accent-foreground: 24 9.8% 10%;

    --destructive: 0 72.2% 50.6%;
    --destructive-foreground: 60 9.1% 97.8%;

    --ring: 20 14.3% 4.1%;

    --radius: 0.5rem;

	 --name: theme('colors.java.800');
	 --navlink: theme('colors.eucalyptus.400');
  }

  .dark {
    --background: 20 14.3% 4.1%;
    --foreground: 230 9.1% 97.8%;

    --muted: 12 6.5% 15.1%;
    --muted-foreground: 24 5.4% 63.9%;

    --popover: 20 14.3% 4.1%;
    --popover-foreground: 60 9.1% 97.8%;

    --card: 20 14.3% 4.1%;
    --card-foreground: 60 9.1% 97.8%;

    --border: 12 6.5% 15.1%;
    --input: 12 6.5% 15.1%;

    --primary: 60 9.1% 97.8%;
    --primary-foreground: 24 9.8% 10%;

    --secondary: 12 6.5% 15.1%;
    --secondary-foreground: 60 9.1% 97.8%;

    --accent: 12 6.5% 15.1%;
    --accent-foreground: 60 9.1% 97.8%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 60 9.1% 97.8%;

    --ring: 24 5.7% 82.9%;
	 --name: theme('colors.java.300');
	 --navlink: theme('colors.eucalyptus.200');
  }
}

body {
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
html {
  scroll-behavior: smooth;
  /*overscroll-behavior: none;*/
}

.separator {
  color: rgb(170,170,170);
  border-color: rgb(170,170,170);
}
hr {
  @apply separator;
}

a, button {
	color: theme('colors.eucalyptus.400');
	&:hover,
	&:focus {
		color: theme('colors.java.500');
	}
}
.dark a:not(.disabled-link),button {
	text-shadow: 0 0 5px;
}
.nav-link, .nav-link * {
	color: var(--navlink);
	@apply text-lg;
	font-weight: 500;
	font-family: serif;
}
a.disabled-link {
	color: rgb(128,128,128);
	pointer-events: none;
}
a:not(.icon) {
	position: relative;
	text-decoration: inherit;

	&::after {
		content: "";
		display: block;
		width: 100%;
		position: absolute;
		height: 2px;
		bottom: 0;
		left: 0;
		background-color: theme('colors.java.500');
		transform: scaleX(0);
		transition: transform 0.3s ease;
	}

	&:hover,
	&:focus {
		&::after {
			content: "";
			position: absolute;
			transform: scaleX(1);
		}
	}
}
a.current-link {
	color: theme('colors.magenta.500');

	&::after {
		background-color: theme('colors.magenta.500');
	}
	&:hover,
	&:focus {
		color: theme('colors.magenta.500');
	}
}

html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  /* Optional, if you also want font styles */
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}