/* UA Backend HQ � Design Tokens v2 (2025-11-05) */
/* Replaces _vars.css (original ref above) */

:root {
    /* ===== Brand Primitives ===== */
    --ua-black: #000000;
    --ua-white: #FFFFFF;
    /* Use OKLCH-ish approximations via HSL for predictable tints/shades */
    --ua-red-950: #3d0a12;
    --ua-red-900: #5a0f1a;
    --ua-red-800: #7a1320;
    --ua-red-700: #9b1626;
    --ua-red-600: #C01530; /* hover / pressed gradient stop */
    --ua-red-500: #E31937; /* primary */
    --ua-red-400: #f24357;
    --ua-red-300: #f66a7a;
    --ua-red-200: #f9a0a8;
    --ua-red-100: #fcd0d4;
    --gray-950: #0a0a0a;
    --gray-900: #121212;
    --gray-850: #161616;
    --gray-800: #1a1a1a; /* base surface */
    --gray-750: #1f1f1f;
    --gray-700: #242424;
    --gray-600: #2e2e2e;
    --gray-500: #5a5a5a;
    --gray-400: #8b8b8b;
    --gray-300: #b4b4b4;
    --gray-200: #d6d6d6;
    --gray-100: #e8e8e8;
    /* ===== Semantic Colors ===== */
    --color-bg: var(--gray-900);
    --color-bg-elev-1: color-mix(in oklab, var(--gray-900), white 4%);
    --color-bg-elev-2: color-mix(in oklab, var(--gray-900), white 7%);
    --color-surface: var(--gray-800);
    --color-text: #f5f5f6;
    --color-text-muted: rgba(255,255,255,0.64);
    --color-text-subtle: rgba(255,255,255,0.44);
    --accent: var(--ua-red-500);
    --accent-contrast: var(--ua-white);
    --accent-hover: var(--ua-red-600);
    --accent-press: var(--ua-red-700);
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --info: #3B82F6;
    /* ===== Glass / Backdrop Parameters ===== */
    /* Lower alpha + lower blur to cut GPU cost; add layered border for depth */
    --glass-surface: rgba(255,255,255,0.06);
    --glass-surface-hover: rgba(255,255,255,0.095);
    --glass-border: rgba(255,255,255,0.16);
    --glass-ring: rgba(227,25,55,0.18);
    /* ===== Typography ===== */
    --font-primary: 'Neue Plak', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: 'Neue Plak', 'MAD Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-cjk: 'Source Han Sans CN', 'Lanting Hei', 'FZ Lanting DaHei', "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
    --font-cjk-serif: 'ZhuLang XinSong', "Songti SC", "SimSun", "NSimSun", serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --font-button: 'Neue Plak', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-button-weight: 500;
    --font-button-stretch: 100%;
    /* Fluid scale via clamp: tuned for dense admin UIs */
    --text-xs: clamp(0.74rem, 0.72rem + 0.2vw, 0.78rem);
    --text-sm: clamp(0.86rem, 0.82rem + 0.25vw, 0.92rem);
    --text-base: clamp(0.98rem, 0.94rem + 0.3vw, 1.05rem);
    --text-lg: clamp(1.12rem, 1.06rem + 0.35vw, 1.2rem);
    --text-xl: clamp(1.28rem, 1.18rem + 0.45vw, 1.44rem);
    --text-2xl: clamp(1.52rem, 1.36rem + 0.8vw, 1.8rem);
    --text-3xl: clamp(1.86rem, 1.6rem + 1.4vw, 2.25rem);
    --text-4xl: clamp(2.2rem, 1.9rem + 2vw, 2.8rem);
    /* ===== Spacing (tightened; 4pt base w/ half-steps) ===== */
    --space-0: 0;
    --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-7: 1.75rem; /* 28px */
    --space-8: 2rem; /* 32px */
    --space-10: 2.5rem; /* 40px */
    --space-12: 3rem; /* 48px */
    --space-16: 4rem; /* 64px */
    /* ===== Radii ===== */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem; /* slightly smaller for tighter UI */
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;
    /* ===== Elevation ===== */
    --shadow-1: 0 1px 2px rgba(0,0,0,0.25);
    --shadow-2: 0 4px 10px rgba(0,0,0,0.25);
    --shadow-3: 0 10px 24px rgba(0,0,0,0.28);
    --shadow-ambient: inset 0 0 0 1px rgba(255,255,255,0.04);
    /* ===== Z-Index ===== */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    /* ===== Motion ===== */
    --ease-standard: cubic-bezier(.2,.8,.2,1);
    --ease-emph: cubic-bezier(.22,1,.36,1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
    /* ===== Backdrop Blur (de-tuned for perf) ===== */
    --blur-sm: blur(6px);
    --blur-md: blur(10px);
    --blur-lg: blur(14px);
    --blur-xl: blur(18px);

    /* ===== Button System ===== */
    /* Base */
    --btn-font: var(--font-button);
    --btn-font-weight: var(--font-button-weight);
    --btn-font-size: 14px;
    --btn-line-height: 1;
    --btn-letter-spacing: 0.01em;
    --btn-radius: var(--radius-md);
    --btn-gap: var(--space-2);
    --btn-padding-y: 9px;
    --btn-padding-x: 18px;
    --btn-padding-y-offset: 2px; /* optical center offset */

    /* Glass surface */
    --btn-bg: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.05) 100%);
    --btn-bg-hover: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.08) 100%);
    --btn-bg-active: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 50%, rgba(255,255,255,0.03) 100%);
    --btn-border: rgba(255,255,255,0.12);
    --btn-border-hover: rgba(255,255,255,0.25);
    --btn-text: rgba(255,255,255,0.9);
    --btn-blur: blur(6px) saturate(120%);

    /* Shadows */
    --btn-shadow: 0 0 12px rgba(255,255,255,0.03), 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
    --btn-shadow-hover: 0 0 14px rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
    --btn-shadow-active: 0 0 8px rgba(255,255,255,0.02), 0 1px 4px rgba(0,0,0,0.2), inset 0 2px 4px rgba(0,0,0,0.1);

    /* Transitions */
    --btn-transition: background 0.2s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease, color 0.2s ease;

    /* Neon glow intensity */
    --btn-glow: 0.15;
    --btn-glow-hover: 0.3;
    --btn-glow-spread: 21px;
    --btn-glow-spread-lg: 42px;

    /* Size variants */
    --btn-xs-font-size: 12px;
    --btn-xs-padding-y: 5px;
    --btn-xs-padding-x: 10px;
    --btn-xs-radius: 4px;
    --btn-xs-gap: 5px;
    --btn-xs-icon-size: 12px;

    --btn-sm-font-size: 13px;
    --btn-sm-padding-y: 7px;
    --btn-sm-padding-x: 14px;
    --btn-sm-radius: 5px;
    --btn-sm-gap: 6px;
    --btn-sm-icon-size: 14px;

    --btn-md-gap: 8px;
    --btn-md-icon-size: 16px;

    --btn-lg-font-size: 15px;
    --btn-lg-padding-y: 11px;
    --btn-lg-padding-x: 22px;
    --btn-lg-radius: 7px;
    --btn-lg-gap: 10px;
    --btn-lg-icon-size: 18px;

    --btn-xl-font-size: 16px;
    --btn-xl-padding-y: 13px;
    --btn-xl-padding-x: 28px;
    --btn-xl-radius: 8px;
    --btn-xl-gap: 12px;
    --btn-xl-icon-size: 20px;

    /* Color variants (semantic) - RGB values for CSS variable composition */
    /* Brand (UA Red) - for brand CTAs */
    --btn-brand-rgb: 227, 25, 55;
    --btn-brand: var(--ua-red-500);
    --btn-brand-light: var(--ua-red-300);
    --btn-brand-lighter: var(--ua-red-200);
    --btn-brand-highlight-rgb: 246, 106, 122;

    /* Primary (Blue) - for standard primary actions */
    --btn-primary-rgb: 59, 130, 246;
    --btn-primary: #3B82F6;
    --btn-primary-light: #93C5FD;
    --btn-primary-lighter: #BFDBFE;
    --btn-primary-highlight-rgb: 147, 197, 253;

    --btn-success-rgb: 16, 185, 129;
    --btn-success: var(--success);
    --btn-success-light: #6EE7B7;
    --btn-success-lighter: #A7F3D0;
    --btn-success-highlight-rgb: 110, 231, 183;

    --btn-danger-rgb: 239, 68, 68;
    --btn-danger: var(--error);
    --btn-danger-light: #FCA5A5;
    --btn-danger-lighter: #FECACA;
    --btn-danger-highlight-rgb: 252, 165, 165;

    --btn-warning-rgb: 245, 158, 11;
    --btn-warning: var(--warning);
    --btn-warning-light: #FCD34D;
    --btn-warning-lighter: #FDE68A;
    --btn-warning-highlight-rgb: 252, 211, 77;

    --btn-accent-rgb: 139, 92, 246;
    --btn-accent: #8B5CF6;
    --btn-accent-light: #C4B5FD;
    --btn-accent-lighter: #DDD6FE;
    --btn-accent-highlight-rgb: 196, 181, 253;

    --btn-info-rgb: 6, 182, 212;
    --btn-info: #06B6D4;
    --btn-info-light: #67E8F9;
    --btn-info-lighter: #A5F3FC;
    --btn-info-highlight-rgb: 103, 232, 249;

    --btn-secondary-rgb: 100, 100, 100;

    /* Light (for dark backgrounds) */
    --btn-light-rgb: 255, 255, 255;
    --btn-light: #FFFFFF;
    --btn-light-text: var(--gray-900);
    --btn-light-text-hover: var(--gray-950);

    /* Icon button padding (tokenized) */
    --btn-icon-padding: var(--space-2);
    --btn-icon-padding-xs: 6px;
    --btn-icon-padding-sm: var(--space-2);
    --btn-icon-padding-lg: var(--space-3);
    --btn-icon-padding-xl: 14px;
}