/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

@import 'tailwindcss';

/* DaisyUI plugin configuration */
@plugin "daisyui" {
  themes:
    light --default,
    dark --prefersdark;
  root: ':root';
  base: false;
  prefix: 'dui-';
  logs: false;
}

:root {
  /* Brand colors */
  --color-elbwalker: #01b5e2;
  --color-elbwalker-50: #ffffff;
  --color-elbwalker-100: #edfeff;
  --color-elbwalker-200: #abf8ff;
  --color-elbwalker-300: #69ecfe;
  --color-elbwalker-400: #27dbfe;
  --color-elbwalker-500: #01b5e2;
  --color-elbwalker-600: #01b5e2;
  --color-elbwalker-700: #015372;
  --color-elbwalker-800: #00283a;
  --color-elbwalker-900: #000203;

  /* Gray scale */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* DaisyUI semantic colors */
  --color-primary: var(--color-elbwalker);
  --color-primary-content: var(--color-gray-50);
  --color-secondary: var(--color-gray-600);
  --color-secondary-content: var(--color-gray-50);
  --color-base-100: var(--color-gray-100);
  --color-base-200: var(--color-gray-200);
  --color-base-300: var(--color-gray-300);
  --color-base-content: var(--color-gray-900);

  /* Infima integration */
  --ifm-background-color: var(--color-base-100);
  --ifm-background-surface-color: var(--color-base-100);
  --ifm-color-primary: var(--color-primary);
  --ifm-color-primary-dark: var(--color-elbwalker-700);
  --ifm-color-primary-darker: var(--color-elbwalker-800);
  --ifm-color-primary-darkest: var(--color-elbwalker-900);
  --ifm-color-primary-light: var(--color-elbwalker-300);
  --ifm-color-primary-lighter: var(--color-elbwalker-200);
  --ifm-color-primary-lightest: var(--color-elbwalker-100);
  --ifm-h1-font-size: 3rem;
  --ifm-h2-font-size: 2rem;
  --ifm-link-color: var(--color-elbwalker);
  --ifm-link-hover-decoration: none;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

html[data-theme='dark'] {
  --color-primary: var(--color-elbwalker);
  --color-primary-content: var(--color-gray-50);
  --color-secondary: var(--color-gray-700);
  --color-secondary-content: var(--color-gray-50);
  --color-base-100: var(--color-gray-900);
  --color-base-200: var(--color-gray-800);
  --color-base-300: var(--color-gray-700);
  --color-base-content: var(--color-gray-50);
  --ifm-background-color: var(--color-base-100);
  --ifm-background-surface-color: var(--color-base-100);
}

/* Explorer Component Theme Integration */
:root {
  /* Light theme explorer variables */
  --explorer-bg-primary: transparent;
  --explorer-bg-primary-opaque: #ffffff;
  --explorer-bg-secondary: rgba(248, 250, 252, 0.9);
  --explorer-bg-tertiary: rgba(241, 245, 249, 0.95);
  --explorer-text-primary: var(--color-base-content, #1f2937);
  --explorer-text-secondary: #6b7280;
  --explorer-text-muted: #9ca3af;
  --explorer-border-primary: #e5e7eb;
  --explorer-border-secondary: #d1d5db;
  --explorer-interactive-primary: var(--color-primary, #3b82f6);
  --explorer-interactive-hover: rgba(59, 130, 246, 0.1);
}

html[data-theme='dark'] {
  /* Dark theme explorer variables */
  --explorer-bg-primary: transparent;
  --explorer-bg-primary-opaque: #1f2937;
  --explorer-bg-secondary: rgba(55, 65, 81, 0.9);
  --explorer-bg-tertiary: rgba(75, 85, 99, 0.95);
  --explorer-text-primary: var(--color-base-content, #f3f4f6);
  --explorer-text-secondary: #d1d5db;
  --explorer-text-muted: #9ca3af;
  --explorer-border-primary: #374151;
  --explorer-border-secondary: #4b5563;
  --explorer-interactive-primary: var(--color-primary, #3b82f6);
  --explorer-interactive-hover: rgba(59, 130, 246, 0.2);
}

@theme {
  --color-elbwalker: var(--color-elbwalker);
}

/* Base styles */
a {
  color: var(--color-primary);
}

svg {
  display: inline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-primary);
}

.scroll .code-editor pre,
.scroll .code-editor textarea {
  white-space: pre !important;
  overflow: auto !important;
  width: 200% !important;
}

/* Override text colors */
@layer base {
  .text-black {
    color: var(--color-base-content) !important;
  }

  .text-white {
    color: var(--color-white) !important;
  }

  [data-theme='dark'] .dark\:text-white {
    color: var(--color-base-content) !important;
  }

  [data-theme='dark'] {
    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
  }
  /* Restore default list styling for Markdown content */
  .markdown ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    padding-left: 1rem;
  }

  .markdown ol {
    list-style-type: decimal;
    margin-left: 1.5rem;
    padding-left: 1rem;
  }

  .markdown li {
    margin: 0.5em 0;
  }
}
