:root {
--tzq-blue-50: #eff6ff;
--tzq-blue-100: #dbeafe;
--tzq-blue-200: #bfdbfe;
--tzq-blue-300: #93c5fd;
--tzq-blue-400: #60a5fa;
--tzq-blue-500: #3b82f6;
--tzq-blue-600: #2563eb;
--tzq-blue-700: #1d4ed8;
--tzq-blue-800: #1e40af;
--tzq-blue-900: #1e3a8a;
--tzq-teal-50: #f0fdfa;
--tzq-teal-100: #ccfbf1;
--tzq-teal-150: #a7f3d0;
--tzq-teal-200: #99f6e4;
--tzq-teal-300: #5eead4;
--tzq-teal-400: #2dd4bf;
--tzq-teal-500: #14b8a6;
--tzq-teal-600: #0d9488;
--tzq-teal-650: #10b981;
--tzq-teal-700: #0f766e;
--tzq-teal-800: #115e59;
--tzq-teal-900: #134e4a;
--tzq-amber-50: #fffbeb;
--tzq-amber-100: #fef3c7;
--tzq-amber-200: #fde68a;
--tzq-amber-300: #fcd34d;
--tzq-amber-400: #fbbf24;
--tzq-amber-500: #f59e0b;
--tzq-amber-600: #d97706;
--tzq-amber-700: #b45309;
--tzq-amber-800: #92400e;
--tzq-amber-900: #78350f;
--tzq-orange-50: #fff7ed;
--tzq-orange-100: #ffedd5;
--tzq-orange-200: #fed7aa;
--tzq-orange-300: #fdba74;
--tzq-orange-400: #fb923c;
--tzq-orange-500: #f97316;
--tzq-orange-600: #ea580c;
--tzq-orange-700: #c2410c;
--tzq-orange-800: #9a3412;
--tzq-orange-900: #7c2d12;
--tzq-purple-50: #faf5ff;
--tzq-purple-100: #f3e8ff;
--tzq-purple-200: #e9d5ff;
--tzq-purple-300: #d8b4fe;
--tzq-purple-400: #c084fc;
--tzq-purple-500: #a855f7;
--tzq-purple-600: #9333ea;
--tzq-purple-700: #7e22ce;
--tzq-purple-800: #6b21a8;
--tzq-purple-900: #581c87;
--tzq-indigo-50: #eef2ff;
--tzq-indigo-100: #e0e7ff;
--tzq-indigo-200: #c7d2fe;
--tzq-indigo-300: #a5b4fc;
--tzq-indigo-400: #818cf8;
--tzq-indigo-500: #6366f1;
--tzq-indigo-600: #4f46e5;
--tzq-indigo-700: #4338ca;
--tzq-indigo-800: #3730a3;
--tzq-indigo-900: #312e81;
--tzq-red-50: #fef2f2;
--tzq-red-100: #fee2e2;
--tzq-red-200: #fecaca;
--tzq-red-300: #fca5a5;
--tzq-red-400: #f87171;
--tzq-red-500: #ef4444;
--tzq-red-600: #dc2626;
--tzq-red-700: #b91c1c;
--tzq-red-800: #991b1b;
--tzq-red-900: #7f1d1d;
--tzq-yellow-50: #fefce8;
--tzq-yellow-100: #fef9c3;
--tzq-yellow-200: #fef08a;
--tzq-yellow-300: #fde047;
--tzq-yellow-400: #facc15;
--tzq-yellow-500: #eab308;
--tzq-yellow-600: #ca8a04;
--tzq-yellow-700: #a16207;
--tzq-yellow-800: #854d0e;
--tzq-yellow-900: #713f12;
--tzq-2048-bg: #bbada0;
--tzq-2048-bg-dark: #a39489;
--tzq-2048-text: #776e65;
--tzq-2048-tile-2: #eee4da;
--tzq-2048-tile-4: #ede0c8;
--tzq-2048-tile-8: #f4b17a;
--tzq-2048-tile-16: #f59563;
--tzq-2048-tile-32: #f67c60;
--tzq-2048-tile-64: #f65e3b;
--tzq-2048-tile-128: #edcf72;
--tzq-2048-tile-256: #edcc61;
--tzq-2048-tile-512: #edc850;
--tzq-2048-tile-1024: #edc53f;
--tzq-2048-tile-2048: #edc22e;
--tzq-2048-tile-4096: #3c3a32;
--tzq-2048-tile-alt: #f2b179;
--tzq-2048-tile-alt2: #f67c5f;
--tzq-gray-50: #f9fafb;
--tzq-gray-100: #f3f4f6;
--tzq-gray-200: #e5e7eb;
--tzq-gray-300: #d1d5db;
--tzq-gray-400: #9ca3af;
--tzq-gray-500: #6b7280;
--tzq-gray-600: #4b5563;
--tzq-gray-700: #374151;
--tzq-gray-800: #1f2937;
--tzq-gray-900: #111827;
--tzq-slate-50: #f8fafc;
--tzq-slate-100: #f1f5f9;
--tzq-slate-200: #e2e8f0;
--tzq-slate-300: #cbd5e1;
--tzq-slate-400: #94a3b8;
--tzq-slate-500: #64748b;
--tzq-slate-600: #475569;
--tzq-slate-700: #334155;
--tzq-slate-800: #1e293b;
--tzq-slate-900: #0f172a;
--tzq-success-50: #f0fdf4;
--tzq-success-100: #dcfce7;
--tzq-success-500: #22c55e;
--tzq-success-600: #16a34a;
--tzq-success-700: #15803d;
--tzq-error-50: #fef2f2;
--tzq-error-100: #fee2e2;
--tzq-error-500: #ef4444;
--tzq-error-600: #dc2626;
--tzq-error-700: #b91c1c;
--tzq-warning-50: #fffbeb;
--tzq-warning-100: #fef3c7;
--tzq-warning-500: #f59e0b;
--tzq-warning-600: #d97706;
--tzq-warning-700: #b45309;
--tzq-info-50: #eff6ff;
--tzq-info-100: #dbeafe;
--tzq-info-500: #3b82f6;
--tzq-info-600: #2563eb;
--tzq-info-700: #1d4ed8;
--tzq-primary: var(--tzq-blue-600);
--tzq-primary-light: var(--tzq-blue-500);
--tzq-primary-dark: var(--tzq-blue-800);
--tzq-secondary: #4ecdc4;
--tzq-secondary-dark: #3db8b0;
--tzq-secondary-light: #6fd8d0;
--tzq-accent: #ffe66d;
--tzq-accent-dark: #ffd93d;
--tzq-accent-light: #fff2a8;
--tzq-bg-primary: #ffffff;
--tzq-bg-secondary: var(--tzq-gray-50);
--tzq-bg-tertiary: var(--tzq-slate-100);
--tzq-bg-blue-light: var(--tzq-blue-50);
--tzq-bg-blue-lighter: var(--tzq-blue-100);
--tzq-bg-dark: var(--tzq-slate-900);
--tzq-text-primary: var(--tzq-gray-800);
--tzq-text-secondary: var(--tzq-gray-600);
--tzq-text-tertiary: var(--tzq-gray-500);
--tzq-bg-black: #000000;
--tzq-bg-black-light: #1a1a1a;
--tzq-whatsapp: #1d8c34;
--tzq-whatsapp-hover: #166c2a;
--tzq-facebook: #0f5ac1;
--tzq-facebook-hover: #0a4a9c;
--tzq-twitter: #1da1f2;
--tzq-x-twitter: #000000;
--tzq-x-twitter-hover: #1a1a1a;
--tzq-rank-gold: #ffd700;
--tzq-rank-silver: #c0c0c0;
--tzq-rank-bronze: #cd7f32;
--tzq-amber-gradient-start: #fef3c7;
--tzq-amber-gradient-end: #fde68a;
--tzq-amber-border: 1px solid var(--tzq-primary-light);
--tzq-border-light: var(--tzq-slate-200);
--tzq-border-medium: var(--tzq-slate-300);
--tzq-border-blue: var(--tzq-blue-200);
--tzq-success: var(--tzq-success-600);
--tzq-success-light: var(--tzq-success-100);
--tzq-success-dark: var(--tzq-success-700);
--tzq-error: var(--tzq-error-500);
--tzq-error-light: var(--tzq-error-100);
--tzq-error-dark: var(--tzq-error-600);
--tzq-primary-rgb: 37, 99, 235;
--tzq-primary-rgba-08: rgba(var(--tzq-primary-rgb), 0.08);
--tzq-primary-rgba-10: rgba(var(--tzq-primary-rgb), 0.1);
--tzq-primary-rgba-15: rgba(var(--tzq-primary-rgb), 0.15);
--tzq-primary-rgba-20: rgba(var(--tzq-primary-rgb), 0.2);
--tzq-primary-rgba-25: rgba(var(--tzq-primary-rgb), 0.25);
--tzq-primary-rgba-30: rgba(var(--tzq-primary-rgb), 0.3);
--tzq-primary-rgba-40: rgba(var(--tzq-primary-rgb), 0.4);
--tzq-primary-rgba-50: rgba(var(--tzq-primary-rgb), 0.5);
--tzq-success-rgb: 22, 163, 74;
--tzq-success-rgba-20: rgba(var(--tzq-success-rgb), 0.2);
--tzq-success-rgba-30: rgba(var(--tzq-success-rgb), 0.3);
--tzq-success-rgba-40: rgba(var(--tzq-success-rgb), 0.4);
--tzq-error-rgb: 239, 68, 68;
--tzq-error-rgba-20: rgba(var(--tzq-error-rgb), 0.2);
--tzq-error-rgba-25: rgba(var(--tzq-error-rgb), 0.25);
--tzq-error-rgba-30: rgba(var(--tzq-error-rgb), 0.3);
--tzq-error-rgba-35: rgba(var(--tzq-error-rgb), 0.35);
--tzq-error-rgba-40: rgba(var(--tzq-error-rgb), 0.4);
--tzq-warning-rgb: 245, 158, 11;
--tzq-warning-rgba-25: rgba(var(--tzq-warning-rgb), 0.25);
--tzq-primary-rgba-35: rgba(var(--tzq-primary-rgb), 0.35);
--tzq-warning: var(--tzq-warning-500);
--tzq-warning-light: var(--tzq-warning-100);
--tzq-info: var(--tzq-info-600);
--tzq-info-light: var(--tzq-info-100);
--tzq-color-orange: var(--tzq-orange-500);
--tzq-color-orange-light: var(--tzq-orange-100);
--tzq-color-orange-dark: var(--tzq-orange-700);
--tzq-color-purple: var(--tzq-purple-500);
--tzq-color-purple-light: var(--tzq-purple-100);
--tzq-color-purple-dark: var(--tzq-purple-700);
--tzq-gradient-primary: linear-gradient(
135deg,
var(--tzq-primary),
var(--tzq-primary-dark)
);
--tzq-gradient-success: linear-gradient(
135deg,
var(--tzq-success),
var(--tzq-success-dark)
);
--tzq-gradient-warning: linear-gradient(
135deg,
var(--tzq-warning),
var(--tzq-amber-600)
);
--tzq-gradient-error: linear-gradient(
135deg,
var(--tzq-error),
var(--tzq-error-dark)
);
--tzq-gradient-secondary: linear-gradient(
135deg,
var(--tzq-secondary),
var(--tzq-secondary-dark)
);
--tzq-gradient-page: linear-gradient(
135deg,
var(--tzq-bg-blue-light) 0%,
var(--tzq-bg-blue-lighter) 50%,
var(--tzq-bg-blue-light) 100%
);
--tzq-gradient-surface: linear-gradient(
135deg,
rgba(255, 255, 255, 0.95),
rgba(240, 249, 255, 0.95)
);
--tzq-gradient-accent: linear-gradient(
135deg,
var(--tzq-accent),
var(--tzq-accent-dark)
);
--tzq-gradient-orange: linear-gradient(
135deg,
var(--tzq-color-orange),
var(--tzq-color-orange-dark)
);
--tzq-gradient-purple: linear-gradient(
135deg,
var(--tzq-color-purple),
var(--tzq-color-purple-dark)
);
--tzq-gradient-primary-light: linear-gradient(
135deg,
rgba(var(--tzq-primary-rgb), 0.08),
rgba(var(--tzq-primary-rgb), 0.05)
);
--tzq-gradient-primary-light-alt: linear-gradient(
135deg,
rgba(var(--tzq-primary-rgb), 0.1),
rgba(var(--tzq-primary-rgb), 0.08)
);
--tzq-gradient-primary-medium: linear-gradient(
135deg,
rgba(var(--tzq-primary-rgb), 0.2) 0%,
rgba(var(--tzq-primary-rgb), 0.1) 100%
);
--tzq-gradient-white-overlay: linear-gradient(
135deg,
rgba(255, 255, 255, 0.14) 0%,
rgba(255, 255, 255, 0) 45%
);
--tzq-gradient-white-overlay-strong: linear-gradient(
135deg,
rgba(255, 255, 255, 0.18) 0%,
rgba(255, 255, 255, 0) 50%
);
--tzq-gradient-primary-dark: linear-gradient(
135deg,
var(--tzq-primary-dark) 0%,
var(--tzq-primary) 48%,
var(--tzq-primary-darker) 100%
);
--tzq-gradient-primary-dark-alt: linear-gradient(
334deg,
var(--tzq-primary-dark) 0%,
var(--tzq-primary) 48%,
var(--tzq-primary-darker) 100%
);
--tzq-gradient-primary-home: linear-gradient(
135deg,
var(--tzq-primary-dark) 0%,
var(--tzq-primary) 35%,
var(--tzq-secondary) 65%,
var(--tzq-accent) 100%
);
--tzq-font-mono: "Fira Code", "Courier New", monospace;
--tzq-font-light: 300;
--tzq-font-normal: 400;
--tzq-font-medium: 500;
--tzq-font-semibold: 600;
--tzq-font-bold: 700;
--tzq-font-extrabold: 800;
--tzq-font-black: 900;
--tzq-leading-none: 1;
--tzq-leading-tight: 1.25;
--tzq-leading-snug: 1.375;
--tzq-leading-normal: 1.5;
--tzq-leading-relaxed: 1.625;
--tzq-leading-loose: 2;
--tzq-tracking-tighter: -0.05em;
--tzq-tracking-tight: -0.025em;
--tzq-tracking-normal: 0;
--tzq-tracking-wide: 0.025em;
--tzq-tracking-wider: 0.05em;
--tzq-tracking-widest: 0.1em;
--tzq-spacing-0: 0;
--tzq-spacing-px: 1px;
--tzq-spacing-0-5: 0.125rem;
--tzq-spacing-1: 0.25rem;
--tzq-spacing-1-5: 0.375rem;
--tzq-spacing-2: 0.5rem;
--tzq-spacing-2-5: 0.625rem;
--tzq-spacing-3: 0.75rem;
--tzq-spacing-3-5: 0.875rem;
--tzq-spacing-4: 1rem;
--tzq-spacing-5: 1.25rem;
--tzq-spacing-6: 1.5rem;
--tzq-spacing-7: 1.75rem;
--tzq-spacing-8: 2rem;
--tzq-spacing-9: 2.25rem;
--tzq-spacing-10: 2.5rem;
--tzq-spacing-11: 2.75rem;
--tzq-spacing-12: 3rem;
--tzq-spacing-14: 3.5rem;
--tzq-spacing-16: 4rem;
--tzq-spacing-20: 5rem;
--tzq-spacing-24: 6rem;
--tzq-spacing-28: 7rem;
--tzq-spacing-32: 8rem;
--tzq-spacing-xs: var(--tzq-spacing-1);
--tzq-spacing-sm: var(--tzq-spacing-2);
--tzq-spacing-md: var(--tzq-spacing-4);
--tzq-spacing-lg: var(--tzq-spacing-6);
--tzq-spacing-xl: var(--tzq-spacing-8);
--tzq-spacing-2xl: var(--tzq-spacing-10);
--tzq-spacing-3xl: var(--tzq-spacing-12);
--tzq-spacing-4xl: var(--tzq-spacing-16);
--tzq-spacing-5xl: var(--tzq-spacing-20);
--tzq-spacing-responsive-sm: clamp(1rem, 2vw, 1.5rem);
--tzq-spacing-responsive-md: clamp(1.5rem, 3vw, 2rem);
--tzq-spacing-responsive-lg: clamp(2rem, 4vw, 3rem);
--tzq-spacing-responsive-xl: clamp(2.5rem, 5vw, 4rem);
--tzq-spacing-responsive-2xl: clamp(3rem, 6vw, 5rem);
--tzq-gap-0: 0;
--tzq-gap-xs: var(--tzq-spacing-2);
--tzq-gap-sm: var(--tzq-spacing-4);
--tzq-gap-md: var(--tzq-spacing-6);
--tzq-gap-lg: var(--tzq-spacing-8);
--tzq-gap-xl: var(--tzq-spacing-12);
--tzq-gap-2xl: var(--tzq-spacing-16);
--tzq-radius-none: 0;
--tzq-radius-sm: 0.25rem;
--tzq-radius-md: 0.5rem;
--tzq-radius-lg: 0.75rem;
--tzq-radius-xl: 1rem;
--tzq-radius-2xl: 1.5rem;
--tzq-radius-3xl: 2rem;
--tzq-radius-full: 9999px;
--tzq-shadow-none: none;
--tzq-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--tzq-shadow-sm:
0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--tzq-shadow-md:
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--tzq-shadow-lg:
0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--tzq-shadow-xl:
0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
--tzq-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--tzq-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
--tzq-shadow-primary: 0 4px 14px rgba(37, 99, 235, 0.25);
--tzq-shadow-primary-lg: 0 8px 24px rgba(37, 99, 235, 0.35);
--tzq-shadow-primary-xl: 0 12px 32px rgba(37, 99, 235, 0.4);
--tzq-shadow-primary-xxl: 0 22px 60px rgba(37, 99, 235, 0.3);
--tzq-shadow-primary-huge: 0 24px 70px rgba(37, 99, 235, 0.35);
--tzq-shadow-secondary: 0 4px 14px rgba(78, 205, 196, 0.3);
--tzq-shadow-accent: 0 4px 14px rgba(255, 230, 109, 0.3);
--tzq-shadow-error: 0 4px 14px var(--tzq-error-rgba-25);
--tzq-shadow-error-lg: 0 6px 18px var(--tzq-error-rgba-35);
--tzq-shadow-warning: 0 4px 14px var(--tzq-warning-rgba-25);
--tzq-shadow-black-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--tzq-shadow-black-md: 0 2px 8px rgba(0, 0, 0, 0.1);
--tzq-shadow-black-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
--tzq-shadow-black-xl: 0 8px 24px rgba(0, 0, 0, 0.2);
--tzq-shadow-black-2xl: 0 12px 40px rgba(0, 0, 0, 0.2);
--tzq-shadow-black-3xl: 0 16px 40px rgba(0, 0, 0, 0.2);
--tzq-shadow-black-4xl: 0 22px 60px rgba(0, 0, 0, 0.4);
--tzq-shadow-black-overlay: 0 20px 35px rgba(0, 0, 0, 0.25);
--tzq-shadow-primary-sm: 0 1px 4px rgba(37, 99, 235, 0.1);
--tzq-shadow-primary-md-alt: 0 2px 8px rgba(37, 99, 235, 0.15);
--tzq-shadow-primary-lg-alt: 0 4px 12px rgba(37, 99, 235, 0.2);
--tzq-shadow-primary-xl-alt: 0 4px 12px rgba(37, 99, 235, 0.3);
--tzq-shadow-primary-2xl: 0 6px 16px rgba(37, 99, 235, 0.4);
--tzq-shadow-primary-3xl: 0 6px 20px rgba(37, 99, 235, 0.4);
--tzq-shadow-primary-4xl: 0 12px 35px rgba(37, 99, 235, 0.5);
--tzq-shadow-black-md-alt: 0 4px 12px rgba(0, 0, 0, 0.12);
--tzq-shadow-black-lg-alt: 0 8px 20px rgba(0, 0, 0, 0.15);
--tzq-transition-fast: 150ms ease;
--tzq-transition-base: 300ms ease;
--tzq-transition-slow: 300ms ease;
--tzq-transition-all: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--tzq-ease-in: cubic-bezier(0.4, 0, 1, 1);
--tzq-ease-out: cubic-bezier(0, 0, 0.2, 1);
--tzq-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--tzq-z-base: 0;
--tzq-z-dropdown: 1000;
--tzq-z-sticky: 1020;
--tzq-z-fixed: 1030;
--tzq-z-backdrop: 1040;
--tzq-z-modal: 1050;
--tzq-z-popover: 1060;
--tzq-z-tooltip: 1070;
--tzq-z-notification: 1080;
--tzq-container-7xl: 80rem;
--tzq-content-max: var(--tzq-container-width);
--tzq-content-narrow: 800px;
--tzq-content-wide: 1400px;
--tzq-wide-max: 1400px;
--tzq-container-padding: clamp(1rem, 3vw, 2rem);
--tzq-page-gutter: clamp(1rem, 3vw, 2rem);
--tzq-content-gap: var(--tzq-spacing-lg);
--tzq-sidebar-gap: var(--tzq-spacing-md);
--tzq-breakpoint-xs: 375px;
--tzq-breakpoint-sm: 640px;
--tzq-breakpoint-md: 768px;
--tzq-breakpoint-lg: 1024px;
--tzq-breakpoint-xl: 1280px;
--tzq-breakpoint-2xl: 1536px;
--tzq-breakpoint-480: 480px;
--tzq-breakpoint-540: 540px;
--tzq-breakpoint-600: 600px;
--tzq-breakpoint-769: 769px;
--tzq-breakpoint-992: 992px;
--tzq-breakpoint-782: 782px;
--tzq-btn-padding-sm: var(--tzq-spacing-2-5) var(--tzq-spacing-5);
--tzq-btn-padding-md: var(--tzq-spacing-4) var(--tzq-spacing-8);
--tzq-btn-padding-lg: var(--tzq-spacing-5) var(--tzq-spacing-10);
--tzq-btn-min-height: 44px;
--tzq-btn-min-width: 44px;
--tzq-input-padding: var(--tzq-spacing-3-5) var(--tzq-spacing-4);
--tzq-input-border-width: 2px;
--tzq-input-focus-ring: 0 0 0 4px rgba(37, 99, 235, 0.1);
--tzq-icon-xs: 1rem;
--tzq-icon-sm: 1.25rem;
--tzq-icon-md: 1.5rem;
--tzq-icon-lg: 2rem;
--tzq-icon-xl: 2.5rem;
--tzq-icon-2xl: 3rem;
--tzq-icon-3xl: 3.5rem;
--tzq-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.5);
--tzq-focus-ring-offset: 2px;
--tzq-duration-75: 75ms;
--tzq-duration-100: 100ms;
--tzq-duration-150: 150ms;
--tzq-duration-200: 200ms;
--tzq-duration-300: 300ms;
--tzq-duration-500: 500ms;
--tzq-duration-700: 700ms;
--tzq-duration-1000: 1000ms;
}
body.tzq-dark-mode {
--tzq-border-light: rgba(255, 255, 255, 0.1);
--tzq-border-medium: rgba(255, 255, 255, 0.2);
}
@media (prefers-reduced-motion: reduce) {
:root {
--tzq-transition-fast: 0ms;
--tzq-transition-base: 0ms;
--tzq-transition-slow: 0ms;
--tzq-transition-all: none;
}
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}