/**
 * WinPaisa Design System Tokens & CSS Variables
 * 
 * Target: High contrast, dark graphite base, gold accents, system-first typography, fluid containers,
 * accessible touch targets, and mathematical spacing rhythm.
 * 
 * @package WinPaisa
 * @since 1.0.0
 */

:root {
	/* ==========================================================================
	   1. TYPOGRAPHY TOKENS (Modern System-First Stack)
	   ========================================================================== */
	--wp-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", "PingFang SC", "Noto Sans", sans-serif;
	--wp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	/* Fluid Typography Scales (Optical hierarchy using clamp) */
	--wp-text-hero: clamp(22px, 5vw, 40px);
	--wp-text-h1: clamp(20px, 4vw, 32px);
	--wp-text-h2: clamp(17px, 2.8vw, 24px);
	--wp-text-h3: clamp(15px, 2vw, 19px);
	--wp-text-base: clamp(14px, 1.4vw, 16px);
	--wp-text-sm: clamp(12.5px, 1.1vw, 13.5px);
	--wp-text-xs: clamp(11px, 0.9vw, 12px);

	/* Line Heights */
	--wp-lh-tight: 1.2;
	--wp-lh-heading: 1.3;
	--wp-lh-body: 1.6;
	--wp-lh-loose: 1.75;

	/* Letter Spacing */
	--wp-tracking-tight: -0.02em;
	--wp-tracking-normal: 0;
	--wp-tracking-wide: 0.04em;
	--wp-tracking-caps: 0.08em;

	/* ==========================================================================
	   2. SPACING SCALE & RHYTHMIC METRICS
	   ========================================================================== */
	--wp-space-1: 4px;
	--wp-space-2: 8px;
	--wp-space-3: 12px;
	--wp-space-4: 16px;
	--wp-space-5: 20px;
	--wp-space-6: 24px;
	--wp-space-7: 28px;
	--wp-space-8: 32px;
	--wp-space-9: 36px;
	--wp-space-10: 40px;
	--wp-space-11: 48px;
	--wp-space-12: 64px;

	--wp-space-3xs: 2px;
	--wp-space-2xs: 4px;
	--wp-space-xs: 8px;
	--wp-space-sm: 12px;
	--wp-space-md: 16px;
	--wp-space-lg: 20px;
	--wp-space-xl: 28px;
	--wp-space-2xl: 40px;
	--wp-space-3xl: 56px;
	--wp-space-section: clamp(32px, 5.5vw, 64px);

	/* Container Widths & Responsive Horizontal Padding */
	--wp-container-max: 1240px;
	--wp-container-narrow: 920px;
	--wp-container-wide: 1400px;
	--wp-container-pad-mobile: 14px;
	--wp-container-pad-tablet: 20px;
	--wp-container-pad-desktop: 32px;
	--wp-container-pad: clamp(14px, 3.5vw, 32px);

	/* Breakpoint Scale References */
	--wp-bp-mobile: 320px;
	--wp-bp-phablet: 480px;
	--wp-bp-tablet-sm: 640px;
	--wp-bp-tablet: 768px;
	--wp-bp-desktop: 1024px;
	--wp-bp-desktop-lg: 1280px;
	--wp-bp-desktop-xl: 1440px;

	/* Header, Modal & Layer Dimensions */
	--wp-header-height: 68px;
	--wp-header-height-mobile: 58px;
	--wp-header-z-index: 1000;
	--wp-dropdown-z-index: 1050;
	--wp-modal-z-index: 100000;
	--wp-toast-z-index: 100100;

	/* Accessible Touch Targets (WCAG 2.5.5 AAA Target Size: 44x44px minimum) */
	--wp-min-touch-target: 44px;

	/* ==========================================================================
	   3. BORDER RADIUS & ELEVATION
	   ========================================================================== */
	--wp-radius-xs: 4px;
	--wp-radius-sm: 6px;
	--wp-radius-md: 10px;
	--wp-radius-lg: 14px;
	--wp-radius-xl: 20px;
	--wp-radius-2xl: 28px;
	--wp-radius-full: 9999px;

	/* Motion & Transitions (Respecting Reduced Motion) */
	--wp-transition-instant: 75ms linear;
	--wp-transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
	--wp-transition-base: 220ms cubic-bezier(0.16, 1, 0.3, 1);
	--wp-transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);

	/* Accessibility Focus Rings */
	--wp-focus-ring-color: #E5B842;
	--wp-focus-ring-width: 2px;
	--wp-focus-ring-offset: 2px;

	/* ==========================================================================
	   4. BRAND ACCENT & ECOSYSTEM CONSTANTS
	   ========================================================================== */
	/* Pakistani Gold Accent */
	--wp-brand-gold: #E5B842;
	--wp-brand-gold-hover: #D4A528;
	--wp-brand-gold-dark: #A67C1E;
	--wp-brand-gold-light: #FDF3D6;
	--wp-brand-gold-muted: rgba(229, 184, 66, 0.15);
	--wp-brand-gold-glow: rgba(229, 184, 66, 0.25);

	/* Emerald Green (Easypaisa / Verified Status) */
	--wp-brand-emerald: #10B981;
	--wp-brand-emerald-hover: #059669;
	--wp-brand-emerald-muted: rgba(16, 185, 129, 0.15);
	--wp-brand-emerald-border: rgba(16, 185, 129, 0.35);

	/* Ruby Red (JazzCash / Urgent Notice) */
	--wp-brand-ruby: #EF4444;
	--wp-brand-ruby-hover: #DC2626;
	--wp-brand-ruby-muted: rgba(239, 68, 68, 0.15);
	--wp-brand-ruby-border: rgba(239, 68, 68, 0.35);

	/* Platform Badges */
	--wp-platform-android: #3DDC84;
	--wp-platform-android-bg: rgba(61, 220, 132, 0.12);
	--wp-platform-android-border: rgba(61, 220, 132, 0.28);

	--wp-platform-ios: #38BDF8;
	--wp-platform-ios-bg: rgba(56, 189, 248, 0.12);
	--wp-platform-ios-border: rgba(56, 189, 248, 0.28);

	--wp-platform-web: #A78BFA;
	--wp-platform-web-bg: rgba(167, 139, 250, 0.12);
	--wp-platform-web-border: rgba(167, 139, 250, 0.28);

	--wp-platform-windows: #60A5FA;
	--wp-platform-windows-bg: rgba(96, 165, 250, 0.12);
	--wp-platform-windows-border: rgba(96, 165, 250, 0.28);

	/* ==========================================================================
	   5. DEFAULT COLOR PALETTE: DARK GRAPHITE (Default Dark Mode)
	   ========================================================================== */
	--wp-bg-canvas: #090C12;
	--wp-bg-surface: #101520;
	--wp-bg-surface-raised: #182030;
	--wp-bg-surface-subtle: #1E273A;
	--wp-bg-input: #121824;
	--wp-bg-hover: #222C42;

	--wp-text-primary: #F8FAFC;
	--wp-text-secondary: #CBD5E1;
	--wp-text-muted: #94A3B8;
	--wp-text-subtle: #64748B;
	--wp-text-inverse: #090C12;

	--wp-border-subtle: #1E293B;
	--wp-border-base: #2D3A50;
	--wp-border-strong: #3E4F6D;
	--wp-border-accent: rgba(229, 184, 66, 0.35);

	--wp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--wp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
	--wp-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6);
	--wp-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.75);
	--wp-shadow-gold: 0 0 20px rgba(229, 184, 66, 0.18);

	--wp-header-bg: rgba(16, 21, 32, 0.94);
	--wp-footer-bg: #090C12;
}

/* ==========================================================================
   6. LIGHT MODE OVERRIDES
   ========================================================================== */
[data-theme="light"] {
	--wp-bg-canvas: #F8FAFC;
	--wp-bg-surface: #FFFFFF;
	--wp-bg-surface-raised: #F1F5F9;
	--wp-bg-surface-subtle: #E2E8F0;
	--wp-bg-input: #FFFFFF;
	--wp-bg-hover: #E2E8F0;

	--wp-text-primary: #0F172A;
	--wp-text-secondary: #334155;
	--wp-text-muted: #64748B;
	--wp-text-subtle: #94A3B8;
	--wp-text-inverse: #FFFFFF;

	--wp-border-subtle: #E2E8F0;
	--wp-border-base: #CBD5E1;
	--wp-border-strong: #94A3B8;
	--wp-border-accent: rgba(212, 165, 40, 0.45);

	--wp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--wp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--wp-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12);
	--wp-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.18);
	--wp-shadow-gold: 0 0 15px rgba(212, 165, 40, 0.15);

	--wp-header-bg: rgba(255, 255, 255, 0.96);
	--wp-footer-bg: #0F172A;
}

/* Fallback for OS Light Mode when no explicit selection stored */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]):not([data-theme="light"]) {
		--wp-bg-canvas: #F8FAFC;
		--wp-bg-surface: #FFFFFF;
		--wp-bg-surface-raised: #F1F5F9;
		--wp-bg-surface-subtle: #E2E8F0;
		--wp-bg-input: #FFFFFF;
		--wp-bg-hover: #E2E8F0;

		--wp-text-primary: #0F172A;
		--wp-text-secondary: #334155;
		--wp-text-muted: #64748B;
		--wp-text-subtle: #94A3B8;
		--wp-text-inverse: #FFFFFF;

		--wp-border-subtle: #E2E8F0;
		--wp-border-base: #CBD5E1;
		--wp-border-strong: #94A3B8;
		--wp-border-accent: rgba(212, 165, 40, 0.45);

		--wp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
		--wp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
		--wp-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12);
		--wp-shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.18);
		--wp-shadow-gold: 0 0 15px rgba(212, 165, 40, 0.15);

		--wp-header-bg: rgba(255, 255, 255, 0.96);
		--wp-footer-bg: #0F172A;
	}
}

/* ==========================================================================
   7. ACCESSIBILITY: REDUCED MOTION PREFERENCE
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}