/**
 * Techlo Builder — Design Tokens
 *
 * Single source of truth for the Techlo Builder Enterprise Design
 * System. Every admin screen, frontend template, and future module
 * plugin loads this file (via UI\UIManager::enqueue_assets()) and
 * builds on top of these CSS custom properties instead of hardcoding
 * colors, spacing, or radii. No module may define its own competing
 * color palette.
 */

:root {

	/* ===== Brand Colors ===== */
	--techlo-color-primary:        #0B1F3A;
	--techlo-color-primary-hover:  #12294D;
	--techlo-color-primary-soft:   rgba(11, 31, 58, 0.06);

	--techlo-color-secondary:      #10B6A3;
	--techlo-color-secondary-hover:#0EA192;
	--techlo-color-secondary-soft: rgba(16, 182, 163, 0.10);

	--techlo-color-bg:             #FFFFFF;
	--techlo-color-bg-subtle:      #F6F8FA;
	--techlo-color-surface:        #FFFFFF;

	--techlo-color-text:           #101828;
	--techlo-color-text-muted:     #667085;
	--techlo-color-text-inverse:   #FFFFFF;

	--techlo-color-border:         #E4E7EC;
	--techlo-color-border-strong:  #D0D5DD;

	/* ===== Semantic Colors ===== */
	--techlo-color-success:        #12B76A;
	--techlo-color-success-soft:   rgba(18, 183, 106, 0.12);
	--techlo-color-warning:        #F79009;
	--techlo-color-warning-soft:   rgba(247, 144, 9, 0.12);
	--techlo-color-danger:         #F04438;
	--techlo-color-danger-soft:    rgba(240, 68, 56, 0.12);
	--techlo-color-info:           #2E90FA;
	--techlo-color-info-soft:      rgba(46, 144, 250, 0.12);

	/* ===== Typography ===== */
	--techlo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
	--techlo-font-family-urdu: "Noto Nastaliq Urdu", "Scheherazade New", var(--techlo-font-family);

	--techlo-text-xs:   12px;
	--techlo-text-sm:   13px;
	--techlo-text-base: 14px;
	--techlo-text-md:   16px;
	--techlo-text-lg:   18px;
	--techlo-text-xl:   22px;
	--techlo-text-2xl:  28px;
	--techlo-text-3xl:  34px;

	--techlo-font-regular:  400;
	--techlo-font-medium:   500;
	--techlo-font-semibold: 600;
	--techlo-font-bold:     700;

	--techlo-leading-tight:  1.25;
	--techlo-leading-normal: 1.5;
	--techlo-leading-loose:  1.7;

	/* ===== Spacing Scale (4px base) ===== */
	--techlo-space-1:  4px;
	--techlo-space-2:  8px;
	--techlo-space-3:  12px;
	--techlo-space-4:  16px;
	--techlo-space-5:  20px;
	--techlo-space-6:  24px;
	--techlo-space-8:  32px;
	--techlo-space-10: 40px;
	--techlo-space-12: 48px;
	--techlo-space-16: 64px;

	/* ===== Border Radius ===== */
	--techlo-radius-sm: 8px;
	--techlo-radius-md: 12px;
	--techlo-radius-lg: 16px;
	--techlo-radius-full: 999px;

	/* ===== Shadows ===== */
	--techlo-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
	--techlo-shadow-md: 0 4px 10px rgba(16, 24, 40, 0.08);
	--techlo-shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.12);
	--techlo-shadow-glass: 0 8px 32px rgba(11, 31, 58, 0.10);
	--techlo-shadow-focus: 0 0 0 4px var(--techlo-color-secondary-soft);

	/* ===== Transitions ===== */
	--techlo-transition-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
	--techlo-transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
	--techlo-transition-slow:   320ms cubic-bezier(0.4, 0, 0.2, 1);

	/* ===== Z-Index Scale ===== */
	--techlo-z-dropdown: 1000;
	--techlo-z-sticky:   1010;
	--techlo-z-overlay:  1020;
	--techlo-z-modal:    1030;
	--techlo-z-toast:    1040;

	/* ===== Icon Sizing ===== */
	--techlo-icon-sm: 16px;
	--techlo-icon-md: 20px;
	--techlo-icon-lg: 24px;
}

/* Dark-surface variant reserved for future dark-mode support (opt-in per screen). */
[data-techlo-theme="dark"] {
	--techlo-color-bg:        #0B1220;
	--techlo-color-bg-subtle: #111A2E;
	--techlo-color-surface:   #131C31;
	--techlo-color-text:      #F2F4F7;
	--techlo-color-text-muted:#94A3B8;
	--techlo-color-border:    #1F2A44;
	--techlo-color-border-strong: #2A3A5C;
}