/**
 * ABDS shared design system — single source of truth for both properties:
 *   - abds-seo.com (static, served by Caddy from this same directory)
 *   - license.abds-seo.com (WordPress plugin, wp_enqueue_style at this file's
 *     public URL — see class-abds-ls-design-assets.php)
 *
 * Discipline borrowed from apple.com/iphone-17-pro, not its form: a real type
 * scale, a real spacing rhythm, one accent used sparingly, materials (depth
 * via shadow, not borders) instead of flat 1px-bordered cards. No
 * cinematic-scroll or full-bleed-video machinery lives here — this file is
 * tokens plus small, generic primitives (.btn, .card, .field, focus ring),
 * not a component library.
 *
 * Edit this ONE file for both properties. Do not fork or hand-copy it.
 */

*, *::before, *::after {
	box-sizing: border-box;
}

:root {
	/* ---------------------------------------------------------------- Brand */
	--brand-blue-500: #2563eb;
	--brand-blue-600: #1e40af;
	--brand-blue-700: #1e3a8a;
	--brand-yellow-400: #facc15;
	--brand-yellow-600: #a16207;

	/* -------------------------------------------------------- Neutral ramp */
	--gray-50:  #f8fafc;
	--gray-100: #f1f5f9;
	--gray-200: #e2e8f0;
	--gray-300: #cbd5e1;
	--gray-400: #94a3b8;
	--gray-500: #64748b;
	--gray-600: #475569;
	--gray-700: #334155;
	--gray-800: #1e293b;
	--gray-900: #0f172a;
	--gray-950: #020617;

	/* ------------------------------------------------------- Accent scale */
	--emerald-50: #ecfdf5;
	--emerald-600: #059669;
	--emerald-300: #6ee7b7;
	--amber-50: #fffbeb;
	--amber-600: #d97706;
	--amber-300: #fcd34d;
	--red-50: #fef2f2;
	--red-600: #dc2626;
	--red-300: #fca5a5;

	/* --------------------------------------------------- Semantic — light */
	color-scheme: light;
	--surface: #ffffff;
	--surface-raised: #ffffff;
	--surface-sunken: var(--gray-50);
	--surface-overlay: rgba(15, 23, 42, 0.45);

	--border: var(--gray-200);
	--border-strong: var(--gray-300);

	--text-primary: var(--gray-900);
	--text-secondary: var(--gray-600);
	--text-tertiary: var(--gray-400);
	--text-on-accent: #ffffff;

	--accent: var(--brand-blue-500);
	--accent-hover: var(--brand-blue-600);
	--accent-active: var(--brand-blue-700);
	--accent-soft: #eff6ff;
	--accent-2: var(--brand-yellow-400);

	--success-bg: var(--emerald-50);
	--success-text: var(--emerald-600);
	--warning-bg: var(--amber-50);
	--warning-text: var(--amber-600);
	--danger-bg: var(--red-50);
	--danger-text: var(--red-600);

	--focus-ring-color: #2563eb;
	--focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

	/* ------------------------------------------------------------ Elevation
	   Larger surface = stronger blur + deeper offset, not just a bigger
	   number on the same shadow shape. */
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.04);
	--shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
	--shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.14), 0 6px 16px rgba(15, 23, 42, 0.07);

	/* ---------------------------------------------------------- Typography
	   Pair weight + size, not size alone, for hierarchy. Tracking runs
	   negative at large sizes and slightly positive at small sizes; leading
	   runs the opposite way (tight display type, roomy small text). */
	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

	--text-5xl-size: 3rem;      /* 48px */
	--text-5xl-tracking: -0.03em;
	--text-5xl-leading: 1.05;

	--text-4xl-size: 2.25rem;   /* 36px */
	--text-4xl-tracking: -0.028em;
	--text-4xl-leading: 1.1;

	--text-3xl-size: 1.875rem;  /* 30px */
	--text-3xl-tracking: -0.024em;
	--text-3xl-leading: 1.15;

	--text-2xl-size: 1.5rem;    /* 24px */
	--text-2xl-tracking: -0.018em;
	--text-2xl-leading: 1.25;

	--text-xl-size: 1.25rem;    /* 20px */
	--text-xl-tracking: -0.012em;
	--text-xl-leading: 1.35;

	--text-lg-size: 1.125rem;   /* 18px */
	--text-lg-tracking: -0.006em;
	--text-lg-leading: 1.45;

	--text-base-size: 1rem;     /* 16px */
	--text-base-tracking: -0.001em;
	--text-base-leading: 1.6;

	--text-sm-size: 0.875rem;   /* 14px */
	--text-sm-tracking: 0.003em;
	--text-sm-leading: 1.55;

	--text-xs-size: 0.75rem;    /* 12px */
	--text-xs-tracking: 0.01em;
	--text-xs-leading: 1.5;

	/* ------------------------------------------------------------- Spacing
	   4px steps through the component range, 8px steps once spacing starts
	   separating whole sections — expressed in rem so it scales with the
	   user's root font size instead of breaking away from it. */
	--space-1: 0.25rem;   /* 4px */
	--space-2: 0.5rem;    /* 8px */
	--space-3: 0.75rem;   /* 12px */
	--space-4: 1rem;      /* 16px */
	--space-5: 1.25rem;   /* 20px */
	--space-6: 1.5rem;    /* 24px */
	--space-8: 2rem;      /* 32px */
	--space-10: 2.5rem;   /* 40px */
	--space-12: 3rem;     /* 48px */
	--space-14: 3.5rem;   /* 56px */
	--space-16: 4rem;     /* 64px */
	--space-18: 4.5rem;   /* 72px */
	--space-20: 5rem;     /* 80px */
	--space-24: 6rem;     /* 96px */

	/* -------------------------------------------------------------- Radius */
	--radius-sm: 0.5rem;   /* 8px  — buttons, inputs, small controls */
	--radius-md: 0.75rem;  /* 12px — compact cards, badges' larger cousin */
	--radius-lg: 1rem;     /* 16px — cards, panels */
	--radius-xl: 1.5rem;   /* 24px — large hero surfaces */
	--radius-full: 999px;  /* pills */

	/* --------------------------------------------------------------- Motion
	   Interactive feedback fires on :active (press), not on release, and
	   uses a real cubic-bezier, not the weak CSS built-ins. Anything the
	   user drags/flicks should be spring-driven in JS, not a fixed
	   duration/curve — these tokens cover CSS-transition cases. */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--duration-fast: 120ms;
	--duration-base: 180ms;
	--duration-slow: 280ms;

	--wrap: 1080px;
}

/* --------------------------------------------------------------- Dark mode
   Both properties opt in explicitly via [data-theme="dark"] (matches the
   toggle pattern used elsewhere in this codebase) OR follow the OS via
   prefers-color-scheme when nothing explicit is set. An explicit
   [data-theme="light"] always wins over the OS. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--surface: var(--gray-900);
		--surface-raised: var(--gray-800);
		--surface-sunken: var(--gray-950);
		--surface-overlay: rgba(2, 6, 23, 0.6);

		--border: var(--gray-700);
		--border-strong: var(--gray-600);

		--text-primary: var(--gray-50);
		--text-secondary: var(--gray-400);
		--text-tertiary: var(--gray-500);
		--text-on-accent: #ffffff;

		--accent: #3b82f6;
		--accent-hover: #60a5fa;
		--accent-active: #93c5fd;
		--accent-soft: rgba(37, 99, 235, 0.16);
		--accent-2: var(--brand-yellow-400);

		--success-bg: rgba(5, 150, 105, 0.16);
		--success-text: var(--emerald-300);
		--warning-bg: rgba(217, 119, 6, 0.16);
		--warning-text: var(--amber-300);
		--danger-bg: rgba(220, 38, 38, 0.18);
		--danger-text: var(--red-300);

		--focus-ring-color: #60a5fa;
		--focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.45);

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
		--shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
		--shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.35);
	}
}
:root[data-theme="dark"] {
	color-scheme: dark;
	--surface: var(--gray-900);
	--surface-raised: var(--gray-800);
	--surface-sunken: var(--gray-950);
	--surface-overlay: rgba(2, 6, 23, 0.6);

	--border: var(--gray-700);
	--border-strong: var(--gray-600);

	--text-primary: var(--gray-50);
	--text-secondary: var(--gray-400);
	--text-tertiary: var(--gray-500);
	--text-on-accent: #ffffff;

	--accent: #3b82f6;
	--accent-hover: #60a5fa;
	--accent-active: #93c5fd;
	--accent-soft: rgba(37, 99, 235, 0.16);
	--accent-2: var(--brand-yellow-400);

	--success-bg: rgba(5, 150, 105, 0.16);
	--success-text: var(--emerald-300);
	--warning-bg: rgba(217, 119, 6, 0.16);
	--warning-text: var(--amber-300);
	--danger-bg: rgba(220, 38, 38, 0.18);
	--danger-text: var(--red-300);

	--focus-ring-color: #60a5fa;
	--focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.45);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
	--shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------- Reduced motion
   Every transition collapses to a short opacity-only crossfade: no
   transform, no movement, no spring. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
	.btn, .card, .field input, .field select, .field textarea, a {
		transition-property: opacity !important;
		transition-duration: var(--duration-fast) !important;
		transition-timing-function: linear !important;
	}
}

/* --------------------------------------------------------- Type utilities
   Ready-made pairs of size + tracking + leading. Weight is set per-context
   (a lead paragraph and a card title can share --text-lg but not weight). */
.text-5xl { font-size: var(--text-5xl-size); letter-spacing: var(--text-5xl-tracking); line-height: var(--text-5xl-leading); }
.text-4xl { font-size: var(--text-4xl-size); letter-spacing: var(--text-4xl-tracking); line-height: var(--text-4xl-leading); }
.text-3xl { font-size: var(--text-3xl-size); letter-spacing: var(--text-3xl-tracking); line-height: var(--text-3xl-leading); }
.text-2xl { font-size: var(--text-2xl-size); letter-spacing: var(--text-2xl-tracking); line-height: var(--text-2xl-leading); }
.text-xl  { font-size: var(--text-xl-size);  letter-spacing: var(--text-xl-tracking);  line-height: var(--text-xl-leading); }
.text-lg  { font-size: var(--text-lg-size);  letter-spacing: var(--text-lg-tracking);  line-height: var(--text-lg-leading); }
.text-base{ font-size: var(--text-base-size);letter-spacing: var(--text-base-tracking);line-height: var(--text-base-leading); }
.text-sm  { font-size: var(--text-sm-size);  letter-spacing: var(--text-sm-tracking);  line-height: var(--text-sm-leading); }
.text-xs  { font-size: var(--text-xs-size);  letter-spacing: var(--text-xs-tracking);  line-height: var(--text-xs-leading); }

/* ------------------------------------------------------------- Focus ring
   Visible on every interactive element for keyboard users; mouse/touch
   activation never shows it (:focus-visible, not :focus). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------ Primitives
   Small, generic, reusable across both properties. Page-specific layout
   stays in each property's own stylesheet. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: var(--text-base-size);
	letter-spacing: var(--text-base-tracking);
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { cursor: not-allowed; opacity: 0.6; transform: none; }

.btn-primary { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active:not(:disabled) { background: var(--accent-active); border-color: var(--accent-active); }

.btn-ghost { background: var(--surface); color: var(--accent); border-color: var(--border-strong); }
.btn-ghost:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }

.card {
	background: var(--surface-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.card-raised { box-shadow: var(--shadow-md); }
.card-floating { box-shadow: var(--shadow-lg); }

.field label {
	display: block;
	font-size: var(--text-sm-size);
	font-weight: 600;
	color: var(--text-secondary);
	margin-bottom: var(--space-2);
}
.field input,
.field select,
.field textarea {
	width: 100%;
	min-height: 44px;
	font-size: 16px; /* never smaller — prevents iOS auto-zoom on focus */
	font-family: var(--font-sans);
	color: var(--text-primary);
	background: var(--surface);
	border: 1.5px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: var(--space-3) var(--space-4);
	transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--text-tertiary); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--accent); }
.field .hint { font-size: var(--text-xs-size); color: var(--text-tertiary); margin-top: var(--space-2); }

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs-size);
	font-weight: 700;
	padding: 0.15rem var(--space-3);
	border-radius: var(--radius-full);
}
.badge-success { background: var(--success-bg); color: var(--success-text); }
.badge-warning { background: var(--warning-bg); color: var(--warning-text); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger-text); }
.badge-accent  { background: var(--accent-soft); color: var(--accent-hover); }

/* ----------------------------------------------------------- Site header
   The one piece of chrome both properties must render identically — a
   licensee lands on license.abds-seo.com straight from a purchase and
   should recognize the same brand, not a different, unstyled site. */
.site-header {
	position: sticky; top: 0; z-index: 10;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border);
}
:root[data-theme="dark"] .site-header { background: rgba(15, 23, 42, 0.85); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .site-header { background: rgba(15, 23, 42, 0.85); }
}
.site-header .wrap { display: flex; align-items: center; gap: var(--space-5); height: 64px; }
.brand { display: inline-flex; align-items: baseline; gap: 0.15em; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; text-decoration: none; color: var(--text-primary); }
.brand span { color: var(--accent); }
.brand b { color: var(--accent-2); -webkit-text-stroke: 0.4px #eab308; }
.site-header .nav { margin-left: auto; display: flex; gap: var(--space-6); align-items: center; }
.site-header .nav a { text-decoration: none; color: var(--text-secondary); font-weight: 600; font-size: var(--text-sm-size); }
.site-header .nav a:hover { color: var(--text-primary); }

.lang { font-size: var(--text-xs-size); font-weight: 700; white-space: nowrap; }
.lang strong { color: var(--text-primary); }
.lang a { color: var(--text-secondary); text-decoration: none; }
.lang a:hover { color: var(--text-primary); }