/* Import Inter Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* WordPress Admin Overrides */
#wpcontent {
	padding-left: 0 !important;
}

.wp-menu-image.dashicons-before img {
	display: inline-block;
}

#wpbody-content input[type="checkbox"]:checked::before,
#wpbody-content input[type="radio"]:checked::before {
	display: none;
}

/* Tailwind Directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* OpenAsset Design System - CSS Variables */
@layer base {
	:root {
		/* Legacy support */
		--openasset__color-background: #fff;
		
		/* === OpenAsset Design Tokens === */
		
		/* Primary Brand Colors */
		--oa-color-accent: #2563eb;
		--oa-color-accent-hover: #1d4ed8;
		--oa-color-accent-active: #1e40af;
		--oa-color-primary: #2563eb;
		--oa-color-primary-hover: #1d4ed8;
		--oa-color-primary-active: #1e40af;
		--oa-color-brand-secondary: #1e40af;
		--oa-color-brand-tertiary: #2563eb;
		
		/* Text Colors */
		--oa-text-primary: #0a0d12;
		--oa-text-secondary: #414651;
		--oa-text-tertiary: #535862;
		--oa-text-quaternary: #717680;
		--oa-text-placeholder: #717680;
		--oa-text-white: #ffffff;
		
		/* Background Colors */
		--oa-bg-primary: #ffffff;
		--oa-bg-primary-solid: #0a0d12;
		--oa-bg-secondary: #fafafa;
		
		/* Border Colors */
		--oa-border-primary: #d5d7da;
		--oa-border-secondary: #e9eaeb;
		--oa-border-brand: #2563eb;
		
		/* Button Colors */
		--oa-button-primary-bg: #2563eb;
		--oa-button-primary-fg: #ffffff;
		--oa-button-secondary-bg: #ffffff;
		--oa-button-secondary-fg: #414651;
		--oa-button-secondary-border: #d5d7da;
		--oa-button-tertiary-fg: #535862;
		
		/* Utility Colors */
		--oa-utility-brand-50: #eff6ff;
		--oa-utility-brand-200: #bfdbfe;
		--oa-utility-brand-700: #1e40af;
		--oa-utility-gray-50: #fafafa;
		--oa-utility-gray-200: #e9eaeb;
		--oa-utility-gray-700: #414651;
		
		/* Tooltip Colors */
		--oa-tooltip-bg: #0a0d12;
		--oa-tooltip-text: #ffffff;
		--oa-tooltip-supporting-text: #d5d7da;
		
		/* Spacing */
		--oa-spacing-xxs: 2px;
		--oa-spacing-xs: 4px;
		--oa-spacing-sm: 6px;
		--oa-spacing-md: 8px;
		--oa-spacing-lg: 12px;
		--oa-spacing-xl: 16px;
		--oa-spacing-2xl: 20px;
		--oa-spacing-3xl: 24px;
		--oa-spacing-4xl: 32px;
		
		/* Border Radius */
		--oa-radius-sm: 4px;
		--oa-radius-md: 8px;
		--oa-radius-lg: 12px;
		--oa-radius-xl: 16px;
		--oa-radius-full: 9999px;
		
		/* Font Sizes */
		--oa-font-size-xs: 12px;
		--oa-font-size-sm: 14px;
		--oa-font-size-md: 16px;
		--oa-font-size-lg: 18px;
		--oa-font-size-xl: 20px;
		
		/* Line Heights */
		--oa-line-height-xs: 18px;
		--oa-line-height-sm: 20px;
		--oa-line-height-md: 24px;
		--oa-line-height-lg: 28px;
		--oa-line-height-xl: 30px;
		
		/* Font Weights */
		--oa-font-weight-regular: 400;
		--oa-font-weight-medium: 500;
		--oa-font-weight-semibold: 600;
		--oa-font-weight-bold: 700;
		
		/* Shadows */
		--oa-shadow-xs: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
		--oa-shadow-sm: 0px 1px 3px 0px rgba(10, 13, 18, 0.1), 0px 1px 2px 0px rgba(10, 13, 18, 0.06);
		--oa-shadow-md: 0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -1px rgba(10, 13, 18, 0.06);
		--oa-shadow-lg: 0px 10px 15px -3px rgba(10, 13, 18, 0.1), 0px 4px 6px -2px rgba(10, 13, 18, 0.05);
		--oa-shadow-button: 0px 1px 2px 0px rgba(10, 13, 18, 0.05), inset 0px -2px 0px 0px rgba(10, 13, 18, 0.05), inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18);
		
		/* Transitions */
		--oa-transition-fast: 150ms ease-in-out;
		--oa-transition-base: 200ms ease-in-out;
		--oa-transition-slow: 300ms ease-in-out;
		
		/* Z-Index */
		--oa-z-base: 0;
		--oa-z-dropdown: 10;
		--oa-z-sticky: 20;
		--oa-z-fixed: 30;
		--oa-z-modal-backdrop: 40;
		--oa-z-modal: 50;
		--oa-z-popover: 60;
		--oa-z-toast: 70;
	}
	
	/* Apply Inter font globally */
	body {
		font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
		background: var(--openasset__color-background);
	}
}

/* Custom Component Styles */
@layer components {
	/* Checkbox & Radio Overrides */
	[type="checkbox"],
	[type="radio"] {
		border-color: #D5D7DA !important;
	}
	
	[type="checkbox"]:checked {
		background-color: var(--oa-color-accent);
		border-color: var(--oa-color-accent) !important;
		background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
	}

	[type="checkbox"]:checked:hover,
	[type="checkbox"]:checked:focus {
		background-color: var(--oa-color-accent);
		border-color: var(--oa-color-accent);
	}

	[type="radio"]:checked {
		background-color: var(--oa-color-accent);
		border-color: var(--oa-color-accent) !important;
		background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
	}

	[type="radio"]:checked:hover,
	[type="radio"]:checked:focus {
		background-color: var(--oa-color-accent);
		border-color: var(--oa-color-accent);
	}

	[type="checkbox"],
	[type="radio"] {
		@apply focus:ring-2 focus:ring-offset-2;
		--tw-ring-color: var(--oa-color-accent);
	}
	
	/* White ring between checkbox and focus ring */
	[type="checkbox"]:focus,
	[type="radio"]:focus {
		box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--oa-color-accent);
	}
	
	/* Focus States - Apply to all interactive elements */
	button:focus-visible,
	a:focus-visible,
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible {
		outline: 2px solid var(--oa-color-primary);
		outline-offset: 2px;
	}
	
	/* Remove focus styles from navigation links */
	nav a:focus,
	nav a:focus-visible {
		outline: none !important;
		box-shadow: none !important;
	}
	
	/* Input focus state */
	input:focus,
	select:focus,
	textarea:focus {
		border-color: var(--oa-border-brand);
		ring: 0;
	}
	
	/* Override Tailwind's default ring color */
	* {
		--tw-ring-color: #d5d7da;
	}
}