@plugin "daisyui" {
  exclude: rootscrollgutter;
}

/* Note: DaisyUI uses @property at-rule which triggers a harmless warning
   in Tailwind CSS v4's optimizer. This is a known compatibility issue and
   does not affect functionality. The CSS compiles successfully and browsers
   that support @property will process it correctly.
   
   This warning can be safely ignored - it's expected behavior with DaisyUI + Tailwind CSS v4.
   The warning appears during CSS optimization but does not impact the final output. */

/* ========================================
   🎨 CONFIGURE TEMPLATE COLORS
   ========================================
   This is the main file for configuring all the template colors.
   Modify the CSS variables below to change the look of the application.
   ======================================== */

/* Theme 1: Light */


@plugin "daisyui/theme" {
  name: "light";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: #ffffff;
  --color-base-200: #f8f5fa;
  --color-base-300: oklch(94% 0.029 294.588);
  --color-base-content: oklch(20% 0 0);
  --color-primary: #240046;
  --color-primary-content: oklch(98% 0.003 247.858);
  --color-secondary: #b9b1ff;
  --color-secondary-content: oklch(38% 0.189 293.745);
  --color-accent: #d1de54;
  --color-accent-content: #212121;
  --color-neutral: #F9f5e9;
  --color-neutral-content: #212121;
  --color-info: #efe8f8;
  --color-info-content: oklch(38% 0.176 304.987);
  --color-success: oklch(93% 0.127 124.321);
  --color-success-content: #212121;
  --color-warning: oklch(94% 0.129 101.54);
  --color-warning-content: #212121;
  --color-error: #ff6266;
  --color-error-content: oklch(97% 0.014 343.198);
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 2px;
  --depth: 0;
  --noise: 1;
}






/* Global variables - defined outside theme so they work with any DaisyUI theme */
/* These variables reference the current theme's properties, so they adapt automatically when theme changes */
:root {
  /* Global background variables */
  --root-bg: var(--color-base-200);
  --root-text-color: var(--color-base-content);

  /* Card border width - uses theme's --border variable */
  /* This is NOT a DaisyUI standard variable, so it's defined globally */
  --card-border-width: var(--border);

  /* Tooltip styling - uses theme colors for consistency */
  --tooltip-color: var(--color-neutral);
  --tooltip-content: var(--color-neutral-content);

  --border: 1.5px;
  /* Text size variables */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.375rem;
  --text-3xl: 1.5rem;
  --text-4xl: 1.75rem;
  --text-5xl: 2rem;
  --text-6xl: 2.25rem;
  --text-7xl: 2.5rem;
  --text-8xl: 2.75rem;
  --text-9xl: 3rem;
  --text-10xl: 3.25rem;

  --shadow-sm: 0 1px 2px 1px rgba(0, 0, 0, 0.05);

  /* Input bordered customization */
  --input-color: var(--color-base-300);
  --input-border-color: var(--color-base-300);
  --input-border-width: var(--border, 0.5px);
  --input-border-radius: var(--radius-field, 0.5rem);
  --input-focus-border-color: var(--color-secondary);
  --input-focus-ring-color: var(--color-secondary);
  --input-focus-ring-opacity: 0.2;

  --select-border-color: var(--color-base-300);
  --select-border-width: var(--border, 0.5px);
  --select-border-radius: var(--radius-field, 0.5rem);
  --select-focus-border-color: var(--color-secondary);
  --select-focus-ring-color: var(--color-secondary);
  --select-focus-ring-opacity: 0.2;

}

/* SVG theme-aware styling - adapts to selected theme, not system preferences */
/* Light theme: SVG should be dark (brightness-0 makes them black) */
/* Dark theme: SVG should be light (brightness-0 + invert makes them white) */
.theme-aware-svg {
  filter: brightness(0);
}

html[data-theme="dark"] .theme-aware-svg {
  filter: brightness(0) invert(1);
}

.input:focus,
.input:focus-within {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 1px var(--color-secondary);
  outline: 1px solid var(--color-secondary);
  outline-offset: 2px;
}

.select:focus,
.select:focus-within {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 1px var(--color-secondary);
  outline: 1px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Card styles are defined in core/card-theme.css (imported after all plugins) */
/* This ensures card styles have priority over any DaisyUI-generated rules */
/* All card styling uses DaisyUI theme variables for easy theme customization */