/* The two daisyUI themes. Every colour derives from three variables that wwwroot/js/theme.js sets on <html> from
   PageSettings: --neo-hue-light / --neo-hue-dark (0-359) and --neo-chroma (1 for the colour themes, 0 for the grey
   ones). The fallbacks match PageSettings' defaults, so the page renders as it will before Blazor boots.

   theme.js sets data-theme="neo-light" or "neo-dark"; with PreferSystemTheming it removes data-theme, and the
   prefersdark rule picks neo-dark when the OS asks for dark.

   Plugin gotchas:
   - A top-level comma in a value is split and only the last part survives. Commas inside var()/calc() are fine,
     which is why multi-layer shadows are built in neo.css rather than stored here.
   - neo-light's :where(:root) always matches, so neo-dark must set every token neo-light sets.

   --neo-light / --neo-dark are the two neumorphic shadow colours, --neo-grad-* the gradient stops around base-100,
   --neo-strong the deeper tone used for scrollbars and selections, and --neo-lift / --neo-sink how far a
   gradient built from an arbitrary colour (a coloured .btn) moves towards white and black. */

@plugin "../tools/tailwind/daisyui-theme.mjs" {
	name: "neo-light";
	default: true;
	prefersdark: false;
	color-scheme: light;

	--neo-hue: var(--neo-hue-light, 25);
	--neo-sat: calc(84% * var(--neo-chroma, 0));

	--color-base-100: hsl(var(--neo-hue) var(--neo-sat) 88%);
	--color-base-200: hsl(var(--neo-hue) var(--neo-sat) 84%);
	--color-base-300: hsl(var(--neo-hue) var(--neo-sat) 80%);
	--color-base-content: hsl(var(--neo-hue) var(--neo-sat) 26.4%);
	--color-primary: hsl(var(--neo-hue) var(--neo-sat) 58%);
	--color-primary-content: hsl(var(--neo-hue) var(--neo-sat) 10%);
	--color-secondary: hsl(calc(var(--neo-hue) + 180) var(--neo-sat) 58%);
	--color-secondary-content: hsl(calc(var(--neo-hue) + 180) var(--neo-sat) 10%);
	--color-accent: hsl(calc(var(--neo-hue) + 90) var(--neo-sat) 58%);
	--color-accent-content: hsl(calc(var(--neo-hue) + 90) var(--neo-sat) 10%);
	--color-neutral: hsl(var(--neo-hue) calc(30% * var(--neo-chroma, 0)) 30%);
	--color-neutral-content: hsl(var(--neo-hue) var(--neo-sat) 88%);
	--color-info: hsl(196 82% 42%);
	--color-info-content: hsl(196 82% 96%);
	--color-success: hsl(140 60% 34%);
	--color-success-content: hsl(140 60% 96%);
	--color-warning: hsl(40 92% 50%);
	--color-warning-content: hsl(40 92% 12%);
	--color-error: hsl(0 72% 50%);
	--color-error-content: hsl(0 72% 97%);

	--neo-light: hsl(var(--neo-hue) var(--neo-sat) 100% / .5);
	--neo-dark: hsl(var(--neo-hue) var(--neo-sat) 66% / .5);
	--neo-grad-light: hsl(var(--neo-hue) var(--neo-sat) 92%);
	--neo-grad-dark: hsl(var(--neo-hue) var(--neo-sat) 84%);
	--neo-grad-lighter: hsl(var(--neo-hue) var(--neo-sat) 96%);
	--neo-grad-darker: hsl(var(--neo-hue) var(--neo-sat) 80%);
	--neo-strong: hsl(var(--neo-hue) var(--neo-sat) 66%);
	--neo-lift: 33%;
	--neo-sink: 5%;

	--radius-selector: 1rem;
	--radius-field: 2rem;
	--radius-box: .75rem;
	--size-selector: .25rem;
	--size-field: .25rem;
	--border: 1px;
	--depth: 0;
	--noise: 0;
}

@plugin "../tools/tailwind/daisyui-theme.mjs" {
	name: "neo-dark";
	default: false;
	prefersdark: true;
	color-scheme: dark;

	--neo-hue: var(--neo-hue-dark, 215);
	--neo-sat: calc(16% * var(--neo-chroma, 0));

	--color-base-100: hsl(var(--neo-hue) var(--neo-sat) 12%);
	--color-base-200: hsl(var(--neo-hue) var(--neo-sat) 8%);
	--color-base-300: hsl(var(--neo-hue) var(--neo-sat) 4%);
	--color-base-content: hsl(var(--neo-hue) var(--neo-sat) 73.6%);
	--color-primary: hsl(var(--neo-hue) calc(48% * var(--neo-chroma, 0)) 56%);
	--color-primary-content: hsl(var(--neo-hue) calc(48% * var(--neo-chroma, 0)) 8%);
	--color-secondary: hsl(calc(var(--neo-hue) + 180) calc(48% * var(--neo-chroma, 0)) 56%);
	--color-secondary-content: hsl(calc(var(--neo-hue) + 180) calc(48% * var(--neo-chroma, 0)) 8%);
	--color-accent: hsl(calc(var(--neo-hue) + 90) calc(48% * var(--neo-chroma, 0)) 56%);
	--color-accent-content: hsl(calc(var(--neo-hue) + 90) calc(48% * var(--neo-chroma, 0)) 8%);
	--color-neutral: hsl(var(--neo-hue) var(--neo-sat) 78%);
	--color-neutral-content: hsl(var(--neo-hue) var(--neo-sat) 12%);
	--color-info: hsl(196 62% 58%);
	--color-info-content: hsl(196 62% 10%);
	--color-success: hsl(140 46% 52%);
	--color-success-content: hsl(140 46% 9%);
	--color-warning: hsl(40 80% 58%);
	--color-warning-content: hsl(40 80% 10%);
	--color-error: hsl(0 66% 62%);
	--color-error-content: hsl(0 66% 10%);

	--neo-light: hsl(var(--neo-hue) calc(84% * var(--neo-chroma, 0)) 66% / .1);
	--neo-dark: hsl(var(--neo-hue) var(--neo-sat) 1% / .5);
	--neo-grad-light: hsl(var(--neo-hue) var(--neo-sat) 16%);
	--neo-grad-dark: hsl(var(--neo-hue) var(--neo-sat) 8%);
	--neo-grad-lighter: hsl(var(--neo-hue) var(--neo-sat) 20%);
	--neo-grad-darker: hsl(var(--neo-hue) var(--neo-sat) 4%);
	--neo-strong: hsl(var(--neo-hue) var(--neo-sat) 33%);
	--neo-lift: 5%;
	--neo-sink: 33%;

	--radius-selector: 1rem;
	--radius-field: 2rem;
	--radius-box: .75rem;
	--size-selector: .25rem;
	--size-field: .25rem;
	--border: 1px;
	--depth: 0;
	--noise: 0;
}