/*
Theme Name: ToolsHub
Theme URI: https://toolshub.local
Author: ToolsHub Team
Author URI: https://toolshub.local
Description: A modern, high-performance, SaaS-inspired WordPress theme dedicated to QR code and Barcode utilities.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: toolshub
Tags: tools, qr-code, barcode, responsive-layout, accessibility-ready, custom-colors
*/

/* ==========================================================================
   CSS CUSTOM PROPERTIES / DESIGN TOKENS
   ========================================================================== */
:root {
	color-scheme: light dark;

	/* === Brand Color Palette (SaaS Inspiration) === */
	--primary: #0a1628;          /* Deep Navy - Hero & Dark Sections */
	--primary-dark: #050d1f;     /* Darker Navy - Footer & Root Contrast */
	--primary-light: #162a4a;    /* Card Surface on Dark Backgrounds */
	--primary-subtle: #1e3a66;   /* Borders on Dark Surfaces */

	--accent: #3b6cf6;           /* Electric Blue - Primary Actions & Highlights */
	--accent-hover: #2554e0;     /* Electric Blue Hover */
	--accent-active: #1d42be;    /* Electric Blue Active/Press */
	--accent-subtle: #eef3ff;    /* Soft Tint for Badges & Light Accents */
	--accent-glow: rgba(59, 108, 246, 0.35);

	/* === Neutral & Surface System (Default Light Mode) === */
	--text: #1a2233;             /* High contrast dark body text */
	--text-secondary: #5a6882;   /* Subtle text on light surfaces */
	--text-muted: #8c9bb3;       /* Muted text and disabled states */
	--text-on-dark: #ffffff;     /* Pure white for dark sections */
	--text-muted-dark: #98a9c7;  /* Secondary text on dark sections */

	--background: #ffffff;       /* Pure white page background */
	--surface: #f8fafc;          /* Off-white section background */
	--surface-alt: #f1f5f9;      /* Alt card background */
	--surface-card: #ffffff;     /* Elevated card background */
	--border: #e2e8f0;           /* Clean soft border on light */
	--border-light: #edf2f7;     /* Extra subtle border */
	--border-dark: #1e2d4a;      /* Subtle border on navy */

	/* Header & Switch Tokens */
	--header-bg: #0a1628;
	--header-border: #1e2d4a;
	--header-text: #ffffff;
	--header-toggle-track: #162a4a;
	--header-toggle-border: #1e3a66;
	--header-toggle-thumb: #ffffff;

	/* Tool & Form Tokens */
	--input-bg: #ffffff;
	--input-text: #1a2233;
	--input-border: #cbd5e1;
	--tool-panel-bg: #ffffff;
	--tool-preview-bg: #f8fafc;
	--qr-preview-bg: #ffffff;

	/* === Feedback & Status === */
	--success: #10b981;
	--success-light: #d1fae5;
	--success-dark: #065f46;
	--warning: #f59e0b;
	--warning-light: #fef3c7;
	--warning-dark: #854d0e;
	--danger: #ef4444;
	--danger-light: #fee2e2;
	--danger-dark: #991b1b;
	--info: #3b6cf6;
	--info-light: #eef3ff;

	/* === Typography Scale & Settings === */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

	--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
	--text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
	--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
	--text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
	--text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
	--text-3xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.375rem);
	--text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3.125rem);
	--text-5xl: clamp(2.75rem, 2.3rem + 2.25vw, 4rem);

	--line-height-tight: 1.15;
	--line-height-heading: 1.25;
	--line-height-body: 1.65;
	--letter-spacing-tight: -0.025em;

	/* === Radii Tokens (Rounded SaaS aesthetic) === */
	--radius-xs: 0.25rem;   /* 4px */
	--radius-sm: 0.375rem;  /* 6px */
	--radius-md: 0.5rem;    /* 8px */
	--radius-lg: 0.75rem;   /* 12px */
	--radius-xl: 1rem;      /* 16px */
	--radius-2xl: 1.5rem;   /* 24px */
	--radius-full: 9999px;  /* Pill shape */

	/* === Elevation & Shadows === */
	--shadow-sm: 0 1px 2px 0 rgba(10, 22, 40, 0.05);
	--shadow: 0 4px 6px -1px rgba(10, 22, 40, 0.08), 0 2px 4px -2px rgba(10, 22, 40, 0.04);
	--shadow-md: 0 10px 15px -3px rgba(10, 22, 40, 0.08), 0 4px 6px -4px rgba(10, 22, 40, 0.04);
	--shadow-lg: 0 20px 25px -5px rgba(10, 22, 40, 0.1), 0 8px 10px -6px rgba(10, 22, 40, 0.05);
	--shadow-xl: 0 25px 50px -12px rgba(10, 22, 40, 0.25);
	--shadow-glow: 0 0 24px var(--accent-glow);

	/* === Layout & Containers === */
	--container-width: 1240px;
	--container-narrow: 880px;
	--section-padding: clamp(3.5rem, 6vw, 6.5rem);

	/* === Transitions === */
	--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
	--theme-transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* === Explicit Dark Mode Theme Tokens === */
[data-theme="dark"] {
	color-scheme: dark;

	--primary: #060b13;
	--primary-dark: #02050a;
	--primary-light: #111a2e;
	--primary-subtle: #1e293b;

	--accent: #3b82f6;
	--accent-hover: #60a5fa;
	--accent-active: #2563eb;
	--accent-subtle: rgba(59, 130, 246, 0.18);
	--accent-glow: rgba(59, 130, 246, 0.45);

	--text: #f8fafc;
	--text-secondary: #94a3b8;
	--text-muted: #64748b;
	--text-on-dark: #ffffff;
	--text-muted-dark: #94a3b8;

	--background: #090e17;
	--surface: #0f172a;
	--surface-alt: #162238;
	--surface-card: #111a2e;
	--border: #1e293b;
	--border-light: #253349;
	--border-dark: #1e293b;

	--header-bg: #060b13;
	--header-border: #1e293b;
	--header-text: #ffffff;
	--header-toggle-track: #1e293b;
	--header-toggle-border: #334155;
	--header-toggle-thumb: #3b82f6;

	--input-bg: #0f172a;
	--input-text: #f8fafc;
	--input-border: #334155;
	--tool-panel-bg: #111a2e;
	--tool-preview-bg: #0f172a;
	--qr-preview-bg: #0f172a;

	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
	--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.45);
	--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.55);
	--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

/* Fallback for system dark mode when user hasn't explicitly chosen */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--primary: #060b13;
		--primary-dark: #02050a;
		--primary-light: #111a2e;
		--primary-subtle: #1e293b;

		--accent: #3b82f6;
		--accent-hover: #60a5fa;
		--accent-active: #2563eb;
		--accent-subtle: rgba(59, 130, 246, 0.18);
		--accent-glow: rgba(59, 130, 246, 0.45);

		--text: #f8fafc;
		--text-secondary: #94a3b8;
		--text-muted: #64748b;
		--text-on-dark: #ffffff;
		--text-muted-dark: #94a3b8;

		--background: #090e17;
		--surface: #0f172a;
		--surface-alt: #162238;
		--surface-card: #111a2e;
		--border: #1e293b;
		--border-light: #253349;
		--border-dark: #1e293b;

		--header-bg: #060b13;
		--header-border: #1e293b;
		--header-text: #ffffff;
		--header-toggle-track: #1e293b;
		--header-toggle-border: #334155;
		--header-toggle-thumb: #3b82f6;

		--input-bg: #0f172a;
		--input-text: #f8fafc;
		--input-border: #334155;
		--tool-panel-bg: #111a2e;
		--tool-preview-bg: #0f172a;
		--qr-preview-bg: #0f172a;

		--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
		--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.45);
		--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
		--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.55);
		--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
	}
}

[data-theme="light"] {
	color-scheme: light;
}

/* ==========================================================================
   RESET & BASE TYPOGRAPHY
   ========================================================================== */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: var(--line-height-body);
	color: var(--text);
	background-color: var(--background);
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
	overflow-x: clip;
}

body {
	margin: 0;
	overflow-x: clip;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	font-weight: 700;
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--text);
	margin-bottom: 0.75rem;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
	margin-bottom: 1.25rem;
	color: var(--text-secondary);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--accent-hover);
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

code, kbd, samp, pre {
	font-family: var(--font-mono);
	font-size: 0.875em;
}

img, svg {
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

ul, ol {
	padding-left: 1.5rem;
	margin-bottom: 1.25rem;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
}

th, td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--border);
	text-align: left;
}

th {
	font-weight: 600;
	background-color: var(--surface);
}