/**
 * FCA Theme Custom Styles
 * Modern blog design with clean typography and layouts
 */

/* ============================================
   Dark Mode CSS Variables & Theme Switch
   ============================================ */

:root {
	/* ============================================
	   Spacing Tokens (aliases for WP presets)
	   ============================================ */
	--fca-space-2xs: 0.25rem;    /* Extra small gaps */
	--fca-space-xs: 0.5rem;      /* = --wp--preset--spacing--10 */
	--fca-space-sm: 0.75rem;     /* Between xs and md */
	--fca-space-md: 1rem;        /* = --wp--preset--spacing--20 */
	--fca-space-lg: 1.5rem;      /* = --wp--preset--spacing--30 */
	--fca-space-xl: 2rem;        /* = --wp--preset--spacing--40 */
	--fca-space-2xl: 3rem;       /* = --wp--preset--spacing--50 */
	--fca-space-3xl: 4rem;       /* = --wp--preset--spacing--60 */

	/* ============================================
	   Border Radius Tokens
	   ============================================ */
	--fca-radius-xs: 0.25rem;    /* Small badges, inline code */
	--fca-radius-sm: 0.375rem;   /* Small buttons, inputs */
	--fca-radius-md: 0.5rem;     /* Cards, inputs, thumbnails */
	--fca-radius-lg: 0.75rem;    /* Large cards, modals, dropdowns */
	--fca-radius-pill: 9999px;   /* Pills, badges, full-rounded buttons */
	--fca-radius-circle: 50%;    /* Avatars, circular elements */

	/* ============================================
	   Light theme colors (default)
	   ============================================ */
	--fca-bg-primary: #ffffff;
	--fca-bg-secondary: #f5f5f5;
	--fca-text-primary: #111111;
	--fca-text-secondary: #4a4a4a;
	--fca-border-color: #e5e5e5;
	--fca-code-bg: #1e1e2e;
	--fca-code-text: #cdd6f4;
	--fca-inline-code-bg: #f9f2f4;
	--fca-inline-code-text: #c7254e;
	--fca-shadow-color: rgba(0, 0, 0, 0.1);
	--fca-alert-info-bg: #e7f3ff;
	--fca-alert-info-border: #2196f3;
	--fca-alert-info-text: #0d47a1;
	--fca-alert-success-bg: #e8f5e9;
	--fca-alert-success-border: #4caf50;
	--fca-alert-success-text: #1b5e20;
	--fca-alert-warning-bg: #fff8e1;
	--fca-alert-warning-border: #ff9800;
	--fca-alert-warning-text: #e65100;
	--fca-alert-danger-bg: #ffebee;
	--fca-alert-danger-border: #f44336;
	--fca-alert-danger-text: #b71c1c;
}

/* Dark theme colors */
[data-theme="dark"] {
	--fca-bg-primary: #0a0a0a;
	--fca-bg-secondary: #1a1a1a;
	--fca-text-primary: #f5f5f5;
	--fca-text-secondary: #b8b8b8;
	--fca-border-color: #333333;
	--fca-code-bg: #0d0d0d;
	--fca-code-text: #cdd6f4;
	--fca-inline-code-bg: #2a2a2a;
	--fca-inline-code-text: #f5a0b0;
	--fca-shadow-color: rgba(0, 0, 0, 0.4);
	--fca-alert-info-bg: #0d2137;
	--fca-alert-info-border: #2196f3;
	--fca-alert-info-text: #90caf9;
	--fca-alert-success-bg: #0d2818;
	--fca-alert-success-border: #4caf50;
	--fca-alert-success-text: #a5d6a7;
	--fca-alert-warning-bg: #2e2200;
	--fca-alert-warning-border: #ff9800;
	--fca-alert-warning-text: #ffcc80;
	--fca-alert-danger-bg: #2d0a0a;
	--fca-alert-danger-border: #f44336;
	--fca-alert-danger-text: #ef9a9a;
}

/* Override WordPress preset colors in dark mode */
[data-theme="dark"] {
	--wp--preset--color--base: #0a0a0a;
	--wp--preset--color--base-2: #1a1a1a;
	--wp--preset--color--contrast: #f5f5f5;
	--wp--preset--color--contrast-2: #b8b8b8;
	--wp--preset--color--contrast-3: #333333;
}

/* Base body styles for theme */
body {
	background-color: var(--fca-bg-primary);
	color: var(--fca-text-primary);
	transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] body,
[data-theme="dark"] .has-base-background-color {
	background-color: var(--fca-bg-primary) !important;
	color: var(--fca-text-primary);
}

[data-theme="dark"] .has-base-2-background-color {
	background-color: var(--fca-bg-secondary) !important;
}

[data-theme="dark"] .has-contrast-color {
	color: var(--fca-text-primary) !important;
}

[data-theme="dark"] .has-contrast-2-color {
	color: var(--fca-text-secondary) !important;
}

/* Dark mode separator */
[data-theme="dark"] .wp-block-separator {
	background-color: var(--fca-border-color) !important;
	color: var(--fca-border-color) !important;
}