@import 'tailwindcss' source('../../');
@import '../../colors.css' layer(base);
@import '../../themes.css' layer(base);
@import '../../tailwind-theme-config.css' layer(theme);

@config '../../../tailwind.embed.config.ts';

/**
 * NOTE: Pretty much everything else from globals.css is NOT in here.
 *
 * Notable things are fonts and color variables. If we redesign and refactor
 * the embed page, we will definitely need to revisit that.
 */

@layer base {
  :root {
    --button-background-image: url('https://cdn-o.suno.com/auras-v2/Aura-1.png');
    --button-background-image-overlay: url('https://cdn-o.suno.com/grain.webp');
    --button-background-hover-speed: 3s;

    --color-embed-bg-a: #1e2960;
    --color-embed-bg-b: #1c1c1c;
    --color-embed-slider-rail: var(--chakra-colors-whiteAlpha-200);
    --color-embed-slider-progress: var(--chakra-colors-orange-200);
    --color-embed-slider-thumb: var(--chakra-colors-white);
    --color-embed-slider-thumb-disabled: var(--chakra-colors-gray-300);
    --color-embed-text-primary: var(--chakra-colors-chakra-body-text);
    --color-embed-text-secondary: var(--chakra-colors-gray-400);
    --color-embed-button-bg-hover: var(--chakra-colors-orange-300);
    --color-embed-button-bg: var(--chakra-colors-orange-200);
    --color-embed-button-fg: var(--chakra-colors-gray-800);
  }
}