<script lang="ts">
	export type CSSVariableName =
		| 'colour-background'
		| 'colour-white'
		| 'colour-black'
		| 'colour-contrast'
		| 'colour-primary'
		| 'colour-secondary'
		| 'colour-success'
		| 'colour-error'
		| 'colour-emphasis'
		| 'colour-concrete'
		| 'colour-brick'
		| 'colour-steel'
		| 'colour-neon'
		| 'colour-mustard'
		| 'colour-pastel'
		| 'colour-slate';

	type Overrides = {
		[key in CSSVariableName]?: string;
	};

	export type Props = {
		'no-reset'?: boolean;
	} & Overrides;

	const { 'no-reset': noReset, ...props }: Props = $props();
</script>

<svelte:head>
	{#if !noReset}
		<style id="barbi-reset">
			*,
			*::before,
			*::after {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-family: var(--font-family-heading);
				font-weight: bold;
				text-transform: uppercase;
			}

			h1 {
				font-size: var(--font-size-h1);
			}
			h2 {
				font-size: var(--font-size-h2);
			}
			h3 {
				font-size: var(--font-size-h3);
			}
			h4 {
				font-size: var(--font-size-h4);
			}

			button {
          font-family: var(--font-family-body);
          font-size: var(--font-size-base);
          color: var(--colour-text);
          line-height: 1.25;
			}

			/* Set core body defaults */
			body {
				font-family: var(--font-family-body);
				font-size: var(--font-size-base);
				color: var(--colour-text);
				background-color: var(--colour-background);
				line-height: 1.25;
			}
		</style>
	{/if}

	{@html `
		<style id="barbi-theme">
				:root {
					/* Primary Colours */
          --colour-primary: ${props['colour-primary'] ?? '#4ecdc4'};
          --colour-secondary: ${props['colour-secondary'] ?? '#ffd93d'};
          --colour-success: ${props['colour-success'] ?? '#6bff8c'};
          --colour-error: ${props['colour-error'] ?? '#ff6b6b'};
          --colour-emphasis: ${props['colour-emphasis'] ?? '#b967ff'};

					/* Shades */
          --colour-white: ${props['colour-white'] ?? '#ffffff'};
          --colour-background: ${props['colour-background'] ?? '#f0f0f0'};
          --colour-concrete: ${props['colour-concrete'] ?? '#c2c2c2'};
          --colour-steel: ${props['colour-steel'] ?? '#7f8c8d'};
          --colour-slate: ${props['colour-slate'] ?? '#34495e'};
          --colour-contrast: ${props['colour-contrast'] ?? '#1a1a1a'};
          --colour-black: ${props['colour-black'] ?? '#000000'};

          /* Alternate Colours */
          --colour-brick: ${props['colour-brick'] ?? '#e74c3c'};
          --colour-neon: ${props['colour-neon'] ?? '#39ff14'};
          --colour-mustard: ${props['colour-mustard'] ?? '#f39c12'};
          --colour-pastel: ${props['colour-pastel'] ?? '#fdcb6e'};

					--colour-text: var(--colour-contrast);
					--colour-shadow: var(--colour-contrast);

					--pattern-light: var(--colour-background);
					--pattern-dark: var(--colour-steel);

					--colour-button: var(--colour-primary);
					--colour-button-active: var(--colour-secondary);
					--colour-button-icon: var(--colour-contrast);
					--colour-button-icon-active: var(--colour-primary);

					/* Typography */
					--font-family-heading: "Arial Black", "Helvetica", sans-serif;
					--font-family-body: "Courier New", monospace;
					--font-size-base: 16px;
					--font-size-h1: 3rem;
					--font-size-h2: 2.5rem;
					--font-size-h3: 2rem;
					--font-size-h4: 1.5rem;
					--font-size-small: 0.875rem;

					/* Spacing */
					--spacing-xs: 0.25rem;
					--spacing-sm: 0.5rem;
					--spacing-md: 1rem;
					--spacing-lg: 2rem;
					--spacing-xl: 4rem;

					/* Shadows */
					--shadow-sm: 3px 3px 0 var(--colour-shadow);
					--shadow-md: 5px 5px 0 var(--colour-shadow);
					--shadow-lg: 8px 8px 0 var(--colour-shadow);

					/* Transitions */
					--transition-fast: 0.2s ease;
					--transition-medium: 0.3s ease;
					--transition-slow: 0.5s ease;

					/* Border */
					--border-width: 3px;
					--border-style: solid;
					--border-colour: var(--colour-contrast);

					/* Gradients */
					--gradient-hsl: linear-gradient(to right,
						hsl(0deg, 100%, 50%),
						hsl(60deg, 100%, 50%),
						hsl(120deg, 100%, 50%),
						hsl(180deg, 100%, 50%),
						hsl(240deg, 100%, 50%),
						hsl(300deg, 100%, 50%),
						hsl(360deg 100% 60%)
					);
				}
		</style>
	`}
</svelte:head>