/* github.com/shadcn-ui/ui/blob/main/apps/v4/app/globals.css */
/* fumadocs.vercel.app/blog/v15 */
/* github.com/tailwindlabs/tailwindcss/issues/13136 */
@import 'tailwindcss';
@import 'fumadocs-ui/css/black.css';
@import 'fumadocs-ui/css/preset.css';
/* @import '../shared/ui/global.css' */

@source '../../node_modules/fumadocs-ui/dist/**/*.js';
@source "./components/ui/**/*.{ts,tsx}";
@source './components/ui/**/*.stories.{ts,tsx}';
@source '../../apps/docs/mdx-components.{ts,tsx}';
@source '../../apps/docs{src,components,app,content}/**/*!(*.stories|*.spec).{ts,tsx,md,mdx,html}';
@source '../../apps/docs/content/docs/**/*.{md,mdx}';

@plugin "tailwindcss-animate";

/* @custom-variant dark (&:is(.dark *)); */

@layer base {
  :root {
    --background: hsl(116 0% 95%);
    --foreground: hsl(116 0% 0%);
    --card: hsl(116 0% 90%);
    --card-foreground: hsl(116 0% 10%);
    --popover: hsl(116 0% 95%);
    --popover-foreground: hsl(116 95% 0%);
    --primary: hsl(116 73.9% 52%);
    --primary-foreground: hsl(0 0% 100%);
    --secondary: hsl(116 10% 70%);
    --secondary-foreground: hsl(0 0% 0%);
    --muted: hsl(78 10% 85%);
    --muted-foreground: hsl(116 0% 35%);
    --accent: hsl(78 10% 80%);
    --accent-foreground: hsl(116 0% 10%);
    --destructive: hsl(0 50% 30%);
    --destructive-foreground: hsl(116 0% 90%);
    --border: hsl(116 20% 50%);
    --input: hsl(116 20% 18%);
    --ring: hsl(116 73.9% 52%);
    --radius: 0.5rem;
  }

  .dark {
    --background: hsl(0 0% 0%);
    --foreground: hsl(0 0% 100%);
    --card: hsl(116 0% 0%);
    --card-foreground: hsl(116 0% 90%);
    --popover: hsl(116 10% 5%);
    --popover-foreground: hsl(116 0% 90%);
    --primary: hsl(116 73.9% 52%);
    --primary-foreground: hsl(0 0% 100%);
    --secondary: hsl(116 10% 10%);
    --secondary-foreground: hsl(0 0% 100%);
    --muted: hsl(78 10% 15%);
    --muted-foreground: hsl(116 0% 60%);
    --accent: hsl(78 10% 15%);
    --accent-foreground: hsl(116 0% 90%);
    --destructive: hsl(0 50% 30%);
    --destructive-foreground: hsl(116 0% 90%);
    --border: hsl(0 0% 100% / 15%);
    --input: hsl(116 20% 18%);
    --ring: hsl(116 73.9% 52%);
    --radius: 0.5rem;
  }
}

@theme {
  --color-fd-background: var(--background);
  --color-fd-foreground: var(--foreground);
  --color-fd-card: var(--card);
  --color-fd-card-foreground: var(--card-foreground);
  --color-fd-popover: var(--popover);
  --color-fd-popover-foreground: var(--popover-foreground);
  --color-fd-primary: var(--primary);
  --color-fd-primary-foreground: var(--primary-foreground);
  --color-fd-secondary: var(--secondary);
  --color-fd-secondary-foreground: var(--secondary-foreground);
  --color-fd-muted: var(--muted);
  --color-fd-muted-foreground: var(--muted-foreground);
  --color-fd-accent: var(--accent);
  --color-fd-accent-foreground: var(--accent-foreground);
  --color-fd-destructive: var(--destructive);
  --color-fd-destructive-foreground: var(--destructive-foreground);
  --color-fd-border: var(--border);
  --color-fd-input: var(--input);
  --color-fd-ring: var(--ring);
  --border-fd-radius: var(--radius);
  --color-primary: var(--primary);
  --color-secondary: var(--secondary);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-1: var(--color-1);
  --color-2: var(--color-2);
  --color-3: var(--color-3);
  --color-4: var(--color-4);
  --color-5: var(--color-5);
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --animate-background-position-spin: background-position-spin 3000ms infinite alternate;
  --animate-color-cycle-orange: color-cycle-orange 8s infinite;
  --animate-color-cycle-yellow: color-cycle-yellow 8s infinite;
  --animate-color-cycle-blue: color-cycle-blue 8s infinite;
  --animate-color-cycle-primary: color-cycle-primary 8s infinite;

  @keyframes background-position-spin {
    0% {
      background-position: top center;
    }

    100% {
      background-position: bottom center;
    }
  }

  @keyframes color-cycle-orange {
    0% {
      color: var(--color-orange-500);
    }

    25% {
      color: var(--color-yellow-400);
    }

    50% {
      color: var(--color-blue-400);
    }

    75% {
      color: var(--color-primary);
    }

    100% {
      color: var(--color-orange-500);
    }
  }

  @keyframes color-cycle-yellow {
    0% {
      color: var(--color-yellow-400);
    }

    25% {
      color: var(--color-blue-400);
    }

    50% {
      color: var(--color-primary);
    }

    75% {
      color: var(--color-orange-500);
    }

    100% {
      color: var(--color-yellow-400);
    }
  }

  @keyframes color-cycle-blue {
    0% {
      color: var(--color-blue-400);
    }

    25% {
      color: var(--color-primary);
    }

    50% {
      color: var(--color-orange-500);
    }

    75% {
      color: var(--color-yellow-400);
    }

    100% {
      color: var(--color-blue-400);
    }
  }

  @keyframes color-cycle-primary {
    0% {
      color: var(--color-primary);
    }

    25% {
      color: var(--color-orange-500);
    }

    50% {
      color: var(--color-yellow-400);
    }

    75% {
      color: var(--color-blue-400);
    }

    100% {
      color: var(--color-primary);
    }
  }
}

.dark {
  --color-fd-background: var(--background);
  --color-fd-foreground: var(--foreground);
  --color-fd-card: var(--card);
  --color-fd-card-foreground: var(--card-foreground);
  --color-fd-popover: var(--popover);
  --color-fd-popover-foreground: var(--popover-foreground);
  --color-fd-primary: var(--primary);
  --color-fd-primary-foreground: var(--primary-foreground);
  --color-fd-secondary: var(--secondary);
  --color-fd-secondary-foreground: var(--secondary-foreground);
  --color-fd-muted: var(--muted);
  --color-fd-muted-foreground: var(--muted-foreground);
  --color-fd-accent: var(--accent);
  --color-fd-accent-foreground: var(--accent-foreground);
  --color-fd-destructive: var(--destructive);
  --color-fd-destructive-foreground: var(--destructive-foreground);
  --color-fd-border: var(--border);
  --color-fd-input: var(--input);
  --color-fd-ring: var(--ring);
  --border-fd-radius: var(--radius);
}

#nd-subnav > div > button + div > div:first-child {
  justify-self: flex-start;
  flex-grow: 2;
}
