app-sleepy-manatee-skip/app/globals.css

@import "./prism.css";

/* CSS Custom Properties for design system */
:root {
  /* Aceternity custom properties */
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --radius: 0.625rem;

  /* Primary brand colors */
  --color-primary: #020022;

  /* Neutral colors for Aceternity components */
  --color-neutral-50: rgb(250 250 250);
  --color-neutral-100: rgb(245 245 245);
  --color-neutral-200: rgb(229 229 229);
  --color-neutral-300: rgb(212 212 212);
  --color-neutral-400: rgb(163 163 163);
  --color-neutral-500: rgb(115 115 115);
  --color-neutral-600: rgb(82 82 82);
  --color-neutral-700: rgb(64 64 64);
  --color-neutral-800: rgb(38 38 38);
  --color-neutral-900: rgb(23 23 23);

  /* Muted colors using CSS variables */
  --color-muted: var(--color-neutral-600);
  --color-muted-dark: var(--color-neutral-300);

  /* shadcn/ui design system colors */
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(240 10% 3.9%);
  --color-card: hsl(0 0% 100%);
  --color-card-foreground: hsl(240 10% 3.9%);
  --color-popover: hsl(0 0% 100%);
  --color-popover-foreground: hsl(240 10% 3.9%);
  --color-primary-foreground: hsl(0 0% 98%);
  --color-secondary: hsl(240 4.8% 95.9%);
  --color-secondary-foreground: hsl(240 5.9% 10%);
  --color-accent: hsl(240 4.8% 95.9%);
  --color-accent-foreground: hsl(240 5.9% 10%);
  --color-destructive: hsl(0 84.2% 60.2%);
  --color-destructive-foreground: hsl(0 0% 98%);
  --color-border: hsl(240 5.9% 90%);
  --color-input: hsl(240 5.9% 90%);
  --color-ring: hsl(240 5.9% 10%);

  /* Custom animations for Aceternity */
  --animation-duration: 40s;
  --marquee-duration: 20s;

  /* Next.js gradient variables */
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

/* Base styles for elements - Light mode by default */
* {
  border-color: hsl(240 5.9% 90%);
}

body {
  background-color: hsl(0 0% 100%);
  color: hsl(240 10% 3.9%);
}

.dark {
  /* Dark mode CSS variables */
  --color-background: hsl(240 10% 3.9%);
  --color-foreground: hsl(0 0% 98%);
  --color-card: hsl(240 10% 3.9%);
  --color-card-foreground: hsl(0 0% 98%);
  --color-popover: hsl(240 10% 3.9%);
  --color-popover-foreground: hsl(0 0% 98%);
  --color-secondary: hsl(240 3.7% 15.9%);
  --color-secondary-foreground: hsl(0 0% 98%);
  --color-accent: hsl(240 3.7% 15.9%);
  --color-accent-foreground: hsl(0 0% 98%);
  --color-destructive: hsl(0 62.8% 30.6%);
  --color-destructive-foreground: hsl(0 0% 98%);
  --color-border: hsl(240 3.7% 15.9%);
  --color-input: hsl(240 3.7% 15.9%);
  --color-ring: hsl(240 4.9% 83.9%);

  /* Next.js gradient variables for dark mode */
  --foreground-rgb: 255, 255, 255;
  --background-start-rgb: 0, 0, 0;
  --background-end-rgb: 0, 0, 0;

  /* NO neutral color inversion! Use dark:bg-neutral-* classes instead */
}

/* Dark mode element styles - only applied when .dark class is present */
.dark * {
  border-color: hsl(240 3.7% 15.9%);
}

.dark body {
  background-color: hsl(240 10% 3.9%);
  color: hsl(0 0% 98%);
}

/* Custom utility classes compatible with Tailwind CDN */
.container {
  margin-inline: auto;
  padding-inline: 2rem;
}

.bg-gradient-radial {
  background-image: radial-gradient(var(--tw-gradient-stops));
}

.bg-gradient-conic {
  background-image: conic-gradient(
    from 180deg at 50% 50%,
    var(--tw-gradient-stops)
  );
}

.shadow-derek {
  box-shadow:
    0px 0px 0px 1px rgb(0 0 0 / 0.06),
    0px 1px 1px -0.5px rgb(0 0 0 / 0.06),
    0px 3px 3px -1.5px rgb(0 0 0 / 0.06),
    0px 6px 6px -3px rgb(0 0 0 / 0.06),
    0px 12px 12px -6px rgb(0 0 0 / 0.06),
    0px 24px 24px -12px rgb(0 0 0 / 0.06);
}

.shadow-aceternity {
  box-shadow:
    0px 2px 3px -1px rgba(0, 0, 0, 0.1),
    0px 1px 0px 0px rgba(25, 28, 33, 0.02),
    0px 0px 0px 1px rgba(25, 28, 33, 0.08);
}

.animate-scroll {
  animation: scroll var(--animation-duration, 40s)
    var(--animation-direction, forwards) linear infinite;
}

.animate-marquee {
  animation: marquee var(--marquee-duration) linear infinite;
}

.animate-fade-in {
  animation: fade-in 0.5s linear forwards;
}

@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}

@keyframes marquee {
  100% {
    transform: translateY(-50%);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

html {
  scroll-padding-top: 80px;
  scroll-behavior: smooth;
}

.text-balance {
  text-wrap: balance;
}

/* Prose styles for blog content (replaces @tailwindcss/typography) */
.prose {
  color: hsl(240 10% 3.9%);
  max-width: 65ch;
  font-size: 1.125rem;
  line-height: 1.75;
}

.prose :where(p):not(:where([class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose :where(h1):not(:where([class~="not-prose"] *)) {
  color: hsl(240 10% 3.9%);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}

.prose :where(h2):not(:where([class~="not-prose"] *)) {
  color: hsl(240 10% 3.9%);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}

.prose :where(h3):not(:where([class~="not-prose"] *)) {
  color: hsl(240 10% 3.9%);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}

.prose :where(h4):not(:where([class~="not-prose"] *)) {
  color: hsl(240 10% 3.9%);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}

.prose :where(a):not(:where([class~="not-prose"] *)) {
  color: hsl(221 83% 53%);
  text-decoration: underline;
  font-weight: 500;
}

.prose :where(a):hover:not(:where([class~="not-prose"] *)) {
  color: hsl(221 83% 45%);
}

.prose :where(strong):not(:where([class~="not-prose"] *)) {
  color: hsl(240 10% 3.9%);
  font-weight: 600;
}

.prose :where(ul):not(:where([class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}

.prose :where(ol):not(:where([class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}

.prose :where(li):not(:where([class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.prose :where(ul > li):not(:where([class~="not-prose"] *)) {
  padding-left: 0.375em;
}

.prose :where(ol > li):not(:where([class~="not-prose"] *)) {
  padding-left: 0.375em;
}

.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: hsl(240 6% 10%);
  border-left-width: 0.25rem;
  border-left-color: hsl(240 5.9% 90%);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}

.prose :where(img):not(:where([class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

.prose :where(figure):not(:where([class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}

.prose :where(table):not(:where([class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
  border-collapse: collapse;
  border-spacing: 0;
}

.prose :where(thead):not(:where([class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: hsl(240 5.9% 90%);
}

.prose :where(thead th):not(:where([class~="not-prose"] *)) {
  color: hsl(240 10% 3.9%);
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}

.prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: hsl(240 5.9% 90%);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
  border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"] *)) {
  vertical-align: baseline;
  padding: 0.5714286em;
}

.prose :where(code):not(:where([class~="not-prose"] *)) {
  color: hsl(240 10% 3.9%);
  font-weight: 600;
  font-size: 0.875em;
  background-color: hsl(240 4.8% 95.9%);
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
}

.prose :where(pre):not(:where([class~="not-prose"] *)) {
  color: hsl(0 0% 98%);
  background-color: hsl(240 10% 3.9%);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding: 0.8571429em 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

/* Dark mode prose styles */
.dark .prose {
  color: hsl(0 0% 98%);
}

.dark .prose :where(h1):not(:where([class~="not-prose"] *)),
.dark .prose :where(h2):not(:where([class~="not-prose"] *)),
.dark .prose :where(h3):not(:where([class~="not-prose"] *)),
.dark .prose :where(h4):not(:where([class~="not-prose"] *)),
.dark .prose :where(strong):not(:where([class~="not-prose"] *)) {
  color: hsl(0 0% 98%);
}

.dark .prose :where(a):not(:where([class~="not-prose"] *)) {
  color: hsl(217 91% 60%);
}

.dark .prose :where(a):hover:not(:where([class~="not-prose"] *)) {
  color: hsl(217 91% 70%);
}

.dark .prose :where(blockquote):not(:where([class~="not-prose"] *)) {
  color: hsl(0 0% 85%);
  border-left-color: hsl(240 3.7% 15.9%);
}

.dark .prose :where(thead):not(:where([class~="not-prose"] *)),
.dark .prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
  border-bottom-color: hsl(240 3.7% 15.9%);
}

.dark .prose :where(thead th):not(:where([class~="not-prose"] *)) {
  color: hsl(0 0% 98%);
}

.dark .prose :where(code):not(:where([class~="not-prose"] *)) {
  color: hsl(0 0% 98%);
  background-color: hsl(240 3.7% 15.9%);
}

.dark .prose :where(pre):not(:where([class~="not-prose"] *)) {
  background-color: hsl(240 3.7% 15.9%);
  color: hsl(0 0% 98%);
}

/* Prose size variants */
.prose-lg {
  font-size: 1.25rem;
  line-height: 1.8;
}

.prose-xl {
  font-size: 1.375rem;
  line-height: 1.8;
}