@import 'tailwindcss';
@import '@cio/ui/output.css';
@import '../../../packages/ui/src/custom/animation/marketing-layers.css';

@custom-variant dark (&:where(.dark, .dark *));

@source './**/*.{html,js,svelte,ts}';
@source '../../../packages/ui/src/custom/animation/**/*.svelte';

/* Theme tokens (colors, fonts, radii, motion) + 2xl breakpoint for layout (e.g. `max-w-(--breakpoint-2xl)`). */
@theme inline {
  --breakpoint-2xl: 1400px;

  --font-sans:
    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  --font-drawn:
    Virgil, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);

  --color-border: hsl(var(--border) / <alpha-value>);
  --color-input: hsl(var(--input) / <alpha-value>);
  --color-ring: hsl(var(--ring) / <alpha-value>);
  --color-background: hsl(var(--background) / <alpha-value>);
  --color-foreground: hsl(var(--foreground) / <alpha-value>);
  --color-primary: hsl(var(--primary) / <alpha-value>);
  --color-primary-foreground: hsl(var(--primary-foreground) / <alpha-value>);
  --color-secondary: hsl(var(--secondary) / <alpha-value>);
  --color-secondary-foreground: hsl(var(--secondary-foreground) / <alpha-value>);
  --color-destructive: hsl(var(--destructive) / <alpha-value>);
  --color-destructive-foreground: hsl(var(--destructive-foreground) / <alpha-value>);
  --color-muted: hsl(var(--muted) / <alpha-value>);
  --color-muted-foreground: hsl(var(--muted-foreground) / <alpha-value>);
  --color-accent: hsl(var(--accent) / <alpha-value>);
  --color-accent-foreground: hsl(var(--accent-foreground) / <alpha-value>);
  --color-popover: hsl(var(--popover) / <alpha-value>);
  --color-popover-foreground: hsl(var(--popover-foreground) / <alpha-value>);
  --color-card: hsl(var(--card) / <alpha-value>);
  --color-card-foreground: hsl(var(--card-foreground) / <alpha-value>);

  --animate-border-beam: border-beam calc(var(--duration) * 1s) infinite linear;
  --animate-meteor: meteor 5s linear infinite;
  --animate-shimmer: shimmer 8s infinite;
  --animate-spin-around: spin-around calc(var(--speed) * 2) infinite linear;
  --animate-magicslide: magicslide var(--speed) ease-in-out infinite alternate;
}

/* Used by ShinnyText (`animate-shimmer`); marketing-layers uses `shimmer-marketing` for other UIs. */
@keyframes shimmer {
  0%,
  90%,
  100% {
    background-position: calc(-100% - var(--shimmer-width)) 0;
  }
  30%,
  60% {
    background-position: calc(100% + var(--shimmer-width)) 0;
  }
}

@font-face {
  font-family: 'Virgil';
  src: url('/fonts/Virgil.woff2');
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

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

    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;

    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    --destructive: 0 72.2% 50.6%;
    --destructive-foreground: 0 0% 98%;

    --ring: 240 10% 3.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;

    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --ring: 240 4.9% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;

    overflow-x: hidden;
  }
}