/*
 * Theme variables for X1Techs Child.
 * Use these tokens in your custom styles and Elementor CSS.
 */

:root {
	--font-family-base: "Inter Tight", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Shared semantic tokens */
	--color-black: rgb(0, 0, 0);
	--color-white: rgb(255, 255, 255);
	--color-brand-green: rgb(5, 150, 105);
	--color-brand-green-bright: rgb(16, 185, 129);

	/* Dark palette */
	--color-dark-surface: rgb(18, 18, 18);
	--color-dark-surface-2: rgb(15, 15, 15);
	--color-dark-panel: rgb(26, 35, 36);
	--color-dark-glass-1:rgba(0, 0, 0, 0.1);


	/* Light palette */
	--color-light-ink: rgb(34, 47, 48);
	--color-light-bg: rgb(236, 243, 239);

	/* Typography scale - mobile first */
	--font-size-h1: 2.25rem;
	--font-size-h2: 1.875rem;
	--font-size-h3: 1.5rem;
	--font-size-h4: 1.25rem;
	--font-size-h5: 1.125rem;
	--font-size-h6: 1rem;
	--font-size-p: 1rem;

	--line-height-heading: 1.2;
	--line-height-body: 1.6;
}

/* Desktop/laptop scale */
@media (min-width: 1024px) {
	:root {
		--font-size-h1: 3.25rem;
		--font-size-h2: 2.5rem;
		--font-size-h3: 2rem;
		--font-size-h4: 1.5rem;
		--font-size-h5: 1.25rem;
		--font-size-h6: 1.125rem;
		--font-size-p: 1rem;
	}
}

/* Dark mode defaults */
.dark,
:root.dark {
	--color-bg: var(--color-dark-surface);
	--color-bg-alt: var(--color-dark-surface-2);
	--color-text: var(--color-white);
	--color-text-muted: rgb(201, 212, 208);
	--color-surface: var(--color-dark-panel);
	--color-accent: var(--color-brand-green-bright);
	--color-accent-alt: var(--color-brand-green);
}

@media (prefers-color-scheme: dark) {
	:root:not(.light):not(.dark) {
		--color-bg: var(--color-dark-surface);
		--color-bg-alt: var(--color-dark-surface-2);
		--color-text: var(--color-white);
		--color-text-muted: rgb(201, 212, 208);
		--color-surface: var(--color-dark-panel);
		--color-accent: var(--color-brand-green-bright);
		--color-accent-alt: var(--color-brand-green);
	}
}

/* Light mode variables */
.light,
:root.light {
	--color-bg: var(--color-light-bg);
	--color-bg-alt: rgb(255, 255, 255);
	--color-text: var(--color-light-ink);
	--color-text-muted: rgb(74, 97, 99);
	--color-surface: rgb(255, 255, 255);
	--color-accent: var(--color-brand-green);
	--color-accent-alt: var(--color-brand-green-bright);
}

@media (prefers-color-scheme: light) {
	:root:not(.light):not(.dark) {
		--color-bg: var(--color-light-bg);
		--color-bg-alt: rgb(255, 255, 255);
		--color-text: var(--color-light-ink);
		--color-text-muted: rgb(74, 97, 99);
		--color-surface: rgb(255, 255, 255);
		--color-accent: var(--color-brand-green);
		--color-accent-alt: var(--color-brand-green-bright);
	}
}