import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';

export const vinTheme: CustomThemeConfig = {
    name: 'vin-theme',
    properties: {
		// =~= Theme Properties =~=
		"--theme-font-family-base": `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
		"--theme-font-family-heading": `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
		"--theme-font-color-base": "var(--color-surface-500)",
		"--theme-font-color-dark": "var(--color-surface-50)",
		"--theme-rounded-base": "12px",
		"--theme-rounded-container": "12px",
		"--theme-border-base": "0px",
		// =~= Theme On-X Colors =~=
		"--on-primary": "var(--color-surface-500)",
		"--on-secondary": "var(--color-surface-500)",
		"--on-tertiary": "var(--color-surface-500)",
		"--on-success": "var(--color-surface-500)",
		"--on-warning": "var(--color-surface-500)",
		"--on-error": "var(--color-surface-500)",
		"--on-surface": "var(--color-surface-50)",
		// =~= Theme Colors  =~=
		// primary | #7DE8B2 
		"--color-primary-50": "236 252 243", // #ecfcf3
		"--color-primary-100": "229 250 240", // #e5faf0
		"--color-primary-200": "223 249 236", // #dff9ec
		"--color-primary-300": "203 246 224", // #cbf6e0
		"--color-primary-400": "164 239 201", // #a4efc9
		"--color-primary-500": "125 232 178", // #7DE8B2
		"--color-primary-600": "113 209 160", // #71d1a0
		"--color-primary-700": "94 174 134", // #5eae86
		"--color-primary-800": "75 139 107", // #4b8b6b
		"--color-primary-900": "61 114 87", // #3d7257
		// secondary | #7DE8E8 
		"--color-secondary-50": "236 252 252", // #ecfcfc
		"--color-secondary-100": "229 250 250", // #e5fafa
		"--color-secondary-200": "223 249 249", // #dff9f9
		"--color-secondary-300": "203 246 246", // #cbf6f6
		"--color-secondary-400": "164 239 239", // #a4efef
		"--color-secondary-500": "125 232 232", // #7DE8E8
		"--color-secondary-600": "113 209 209", // #71d1d1
		"--color-secondary-700": "94 174 174", // #5eaeae
		"--color-secondary-800": "75 139 139", // #4b8b8b
		"--color-secondary-900": "61 114 114", // #3d7272
		// tertiary | #7D7DE8 
		"--color-tertiary-50": "236 236 252", // #ececfc
		"--color-tertiary-100": "229 229 250", // #e5e5fa
		"--color-tertiary-200": "223 223 249", // #dfdff9
		"--color-tertiary-300": "203 203 246", // #cbcbf6
		"--color-tertiary-400": "164 164 239", // #a4a4ef
		"--color-tertiary-500": "125 125 232", // #7D7DE8
		"--color-tertiary-600": "113 113 209", // #7171d1
		"--color-tertiary-700": "94 94 174", // #5e5eae
		"--color-tertiary-800": "75 75 139", // #4b4b8b
		"--color-tertiary-900": "61 61 114", // #3d3d72
		// success | #7DE8B2 
		"--color-success-50": "236 252 243", // #ecfcf3
		"--color-success-100": "229 250 240", // #e5faf0
		"--color-success-200": "223 249 236", // #dff9ec
		"--color-success-300": "203 246 224", // #cbf6e0
		"--color-success-400": "164 239 201", // #a4efc9
		"--color-success-500": "125 232 178", // #7DE8B2
		"--color-success-600": "113 209 160", // #71d1a0
		"--color-success-700": "94 174 134", // #5eae86
		"--color-success-800": "75 139 107", // #4b8b6b
		"--color-success-900": "61 114 87", // #3d7257
		// warning | #E8D67D 
		"--color-warning-50": "252 249 236", // #fcf9ec
		"--color-warning-100": "250 247 229", // #faf7e5
		"--color-warning-200": "249 245 223", // #f9f5df
		"--color-warning-300": "246 239 203", // #f6efcb
		"--color-warning-400": "239 226 164", // #efe2a4
		"--color-warning-500": "232 214 125", // #E8D67D
		"--color-warning-600": "209 193 113", // #d1c171
		"--color-warning-700": "174 161 94", // #aea15e
		"--color-warning-800": "139 128 75", // #8b804b
		"--color-warning-900": "114 105 61", // #72693d
		// error | #E87D7D 
		"--color-error-50": "252 236 236", // #fcecec
		"--color-error-100": "250 229 229", // #fae5e5
		"--color-error-200": "249 223 223", // #f9dfdf
		"--color-error-300": "246 203 203", // #f6cbcb
		"--color-error-400": "239 164 164", // #efa4a4
		"--color-error-500": "232 125 125", // #E87D7D
		"--color-error-600": "209 113 113", // #d17171
		"--color-error-700": "174 94 94", // #ae5e5e
		"--color-error-800": "139 75 75", // #8b4b4b
		"--color-error-900": "114 61 61", // #723d3d
		// surface | #1A1A1A 
		"--color-surface-50": "221 221 221", // #dddddd
		"--color-surface-100": "209 209 209", // #d1d1d1
		"--color-surface-200": "198 198 198", // #c6c6c6
		"--color-surface-300": "163 163 163", // #a3a3a3
		"--color-surface-400": "95 95 95", // #5f5f5f
		"--color-surface-500": "26 26 26", // #1A1A1A
		"--color-surface-600": "23 23 23", // #171717
		"--color-surface-700": "20 20 20", // #141414
		"--color-surface-800": "16 16 16", // #101010
		"--color-surface-900": "13 13 13", // #0d0d0d
		
	}
}