globals.css

@import "tailwindcss";
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/preset.css";
@import "tw-animate-css";
/*
  ---break---
*/
@custom-variant dark (&:is(.dark *));

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
  body {
    letter-spacing: var(--tracking-normal);
  }
}

@utility text-balance {
  text-wrap: balance;
}

@layer utilities {
  /* Subtle research-style gradients */
  .bg-gradient-primary {
    background-image: linear-gradient(90deg, #60a5fa 0%, #93c5fd 100%);
  }
  .bg-gradient-accent {
    background-image: linear-gradient(90deg, #fca5a5 0%, #fecaca 100%);
  }
  .bg-gradient-secondary {
    background-image: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  }
  .shadow-glow {
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.06),
      0 10px 20px rgba(0, 0, 0, 0.04);
  }
  :root {
    --background: #ffffff;
    --foreground: #171717;
  }

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

  body {
    color: var(--foreground);
    background: var(--background);
    font-family: Arial, Helvetica, sans-serif;
  }
}

/*
  ---break---
*/

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
  --font-mono: JetBrains Mono, monospace;
  --font-serif: Merriweather, serif;
  --radius: 1.25rem;
  --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
  --tracking-tight: calc(var(--tracking-normal) - 0.025em);
  --tracking-wide: calc(var(--tracking-normal) + 0.025em);
  --tracking-wider: calc(var(--tracking-normal) + 0.05em);
  --tracking-widest: calc(var(--tracking-normal) + 0.1em);
  --tracking-normal: var(--tracking-normal);
  --shadow-2xl: var(--shadow-2xl);
  --shadow-xl: var(--shadow-xl);
  --shadow-lg: var(--shadow-lg);
  --shadow-md: var(--shadow-md);
  --shadow: var(--shadow);
  --shadow-sm: var(--shadow-sm);
  --shadow-xs: var(--shadow-xs);
  --shadow-2xs: var(--shadow-2xs);
  --spacing: var(--spacing);
  --letter-spacing: var(--letter-spacing);
  --shadow-offset-y: var(--shadow-offset-y);
  --shadow-offset-x: var(--shadow-offset-x);
  --shadow-spread: var(--shadow-spread);
  --shadow-blur: var(--shadow-blur);
  --shadow-opacity: var(--shadow-opacity);
  --color-shadow-color: var(--shadow-color);
  --color-destructive-foreground: var(--destructive-foreground);
}

/*
  ---break---
*/

:root {
  --radius: 0rem;
  /* Neutral grayscale palette for research style */
  --background: oklch(0.98 0 0);
  --foreground: oklch(0.25 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.25 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.25 0 0);
  --primary: oklch(0.35 0 0);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.95 0 0);
  --secondary-foreground: oklch(0.28 0 0);
  --muted: oklch(0.96 0 0);
  --muted-foreground: oklch(0.5 0 0);
  --accent: oklch(0.94 0 0);
  --accent-foreground: oklch(0.28 0 0);
  --destructive: oklch(0.4 0.03 25);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.9 0 0);
  --input: oklch(0.9 0 0);
  --ring: oklch(0.35 0 0);
  /* Charts in subtle greys */
  --chart-1: oklch(0.35 0 0);
  --chart-2: oklch(0.5 0 0);
  --chart-3: oklch(0.65 0 0);
  --chart-4: oklch(0.8 0 0);
  --chart-5: oklch(0.9 0 0);
  --sidebar: oklch(0.98 0 0);
  --sidebar-foreground: oklch(0.25 0 0);
  --sidebar-primary: oklch(0.35 0 0);
  --sidebar-primary-foreground: oklch(0.98 0 0);
  --sidebar-accent: oklch(0.94 0 0);
  --sidebar-accent-foreground: oklch(0.28 0 0);
  --sidebar-border: oklch(0.9 0 0);
  --sidebar-ring: oklch(0.35 0 0);
  --font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
  --font-serif: Merriweather, serif;
  --font-mono: JetBrains Mono, monospace;
  --shadow-color: #000000;
  --shadow-opacity: 0.06;
  --shadow-blur: 10px;
  --shadow-spread: -1px;
  --shadow-offset-x: 0px;
  --shadow-offset-y: 0px;
  --letter-spacing: 0em;
  --spacing: 0.25rem;
  --shadow-2xs: 0 0 0 0 transparent;
  --shadow-xs: 0 0 0 0 transparent;
  --shadow-sm: 0 0 0 0 transparent;
  --shadow: 0 0 0 0 transparent;
  --shadow-md: 0 0 0 0 transparent;
  --shadow-lg: 0 0 0 0 transparent;
  --shadow-xl: 0 0 0 0 transparent;
  --shadow-2xl: 0 0 0 0 transparent;
  --tracking-normal: 0em;
}

.dark {
  --background: oklch(0.2077 0.0398 265.7549);
  --foreground: oklch(0.9288 0.0126 255.5078);
  --card: oklch(0.2795 0.0368 260.031);
  --card-foreground: oklch(0.9288 0.0126 255.5078);
  --popover: oklch(0.2795 0.0368 260.031);
  --popover-foreground: oklch(0.9288 0.0126 255.5078);
  --primary: oklch(0.6801 0.1583 276.9349);
  --primary-foreground: oklch(0.2077 0.0398 265.7549);
  --secondary: oklch(0.3351 0.0331 260.912);
  --secondary-foreground: oklch(0.8717 0.0093 258.3382);
  --muted: oklch(0.2795 0.0368 260.031);
  --muted-foreground: oklch(0.7137 0.0192 261.3246);
  --accent: oklch(0.3729 0.0306 259.7328);
  --accent-foreground: oklch(0.8717 0.0093 258.3382);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --border: oklch(0.4461 0.0263 256.8018);
  --input: oklch(0.4461 0.0263 256.8018);
  --ring: oklch(0.6801 0.1583 276.9349);
  --chart-1: oklch(0.6801 0.1583 276.9349);
  --chart-2: oklch(0.5854 0.2041 277.1173);
  --chart-3: oklch(0.5106 0.2301 276.9656);
  --chart-4: oklch(0.4568 0.2146 277.0229);
  --chart-5: oklch(0.3984 0.1773 277.3662);
  --sidebar: oklch(0.2795 0.0368 260.031);
  --sidebar-foreground: oklch(0.9288 0.0126 255.5078);
  --sidebar-primary: oklch(0.6801 0.1583 276.9349);
  --sidebar-primary-foreground: oklch(0.2077 0.0398 265.7549);
  --sidebar-accent: oklch(0.3729 0.0306 259.7328);
  --sidebar-accent-foreground: oklch(0.8717 0.0093 258.3382);
  --sidebar-border: oklch(0.4461 0.0263 256.8018);
  --sidebar-ring: oklch(0.6801 0.1583 276.9349);
  --destructive-foreground: oklch(0.2077 0.0398 265.7549);
  --radius: 1.25rem;
  --font-sans: Inter, ui-sans-serif, sans-serif, system-ui;
  --font-serif: Merriweather, serif;
  --font-mono: JetBrains Mono, monospace;
  --shadow-color: #1a1a1a;
  --shadow-opacity: 0.1;
  --shadow-blur: 15px;
  --shadow-spread: -1px;
  --shadow-offset-x: 0px;
  --shadow-offset-y: 0px;
  --letter-spacing: 0em;
  --spacing: 0.25rem;
  --shadow-2xs: 0px 0px 15px -1px hsl(0 0% 10.1961% / 0.05);
  --shadow-xs: 0px 0px 15px -1px hsl(0 0% 10.1961% / 0.05);
  --shadow-sm:
    0px 0px 15px -1px hsl(0 0% 10.1961% / 0.1),
    0px 1px 2px -2px hsl(0 0% 10.1961% / 0.1);
  --shadow:
    0px 0px 15px -1px hsl(0 0% 10.1961% / 0.1),
    0px 1px 2px -2px hsl(0 0% 10.1961% / 0.1);
  --shadow-md:
    0px 0px 15px -1px hsl(0 0% 10.1961% / 0.1),
    0px 2px 4px -2px hsl(0 0% 10.1961% / 0.1);
  --shadow-lg:
    0px 0px 15px -1px hsl(0 0% 10.1961% / 0.1),
    0px 4px 6px -2px hsl(0 0% 10.1961% / 0.1);
  --shadow-xl:
    0px 0px 15px -1px hsl(0 0% 10.1961% / 0.1),
    0px 8px 10px -2px hsl(0 0% 10.1961% / 0.1);
  --shadow-2xl: 0px 0px 15px -1px hsl(0 0% 10.1961% / 0.25);
}

/*
  ---break---
*/

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Global animated site backgrounds (sky for light, stars for dark) */
@layer utilities {
  .site-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  /* Light mode sky */
  .site-bg--sky {
    display: block;
    /* Stronger blue sky */
    background: linear-gradient(
      180deg,
      #cfe8ff 0%,
      #bfe1ff 40%,
      #eaf6ff 70%,
      #ffffff 100%
    );
  }
  /* Cloud layers using images, subtle parallax */
  .site-bg--sky::before,
  .site-bg--sky::after {
    content: "";
    position: absolute;
    left: -20vw;
    right: -20vw;
    pointer-events: none;
    background-repeat: repeat-x;
    background-position: 0 center;
  }
  .site-bg--sky::before {
    top: 8vh;
    height: 26vh;
    opacity: 0.25;
    background-image: url("/cloud_2.png");
    background-size: 900px auto;
    animation: clouds-drift 60s linear infinite;
  }
  .site-bg--sky::after {
    top: 38vh;
    height: 22vh;
    opacity: 0.18;
    background-image: url("/cloud_2.png");
    background-size:
      700px auto,
      1100px auto;
    background-position:
      0 center,
      200px center;
    animation: clouds-drift-slow 180s linear infinite;
  }

  @keyframes clouds-drift {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  @keyframes clouds-drift-slow {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-35%);
    }
  }

  /* Dark mode stars */
  .site-bg--stars {
    display: none;
    background-color: #000000;
  }
  .site-bg--stars::before,
  .site-bg--stars::after {
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: repeat;
  }
  .site-bg--stars::before {
    opacity: 0.7;
    background-image:
      radial-gradient(
        1px 1px at 10px 20px,
        rgba(255, 255, 255, 0.9) 50%,
        transparent 51%
      ),
      radial-gradient(
        1px 1px at 130px 80px,
        rgba(186, 214, 255, 0.9) 50%,
        transparent 51%
      ),
      radial-gradient(
        1px 1px at 60px 140px,
        rgba(255, 210, 210, 0.9) 50%,
        transparent 51%
      );
    background-size: 220px 220px;
    animation: stars-drift 120s linear infinite;
  }
  .site-bg--stars::after {
    opacity: 0.5;
    background-image:
      radial-gradient(
        1.5px 1.5px at 50px 30px,
        rgba(255, 255, 255, 0.8) 50%,
        transparent 51%
      ),
      radial-gradient(
        2px 2px at 120px 160px,
        rgba(200, 220, 255, 0.8) 50%,
        transparent 51%
      ),
      radial-gradient(
        1.5px 1.5px at 180px 100px,
        rgba(255, 220, 220, 0.8) 50%,
        transparent 51%
      );
    background-size: 320px 320px;
    animation: stars-drift 180s linear infinite reverse;
  }

  @keyframes stars-drift {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(-50%, 0, 0);
    }
  }

  /* Toggle by theme */
  .dark .site-bg--stars {
    display: block;
  }
  .dark .site-bg--sky {
    display: none;
  }

  /* Docs: prefer solid background in light mode (hide sky) */
  html.docs-route .site-bg.site-bg--sky {
    display: none;
  }
}