/**
 * Infynic Theme - Complete Design Tokens & Custom Properties
 *
 * @package Infynic_Theme
 * @author Jyotirmay Ray <https://jyotirmayray.in/>
 */

:root {
	/* ==========================================================================
	   1. Brand Color System (Locked Blue Foundation: #2B5DF5)
	   ========================================================================== */
	--infynic-primary-50: #EFF4FF;
	--infynic-primary-100: #DBE6FE;
	--infynic-primary-200: #BFD3FE;
	--infynic-primary-300: #93B5FD;
	--infynic-primary-400: #6090FA;
	--infynic-primary-500: #2B5DF5; /* Working Base Source-of-Truth */
	--infynic-primary-600: #1D44DB;
	--infynic-primary-700: #1A35B0;
	--infynic-primary-800: #1A2D8E;
	--infynic-primary-900: #1A2874;

	/* Semantic Brand Mappings */
	--infynic-primary: var(--infynic-primary-500);
	--infynic-primary-hover: var(--infynic-primary-600);
	--infynic-primary-active: var(--infynic-primary-700);
	--infynic-primary-light: var(--infynic-primary-300);
	--infynic-primary-soft: rgba(43, 93, 245, 0.08);
	--infynic-primary-subtle: rgba(43, 93, 245, 0.04);
	--infynic-primary-glow: rgba(43, 93, 245, 0.22);
	--infynic-primary-contrast: #FFFFFF;

	/* ==========================================================================
	   2. Neutral Palette
	   ========================================================================== */
	--infynic-neutral-white: #FFFFFF;
	--infynic-neutral-50: #F8FAFC;
	--infynic-neutral-100: #F1F5F9;
	--infynic-neutral-200: #E2E8F0;
	--infynic-neutral-300: #CBD5E1;
	--infynic-neutral-400: #94A3B8;
	--infynic-neutral-500: #64748B;
	--infynic-neutral-600: #475569;
	--infynic-neutral-700: #334155;
	--infynic-neutral-800: #1E293B;
	--infynic-neutral-900: #0F172A;
	--infynic-neutral-black: #080C15;

	/* ==========================================================================
	   3. Semantic Backgrounds & Surfaces (Light First)
	   ========================================================================== */
	--infynic-bg-page: var(--infynic-neutral-50);
	--infynic-bg-surface: var(--infynic-neutral-white);
	--infynic-bg-surface-elevated: var(--infynic-neutral-white);
	--infynic-bg-surface-subtle: var(--infynic-neutral-100);
	--infynic-bg-surface-active: #EDF2F7;
	--infynic-bg-overlay: rgba(8, 12, 21, 0.45);

	/* Backward compatibility aliases */
	--infynic-bg: var(--infynic-bg-page);
	--infynic-surface: var(--infynic-bg-surface);
	--infynic-surface-subtle: var(--infynic-bg-surface-subtle);

	/* ==========================================================================
	   4. Semantic Typography & Text Colors
	   ========================================================================== */
	--infynic-text-primary: var(--infynic-neutral-900);
	--infynic-text-secondary: var(--infynic-neutral-600);
	--infynic-text-muted: var(--infynic-neutral-500);
	--infynic-text-disabled: var(--infynic-neutral-400);
	--infynic-text-inverse: var(--infynic-neutral-white);

	/* Backward compatibility alias */
	--infynic-text: var(--infynic-text-primary);
	--infynic-text-light: var(--infynic-text-disabled);

	/* ==========================================================================
	   5. Borders & Dividers
	   ========================================================================== */
	--infynic-border-subtle: var(--infynic-neutral-100);
	--infynic-border-default: var(--infynic-neutral-200);
	--infynic-border-strong: var(--infynic-neutral-300);
	--infynic-border-focus: var(--infynic-primary-500);
	--infynic-border-glass: rgba(255, 255, 255, 0.65);

	/* Backward compatibility alias */
	--infynic-border: var(--infynic-border-default);

	/* ==========================================================================
	   6. Semantic Status Colors
	   ========================================================================== */
	--infynic-success-50: #ECFDF5;
	--infynic-success-500: #10B981;
	--infynic-success-600: #059669;
	--infynic-success: var(--infynic-success-500);
	--infynic-success-soft: rgba(16, 185, 129, 0.12);

	--infynic-warning-50: #FFFBEB;
	--infynic-warning-500: #F59E0B;
	--infynic-warning-600: #D97706;
	--infynic-warning: var(--infynic-warning-500);
	--infynic-warning-soft: rgba(245, 158, 11, 0.12);

	--infynic-danger-50: #FEF2F2;
	--infynic-danger-500: #EF4444;
	--infynic-danger-600: #DC2626;
	--infynic-danger: var(--infynic-danger-500);
	--infynic-danger-soft: rgba(239, 68, 68, 0.12);

	--infynic-info-50: #F0F9FF;
	--infynic-info-500: #0EA5E9;
	--infynic-info-600: #0284C7;
	--infynic-info: var(--infynic-info-500);
	--infynic-info-soft: rgba(14, 165, 233, 0.12);

	/* ==========================================================================
	   7. Liquid Glass Material (iOS Inspired)
	   ========================================================================== */
	/* Tier 1: Glass Soft */
	--infynic-glass-soft-bg: rgba(255, 255, 255, 0.70);
	--infynic-glass-soft-border: rgba(255, 255, 255, 0.50);
	--infynic-glass-soft-blur: blur(10px) saturate(180%);

	/* Tier 2: Glass Medium (Default) */
	--infynic-glass-bg: rgba(255, 255, 255, 0.85);
	--infynic-glass-border: rgba(255, 255, 255, 0.65);
	--infynic-glass-blur: blur(16px) saturate(190%);
	--infynic-glass-highlight: inset 0 1px 1px 0 rgba(255, 255, 255, 0.9);

	/* Tier 3: Glass Strong */
	--infynic-glass-strong-bg: rgba(255, 255, 255, 0.94);
	--infynic-glass-strong-border: rgba(255, 255, 255, 0.85);
	--infynic-glass-strong-blur: blur(24px) saturate(200%);

	/* Glass Opaque Fallback */
	--infynic-glass-fallback-bg: #FFFFFF;

	/* ==========================================================================
	   8. Typography Tokens (Space Grotesk)
	   ========================================================================== */
	--infynic-font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--infynic-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

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

	--infynic-line-height-none: 1;
	--infynic-line-height-tight: 1.18;
	--infynic-line-height-snug: 1.35;
	--infynic-line-height-normal: 1.5;
	--infynic-line-height-relaxed: 1.65;

	--infynic-letter-spacing-tighter: -0.04em;
	--infynic-letter-spacing-tight: -0.02em;
	--infynic-letter-spacing-normal: 0;
	--infynic-letter-spacing-wide: 0.04em;
	--infynic-letter-spacing-wider: 0.08em;

	/* Fluid Typography Scale */
	--infynic-font-size-display-xl: clamp(2.5rem, 5vw + 1rem, 3.75rem); /* 40px -> 60px */
	--infynic-font-size-display-l: clamp(2rem, 3.5vw + 1rem, 3rem);     /* 32px -> 48px */
	--infynic-font-size-display-m: clamp(1.75rem, 2.5vw + 1rem, 2.25rem); /* 28px -> 36px */

	--infynic-font-size-h1: clamp(1.625rem, 2vw + 1rem, 2rem);    /* 26px -> 32px */
	--infynic-font-size-h2: clamp(1.375rem, 1.5vw + 1rem, 1.625rem); /* 22px -> 26px */
	--infynic-font-size-h3: clamp(1.1875rem, 1vw + 1rem, 1.375rem);  /* 19px -> 22px */
	--infynic-font-size-h4: 1.125rem;  /* 18px */
	--infynic-font-size-h5: 1rem;      /* 16px */
	--infynic-font-size-h6: 0.875rem;  /* 14px */

	--infynic-font-size-body-lg: 1.125rem;
	--infynic-font-size-body: 1rem;
	--infynic-font-size-body-sm: 0.875rem;
	--infynic-font-size-caption: 0.75rem;
	--infynic-font-size-overline: 0.6875rem;

	/* Backward compatibility font sizes */
	--infynic-font-size-xs: var(--infynic-font-size-caption);
	--infynic-font-size-sm: var(--infynic-font-size-body-sm);
	--infynic-font-size-base: var(--infynic-font-size-body);
	--infynic-font-size-lg: var(--infynic-font-size-body-lg);
	--infynic-font-size-xl: var(--infynic-font-size-h3);
	--infynic-font-size-2xl: var(--infynic-font-size-h2);
	--infynic-font-size-3xl: var(--infynic-font-size-h1);
	--infynic-font-size-4xl: var(--infynic-font-size-display-m);

	/* ==========================================================================
	   9. Standardized Spacing Scale (4px increments)
	   ========================================================================== */
	--infynic-space-1: 0.25rem;  /* 4px */
	--infynic-space-2: 0.5rem;   /* 8px */
	--infynic-space-3: 0.75rem;  /* 12px */
	--infynic-space-4: 1rem;     /* 16px */
	--infynic-space-5: 1.25rem;  /* 20px */
	--infynic-space-6: 1.5rem;   /* 24px */
	--infynic-space-8: 2rem;     /* 32px */
	--infynic-space-10: 2.5rem;  /* 40px */
	--infynic-space-12: 3rem;    /* 48px */
	--infynic-space-16: 4rem;    /* 64px */
	--infynic-space-20: 5rem;    /* 80px */
	--infynic-space-24: 6rem;    /* 96px */
	--infynic-space-32: 8rem;    /* 128px */
	--infynic-space-40: 10rem;   /* 160px */

	/* ==========================================================================
	   10. Border Radius System
	   ========================================================================== */
	--infynic-radius-xs: 4px;
	--infynic-radius-sm: 8px;
	--infynic-radius-md: 12px;
	--infynic-radius-lg: 16px;
	--infynic-radius-xl: 20px;
	--infynic-radius-2xl: 28px;
	--infynic-radius-pill: 9999px;
	--infynic-radius-full: 9999px;

	/* ==========================================================================
	   11. Shadow & Elevation System
	   ========================================================================== */
	--infynic-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
	--infynic-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
	--infynic-shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
	--infynic-shadow-lg: 0 12px 20px -4px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
	--infynic-shadow-xl: 0 20px 30px -6px rgba(15, 23, 42, 0.10), 0 8px 12px -6px rgba(15, 23, 42, 0.04);
	--infynic-shadow-glass: 0 12px 36px 0 rgba(43, 93, 245, 0.06), 0 2px 8px 0 rgba(15, 23, 42, 0.04);
	--infynic-shadow-card-hover: 0 16px 32px -8px rgba(43, 93, 245, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);

	/* ==========================================================================
	   12. Motion & Transitions
	   ========================================================================== */
	--infynic-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
	--infynic-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--infynic-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--infynic-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	--infynic-duration-fast: 150ms;
	--infynic-duration-normal: 220ms;
	--infynic-duration-slow: 350ms;

	--infynic-transition: all var(--infynic-duration-normal) var(--infynic-ease-standard);
	--infynic-transition-transform: transform var(--infynic-duration-normal) var(--infynic-ease-standard);
	--infynic-transition-fade: opacity var(--infynic-duration-fast) var(--infynic-ease-standard);

	/* ==========================================================================
	   13. Layout Containers & Breakpoints
	   ========================================================================== */
	--infynic-container-narrow: 768px;
	--infynic-container-standard: 1140px;
	--infynic-container-wide: 1280px;
	--infynic-container-full: 1440px;
	--infynic-container-max: var(--infynic-container-wide);
	--infynic-container-pad: 1.5rem;

	/* Focus Ring */
	--infynic-focus-ring: 0 0 0 3px rgba(43, 93, 245, 0.25);
}