@import "./colors.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --gradient-start: #bdacf9;
  --gradient-end: #f0cffc;
}

@layer base {
  :root {
    --background: var(--color-white);
    --foreground: var(--boost-space);

    --muted: hsl(210 40% 96.1%);
    --muted-foreground: hsla(201, 10%, 59%, 1);

    --popover: hsl(0 0% 100%);
    --popover-foreground: var(--boost-space);

    --border: var(--color-flash);
    --input: var(--color-flash);

    --card: hsl(0 0% 100%);
    --card-foreground: var(--boost-space);

    --primary: var(--color-black-neutral);
    --primary-foreground: var(--color-white);

    --secondary: var(--color-flash);
    --secondary-foreground: var(--color-black-neutral);

    --accent: var(--color-boost-charge);
    --accent-foreground: var(--boost-space);

    --destructive: hsla(0, 84%, 60%, 1);
    --destructive-foreground: var(--color-white);

    --ring: var(--color-boost-charge);

    --radius: 0.75rem;

    --skeleton-color-1: var(--border);
    --skeleton-color-2: var(--card);

    --dialog-overlay: hsla(0, 0%, 100%, 0.8);
  }

  [data-theme="dark"],
  .dark {
    --background: hsla(229, 84%, 5%, 1);
    --foreground: var(--color-white);

    --muted: var(--color-white);
    --muted-foreground: var(--color-boost-space);

    --accent: var(--color-boost-green);
    --accent-foreground: var(--color-boost-space);

    --popover: hsl(224 71% 4%);
    --popover-foreground: hsl(215 20.2% 65.1%);

    --border: hsla(217, 33%, 17%, 1);
    --input: hsl(216 34% 17%);

    --card: hsl(224 71% 4%);
    --card-foreground: hsl(213 31% 91%);

    --primary: var(--color-boost-green);
    --primary-foreground: var(--color-black-neutral);

    --secondary: var(--color-boost-green);
    --secondary-foreground: var(--color-black-neutral);

    --destructive: hsl(0 63% 31%);
    --destructive-foreground: hsl(210 40% 98%);

    --ring: var(--color-black-neutral);

    --radius: 0.75rem;

    --skeleton-color-1: var(--border);
    --skeleton-color-2: var(--card);

    --dialog-overlay: hsla(0, 0%, 0%, 0.8);
  }

  [data-theme="charge"],
  .charge {
    --background: var(--color-boost-purple);
    --foreground: var(--color-boost-charge);

    --muted: hsl(223 47% 11%);
    --muted-foreground: var(--color-black-neutral);

    --accent: var(--color-boost-purple);
    --accent-foreground: var(--color-boost-charge);

    --popover: hsl(224 71% 4%);
    --popover-foreground: hsl(215 20.2% 65.1%);

    --border: hsl(216 34% 17%);
    --input: hsl(216 34% 17%);

    --card: hsl(224 71% 4%);
    --card-foreground: hsl(213 31% 91%);

    --primary: var(--color-black-neutral);
    --primary-foreground: var(--color-flash);

    --secondary: var(--color-flash);
    --secondary-foreground: var(--color-black-neutral);

    --destructive: hsl(0, 78%, 45%);
    --destructive-foreground: hsl(210 40% 98%);

    --ring: var(--color-black-neutral);

    --radius: 0.75rem;

    --skeleton-color-1: var(--border);
    --skeleton-color-2: var(--card);
  }
}

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

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

.boost-logo {
  @apply w-[300px];
  @apply h-[95px];
}

.boost-logo--path {
  @apply fill-current;
}
