@theme {
  --font-sans: 'Red Hat Display', sans-serif;
  --font-mono: 'Red Hat Mono', monospace;
}

@plugin "daisyui" {}

@plugin "daisyui/theme" {
  name: 'adocasts-dark';
  default: false;
  prefersdark: true;
  color-scheme: dark;

  --color-white: white;
  --color-black: black;

  --color-base-100: oklch(0.276 0.068 287.4);
  --color-base-200: oklch(0.23 0.056 287.5);
  --color-base-300: oklch(16.8% 0.055 287.6);
  --color-base-content: oklch(83% 0.039 288.4);

  --color-primary: oklch(80% 0.1 230.5);
  --color-primary-content: oklch(12% 0.03 276.9);

  --color-secondary: oklch(0.55 0.15 276.5);
  --color-secondary-content: oklch(0.93 0.048 275.7);

  --color-accent: oklch(90% 0.08 180.6);
  --color-accent-content: oklch(13% 0.033 350.1);

  --color-neutral: oklch(0.26 0.068 287.4);
  --color-neutral-content: oklch(86% 0.05 287.6);

  --color-info: oklch(68% 0.15 237.2);
  --color-info-content: oklch(0% 0 0);

  --color-success: oklch(77% 0.13 182);
  --color-success-content: oklch(15.5% 0.025 182);

  --color-warning: oklch(82% 0.13 83);
  --color-warning-content: oklch(15.5% 0.02 83);

  --color-error: oklch(70% 0.17 13.2);
  --color-error-content: oklch(13% 0.03 13.1);

  --radius-selector: 0.25rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

@plugin "daisyui/theme" {
  name: 'adocasts-midnight';
  default: false;
  prefersdark: false;
  color-scheme: dark;

  --color-white: white;
  --color-black: black;

  --color-base-100: oklch(0.2418 0.0395 287.6);
  --color-base-200: oklch(0.1853 0.0395 287.6);
  --color-base-300: oklch(8% 0.025 287.6);
  --color-base-content: oklch(90% 0.035 288.4);
  
  --color-primary: oklch(80% 0.1 230.5);
  --color-primary-content: oklch(12% 0.03 276.9);

  --color-secondary: oklch(0.55 0.15 276.5);
  --color-secondary-content: oklch(0.93 0.048 275.7);

  --color-accent: oklch(90% 0.08 180.6);
  --color-accent-content: oklch(13% 0.033 350.1);

  --color-neutral: oklch(0.18 0.04 287.4); /* Matches new --color-base-100 */
  --color-neutral-content: oklch(90% 0.05 287.6); /* Slightly lighter for better contrast */

  --color-info: oklch(68% 0.15 237.2);
  --color-info-content: oklch(0% 0 0);

  --color-success: oklch(77% 0.13 182);
  --color-success-content: oklch(15.5% 0.025 182);

  --color-warning: oklch(82% 0.13 83);
  --color-warning-content: oklch(15.5% 0.02 83);

  --color-error: oklch(70% 0.17 13.2);
  --color-error-content: oklch(13% 0.03 13.1);

  --radius-selector: 0.25rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

@plugin "daisyui/theme" {
  name: 'adocasts-light';
  default: true;
  prefersdark: false;
  color-scheme: light;

  --color-white: black;
  --color-black: white;

  --color-base-300: oklch(0.9911 0.0048 298.06);
  --color-base-200: oklch(0.9694 0.0074 287.6);
  --color-base-100: oklch(0.9273 0.0197 287.6);
  --color-base-content: oklch(18% 0.03 288.4);

  --color-primary: oklch(0.6059 0.2026 276.5);
  --color-primary-content: oklch(0.93 0.048 275.7);

  --color-secondary: oklch(0.6933 0.1447 234);
  --color-secondary-content: oklch(0.95 0.03 276.9);

  --color-accent: oklch(0.7133 0.1256 184.24);
  --color-accent-content: oklch(0.98 0.02 350.1);

  --color-neutral: oklch(95% 0.01 287.4);
  --color-neutral-content: oklch(25% 0.03 287.6);

  --color-info: oklch(0.6533 0.161 244.59);
  --color-info-content: oklch(0% 0 0);

  --color-success: oklch(0.7667 0.1394 178.94);
  --color-success-content: oklch(0.98 0.01 182);

  --color-warning: oklch(0.76 0.1529 84.71);
  --color-warning-content: oklch(0.15 0.02 83);

  --color-error: oklch(0.5412 0.216 13.2);
  --color-error-content: oklch(0.98 0.02 13.1);

  --radius-selector: 0.25rem;
  --radius-field: 0.5rem;
  --radius-box: .5rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

@custom-variant dark (
  &:where([data-theme=adocasts-dark], [data-theme=adocasts-dark] *), 
  &:where([data-theme=adocasts-midnight], [data-theme=adocasts-midnight] *),
  &:where([data-theme=adocasts-system][prefers-color-scheme=dark], [data-theme=adocasts-system][prefers-color-scheme=dark] *)
);

@custom-variant midnight (&:where([data-theme=adocasts-midnight], [data-theme=adocasts-midnight] *));

@custom-variant no-hover (@media (hover: none) and (pointer: coarse));

@media (prefers-color-scheme: light) {
  html[data-theme='adocasts-system'] {
    .logo-dark {
      display: none;
    }
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme='adocasts-system'] {
    .logo-light {
      display: none;
    }

    .shiki,
    .shiki span {
      color: var(--shiki-dark) !important;
      font-style: var(--shiki-dark-font-style) !important;
      font-weight: var(--shiki-dark-font-weight) !important;
      text-decoration: var(--shiki-dark-text-decoration) !important;
    }
  }
}

html[data-theme='adocasts-dark'],
html[data-theme='adocasts-midnight'] {
  .logo-light {
    display: none;
  }

  .shiki,
  .shiki span {
    color: var(--shiki-dark) !important;
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}

html[data-theme='adocasts-light'] {
  .logo-dark {
    display: none;
  }
}

.btn-inner-xs .btn {
  @apply !btn-xs;

  column-gap: calc(var(--spacing) * 1.5);
}

.btn-outline,
.badge-outline {
  @apply border-base-100;

  &.btn-primary,
  &.btn-secondary,
  &.btn-accent,
  &.btn-neutral,
  &.btn-success,
  &.btn-warning,
  &.btn-error,
  &.btn-info {
    border-color: color-mix(
      in oklab,
      var(--btn-border, var(--color-base-content)),
      transparent 75%
    );
  }

  &.badge-primary,
  &.badge-secondary,
  &.badge-accent,
  &.badge-neutral,
  &.badge-success,
  &.badge-warning,
  &.badge-error,
  &.badge-info {
    border-color: color-mix(
      in oklab,
      var(--badge-color, var(--color-base-content)),
      transparent 75%
    );
  }
}

.input,
.select,
.textarea {
  @apply border-base-100 bg-transparent hover:border-base-content/20 focus-within:border-base-content/30;
}

.menu {
  li a,
  li label,
  li button {
    border: 1px solid transparent;
    margin-bottom: .125rem;

    &:hover {
      border-color: var(--color-base-100);
    }

    &.menu-active {
      background-color: color-mix(in oklab, var(--color-primary), transparent 90%);
      border: 1px solid var(--color-primary);
    }
  }

  & :where(li:not(.menu-title, .disabled) > :not(ul, details, .menu-title):not(.menu-active, :active, .btn):hover, li:not(.menu-title, .disabled) > details > summary:not(.menu-title):not(.menu-active, :active, .btn):hover) {
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-base-100), transparent 90%);
    }
  }

  li:not(.menu-title, .disabled) label:not(.menu-active):hover {
    background-color: color-mix(in oklab, var(--color-base-100), transparent 90%);
    border: 1px solid var(--color-base-100);
  }
}

.avatar-group {
  & :where(.avatar) {
    border-color: var(--color-base-300);
  }
}

.btn-toggle {
  @apply btn-ghost border border-transparent hover:bg-success/10 hover:border-success/50 hover:text-success;

  &.btn-primary,
  &.btn-secondary,
  &.btn-accent,
  &.btn-neutral,
  &.btn-success,
  &.btn-warning,
  &.btn-error,
  &.btn-info {
    background-color: transparent;
    border-color: color-mix(
      in oklab,
      var(--btn-border, var(--color-base-content)),
      transparent 50%
    );

    &:hover {
      color: var(--btn-color);
    }
  }

  &.active {
    color: var(--btn-color);
  }
}

.btn {
  &:is(:disabled, [disabled], .btn-disabled) {
    &:not(.btn-link, .btn-ghost) {
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in oklab, var(--color-base-content) 2.5%, transparent);
      }
    }
  }
}

.toggle,
.toggle:before {
  border-radius: 999px;
}
