:root {
  /* logo */
  --header-logo-image: url('/env/images/cobraside_logo.png');
  --header-logo-width: 13vw;

  /* font sizes */
  --base-size: 16px;
  --type-scale: 1.2;
}

[data-theme] body {
    background-image: none;
}

/* DaisyUI custom theme */
:root:has(input.theme-controller[value=cobraside]:checked),
[data-theme="cobraside"] {
  color-scheme: dark;

  /* base (dark) - ordered from darkest to lightest */
  --color-base-100: #111111;
  --color-base-150: #1d1b1c;
  --color-base-200: #333333;
  --color-base-250: #454545;
  --color-base-300: #555555;
  --color-base-400: #777777;
  --color-base-500: #999999;
  --color-base-600: #bbbbbb;
  --color-base-content: #f1f1f1;

  /* brand */
  --color-primary: #FFD700;            /* yellow */
  --color-primary-content: #111111;
  --color-secondary: #777777;
  --color-secondary-content: #f1f1f1;
  --color-accent: oklch(60% 0.2 300);            /* complementary electric purple */
  --color-accent-content: var(--color-primary); /* gold on purple */
  --color-neutral: #999999;
  --color-neutral-content: #f1f1f1;

  /* status colors - refined for cobraside dark/gold aesthetic */
  --color-info: oklch(65% 0.15 250);             /* cobalt blue */
  --color-info-content: #f1f1f1;
  --color-success: oklch(65% 0.18 150);          /* emerald green */
  --color-success-content: #f1f1f1;
  --color-warning: oklch(75% 0.15 60);           /* burnt orange */
  --color-warning-content: #111111;
  --color-error: oklch(60% 0.2 30);              /* ruby red */
  --color-error-content: #f1f1f1;

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

  /* Component Scoped Variables */
  --color-flux-nav-bg: var(--color-base-150);
  --color-flux-nav-content: var(--color-base-content);
  --color-flux-popover-bg: var(--color-base-150);
  --color-flux-popover-content: var(--color-base-content);

  /* Variant Hooks */
  --flux-variant-primary-bg: var(--color-primary);
  --flux-variant-primary-content: var(--color-primary-content);
  --flux-variant-secondary-bg: var(--color-secondary);
  --flux-variant-secondary-content: var(--color-secondary-content);
  --flux-variant-neutral-bg: var(--color-neutral);
  --flux-variant-neutral-content: var(--color-neutral-content);
  --flux-variant-elevated-bg: var(--color-base-200);
  --flux-variant-elevated-content: var(--color-base-content);

  /* fonts */
  --default-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* DaisyUI theme background for cobraside */
[data-theme="cobraside"] body {
  background-color: var(--color-base-100);
  font-family: var(--default-font-family);
}

/* Ensure logo image is visible in navbar and properly sized */
.navbar img {
  display: block;
  opacity: 1;
  height: 3rem !important;
  width: auto;
  object-fit: contain;
}

/* Prevent navbar from becoming too tall */
.navbar {
  min-height: 4rem !important;
  height: 4rem !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Headings and titles: Zalando Sans SemiExpanded for cobraside */
[data-theme="cobraside"] h1,
[data-theme="cobraside"] h2,
[data-theme="cobraside"] h3,
[data-theme="cobraside"] h4,
[data-theme="cobraside"] h5,
[data-theme="cobraside"] h6 {
  font-family: 'Zalando Sans SemiExpanded', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Navbar menu: white text, yellow hover */
[data-theme="cobraside"] .navbar .menu :where(li>a,
li>button,
li>span){
  color: var(--color-base-content);
  font-family: 'Zalando Sans SemiExpanded', sans-serif;
  font-weight: 600;
}
[data-theme="cobraside"] .navbar .menu :where(li>a:hover,
li>a:focus,
li>button:hover,
li>button:focus,
li>span:hover,
li>span:focus){
  color: var(--color-primary);
  background-color: transparent;
}

/* Headings */
[data-theme="cobraside"] h1,
[data-theme="cobraside"] h2,
[data-theme="cobraside"] h3,
[data-theme="cobraside"] h4{
  color: var(--color-base-content);
}

/* Buttons (cobraside): remove white borders by default; show on hover/focus */
[data-theme="cobraside"] .btn {
  border-color: transparent !important;
  font-family: 'Zalando Sans SemiExpanded', sans-serif;
  font-weight: 600;
  /* Ensure default DaisyUI padding is preserved */
  padding-inline: var(--btn-p, 1rem);
}
[data-theme="cobraside"] .btn:hover,
[data-theme="cobraside"] .btn:focus {
  border-color: var(--color-base-content) !important;
}

/* Primary buttons (cobraside): ensure yellow background */
[data-theme="cobraside"] .btn-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
  border-color: var(--color-primary) !important;
}
[data-theme="cobraside"] .btn-primary:hover:not(:disabled):not(.btn-disabled) {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
  opacity: 0.9;
}
[data-theme="cobraside"] .btn-primary:focus:not(:disabled):not(.btn-disabled) {
  background-color: var(--color-primary) !important;
  color: var(--color-primary-content) !important;
  outline-color: var(--color-primary);
}

/* Custom base color utility classes for cobraside */
[data-theme="cobraside"] .bg-base-400 {
  background-color: var(--color-base-400) !important;
}
[data-theme="cobraside"] .bg-base-500 {
  background-color: var(--color-base-500) !important;
}
[data-theme="cobraside"] .bg-base-600 {
  background-color: var(--color-base-600) !important;
}
[data-theme="cobraside"] .hover\:bg-base-300:hover {
  background-color: var(--color-base-300) !important;
}
[data-theme="cobraside"] .divide-base-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--color-base-200) !important;
}