@import 'tailwindcss';

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

@theme {
    /* Primary shades */
    --color-primary-50: var(--color-cyan-50);
    --color-primary-100: var(--color-cyan-100);
    --color-primary-200: var(--color-cyan-200);
    --color-primary-300: var(--color-cyan-300);
    --color-primary-400: var(--color-cyan-400);
    --color-primary-500: var(--color-cyan-500);
    --color-primary-600: var(--color-cyan-600);
    --color-primary-700: var(--color-cyan-700);
    --color-primary-800: var(--color-cyan-800);
    --color-primary-900: var(--color-cyan-900);
    --color-primary-950: var(--color-cyan-950);
    --color-primary-50: var(--color-cyan-50);

    /* General shades */
    --color-general-50: var(--color-zinc-50);
    --color-general-100: var(--color-zinc-100);
    --color-general-200: var(--color-zinc-200);
    --color-general-300: var(--color-zinc-300);
    --color-general-400: var(--color-zinc-400);
    --color-general-500: var(--color-zinc-500);
    --color-general-600: var(--color-zinc-600);
    --color-general-700: var(--color-zinc-700);
    --color-general-800: var(--color-zinc-800);
    --color-general-900: var(--color-zinc-900);
    --color-general-950: var(--color-zinc-950);

    /* General background and foreground color. */
    --color-bg: var(--color-general-50);
    --color-fg: var(--color-general-950);

    /* Branding color of your design. */
    --color-primary: var(--color-primary-600);
    --color-primary-fg: var(--color-general-50);

    /* Supporting color of your design. */
    --color-secondary: var(--color-general-200);
    --color-secondary-fg: var(--color-general-950);

    /* Signals danger, warning or irreversibility action color. */
    --color-destructive: var(--color-red-500);
    --color-destructive-fg: var(--color-general-50);

    /* Softer contrast for supporting details color. */
    --color-muted: var(--color-general-600);
    --color-muted-fg: var(--color-general-400);

    /* Visually indicate disabled actions. */
    --color-disabled: var(--color-general-200);
    --color-disabled-fg: var(--color-general-400);

    /* Form input elements color. */
    --color-input: var(--color-general-50);
    --color-input-fg: var(--color-general-950);

    /* Default border color. */
    --color-border: var(--color-general-300);

    /* Default border radius. */
    --radius: 0.25rem;
}

.dark {
    /* General background and foreground color. */
    --color-bg: var(--color-general-950);
    --color-fg: var(--color-general-50);

    /* Branding color of your design. */
    --color-primary: var(--color-primary-500);
    --color-primary-fg: var(--color-general-50);

    /* Supporting color of your design. */
    --color-secondary: var(--color-general-800);
    --color-secondary-fg: var(--color-general-50);

    /* Signals danger, warning or irreversibility action color. */
    --color-destructive: var(--color-red-500);
    --color-destructive-fg: var(--color-general-50);

    /* Softer contrast for supporting details color. */
    --color-muted: var(--color-general-400);
    --color-muted-fg: var(--color-general-600);

    /* Visually indicate disabled actions. */
    --color-disabled: var(--color-general-800);
    --color-disabled-fg: var(--color-general-500);

    /* Form input elements color. */
    --color-input: var(--color-general-950);
    --color-input-fg: var(--color-general-50);

    /* Default border color. */
    --color-border: var(--color-general-700);
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-bg text-fg;
        font-family: 'Nunito Sans Variable', sans-serif;
    }

    ::selection {
        background-color: var(--color-primary) !important;
        color: var(--color-primary-fg) !important;
    }
}
