@import "tailwindcss";
@plugin "@tailwindcss/typography";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme {
  --color-aero-blue: #7cb9e8;
  --color-aero-green: #8ff0a4;
  --color-sky-blue: #87ceeb;
  --color-grass-green: #7cfc00;
  --color-water: #00bfff;
  --color-window-title: #0058e1;

  --background-start: var(--color-sky-blue);
  --background-end: var(--color-lime-300);

  --font-display: var(--font-frutiger), "Arial", "Helvetica", "sans-serif";
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background-color: #3cb1e7;
  background-image: 
      /* A subtle white radial gradient for a "lens flare" or glossy spot effect */ radial-gradient(
      circle at 10% 20%,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0) 25%
    ),
    /* The main blue sky gradient */
      linear-gradient(to bottom, #54c5f9 0%, #87e0fd 70%),
    /* The green hill at the bottom */
      radial-gradient(circle at 50% 100%, #9cff9c 0%, #3cdc5c 40%, #24a844 80%);
  background-attachment: fixed;
  min-height: 100vh;
  color: #333;
}

::selection {
  background-color: #0058e1;
  color: white;
}

.window-shadow {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.hide-native-cursor,
.hide-native-cursor * {
  cursor: none;
}

/* ── Code blocks (syntax highlighted via rehype-pretty-code) ── */
.prose pre {
  background: rgba(0, 20, 60, 0.72) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0.6rem;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  position: relative;
}

/* Language badge */
.prose pre[data-language]::before {
  content: attr(data-language);
  position: absolute;
  top: 0.45rem;
  right: 0.75rem;
  font-size: 0.68rem;
  font-family: var(--font-mono), monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(135, 200, 240, 0.65);
  pointer-events: none;
}

.prose pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.875em;
  color: inherit;
}

/* Scrollbar inside code blocks */
.prose pre::-webkit-scrollbar {
  height: 5px;
}
.prose pre::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}
.prose pre::-webkit-scrollbar-thumb {
  background: rgba(100, 180, 255, 0.35);
  border-radius: 3px;
}

/* ── Inline code ── */
.prose :not(pre) > code {
  background: rgba(100, 180, 255, 0.18) !important;
  border: 1px solid rgba(100, 180, 255, 0.38) !important;
  color: #0048c8 !important;
  border-radius: 0.3rem !important;
  padding: 0.1em 0.4em !important;
  font-size: 0.88em !important;
  font-weight: 500 !important;
}

.prose :not(pre) > code::before,
.prose :not(pre) > code::after {
  content: none !important;
}